Get Free Trial

Hide Columns from both Grid and Fields List

Answered
Ravi Kumar asked on July 5, 2021

Hi,
 
We’re trying to implement a dynamic solution based on our input selections, for that we need to hide specific columns from both Grid and Fields List according to selected inputs.
I tried an approach from a forum question to hide Columns but it is hiding from Grid and showing those hidden columns for selection in Fields.
But for our scenario Data is standard and based on input selection need to hide columns from Grid and from Fields list (we should not show those hidden columns to user).

Please suggest any approach.
I’m sharing you my data and expected scenario, Kindly check and provide a solution.
 
DATA:
[
{
“Job_Code”: “INR18”,
“Job_Desc”: “Indian Job 18”,
“Unit_Weight”: 20.02,
“Dimension_Type”: “Meter”,
“Category_Code”: “INRLE”,
“Category_Desc”: “Indian Job Leo”
},
{
“Job_Code”: “INR17”,
“Job_Desc”: “Indian Job 17”,
“Unit_Weight”: null,
“Dimension_Type”: null,
“Category_Code”: “INRLK”,
“Category_Desc”: “Indian Job Kat”
}
]
Selected Input – “Job” : Need to show only Job_Code, Job_Desc columns and hide all other columns from both Grid and Fields List.
Selected Input – “Category” : Need to show only Category_Code, Category_Desc
Selected Input – “All” : Need to show all data columns
 
Regards,
Ravi

2 answers

Public
Vera Didenko Vera Didenko Flexmonster July 5, 2021

Hello, Ravi,
 
Thank you for writing to us.
 
The simplest solution to hide certain columns would be to use the "visible: false" property in the mapping object.
For example:

report: {
dataSource: {
type: "json",
data: getData(),
mapping: {
"Job_Code": {
type: "string",
visible: false
},
"Job_Desc": {
type: "string",
visible: false
},
"Unit_Weight": {
type: "number"
},
"Dimension_Type": {
type: "string"
},
"Category_Code": {
type: "string"
},
"Category_Desc": {
type: "string"
}
}
},
...
}

When the input value changes, you can use the connectTo() or setReport() API call to update the mapping object accordingly.
We have prepared a simple JSFiddle for illustration: https://jsfiddle.net/flexmonster/15awc83m/.
 
Please let us know if this works.
 
Kind regards,
Vera

Public
Ravi Kumar July 8, 2021

Hi Vera,
As you suggested it is working fine, we’re good with that approach.
Thank you.
 
Regards,
Ravi

Please login or Register to Submit Answer