We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Hide column in grid

Thread ID:

Created:

Updated:

Platform:

Replies:

144971 May 31,2019 12:33 AM UTC May 31,2019 12:58 PM UTC ASP.NET Core - EJ 2 1
loading
Tags: DataGrid
Mohd Mohaimin Zakaria
Asked On May 31, 2019 12:33 AM UTC

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 [Syncfusion]
Replied On May 31, 2019 12:58 PM UTC

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> 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Hariharan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon