Hide column in grid

[Mohd Mohaimin Zakaria]

Hi,

I have a question, I want to hide certain column in the datagrid based on a dropdown list value.

Ex. Value in dropdown list, (Date, String, Currency)

Based on the value that being choose by user, certain column will be hide.

Thank you.

[Hariharan J V]

Hi Mohd, 

 

Greetings from Syncfusion. 

 

Query: I have a question, I want to hide certain column in the datagrid based on a dropdown list value. Ex. Value in dropdown list, (Date, String, Currency) Based on the value that being choose by user, certain column will be hide. 

 

We have validated your query and created sample based on your requirement. Here, we have bind dropdown list with date, string and currency values. Based on the selection in the dropdownlist, the corresponding column is hide in the grid by using hideColumns method of the grid. Please find the below code example and sample for your reference. 

 

[code example] 

<div> 

 

    <ejs-dropdownlist id="games" dataSource="@ViewBag.data" select="select" popupWidth="300px" placeholder="Select a game" popupHeight="220px"> 

    </ejs-dropdownlist> 

 

    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true" toolbar="@(new List<string>() { "Search" })"> 

       <e-grid-selectionSettings persistSelection="true" checkboxOnly="true"></e-grid-selectionSettings> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer Name" type="string" width="150"></e-grid-column> 

            <e-grid-column field="OrderDate" headerText=" Order Date" type="date" format="yMd" width="130"></e-grid-column> 

            <e-grid-column field="Freight" headerText="Freight" format="C2" type="number" width="120"></e-grid-column> 

            <e-grid-column field="ShippedDate" headerText="Shipped Date" type="date" format="yMd" width="140"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

    function select(args) { 

        var type = ""; 

        if (args.itemData.value == "Date") { 

            type = "date"; 

        } else if (args.itemData.value == "String") { 

            type = "string"; 

        } else if (args.itemData.value == "Currency") { 

            type = "number"; 

        } 

        var gridObj = document.getElementsByClassName('e-grid')[0]['ej2_instances'][0] 

        for (var i = 0; i < gridObj.getColumns().length; i++) { 

            if (gridObj.getColumns()[i].type == type) { 

                gridObj.hideColumns([gridObj.getColumns()[i].headerText]); 

            } else if (gridObj.getColumns()[i].type == type) { 

                gridObj.hideColumns([gridObj.getColumns()[i].headerText]); 

            } 

            else if (gridObj.getColumns()[i].type == type) { 

                gridObj.hideColumns([gridObj.getColumns()[i].headerText]); 

            } 

        } 

    } 

</script> 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TestSamplehideCol1947669867  

 

Help Documentation: https://ej2.syncfusion.com/documentation/api/grid#hidecolumns  

 

Please get back to us if you need further assistance. 

 

Regards, 

Hariharan