Dynamic Columns on Grid

[Alessandro Degola]

Hi,

I need to implement a kind of Metro.

Here an example written in HTML

Now I have a C# structure here

How Can I render this with EJ2 Grid??

What's the start point? 

I've never worked on EJ2, only with EJ1, we are planning conversion and project are just ready to render EJ2 and EJ1 grid toghether.

regards,

alessandro

[Shalini Maragathavel]

Hi Alessandro, 

Greetings from Syncfusion support. 

Based on your query we suspect that you want to dynamically add the column in the Grid . To achieve your requirement of add/remove the columns dynamically we suggest you to use the Grid’s inbuilt methods and call the refreshColumns() method for UI changes. Please refer the below code example for more information. 

Index.cshtml 

 

<button id="AddColumn" class="e-btn e-warning" onclick="AddColumn()">AddColumn</button> 

<button id="RemoveColumn" class="e-btn e-success" onclick="RemoveColumn()">RemoveColumn</button> 

 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col => 

{
. . . 

}). Render() 

 

<script> 

    function AddColumn() { 

 

        var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

 

        var obj = { field:"ShipCountry", headerText: "ShipCountry", width: 120}; 

 

        grid.columns.push(obj); 

        grid.refreshColumns(); 

    } 

    function RemoveColumn() { 

        var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

        grid.columns.pop(); 

        grid.refreshColumns(); 

    } 

 

     

</script> 

In the above code example we add/remove the column using external button click.

Please refer the below sample for more information,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization-1437891755.zip 

Please refer the below documentation for more information,

Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#refreshcolumns

Please get back to us if you need further assistance with this. 

 

Regards, 

Shalini M.