EJ2 DataGrids Add Column Dynamically

[Panyu]

Hello, I have been caught in a problem when trying to add columns dynamically in EJ2 datagrid.

I have found the solution you offered and tries to merge it into my EJ2 code but the button didn't work.

<br />
<br />
<div id="ControlRegion">
 
 
 
    @*add column*@
     @(Html.EJ().Button("ClickMe").Text("Click Me").Type(ButtonType.Button).ClientSideEvents(events => events.Click("click")))
   
 
 
    @*现有的数据表格*@
    @Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowSorting().AllowFiltering().AllowGrouping().AllowResizing(true).Columns(col =>
{
 
 
    col.Field("WLGLID").HeaderText("WLGLID").IsPrimaryKey(true).MinWidth("120").Width("200").MaxWidth("300").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
    col.Field("MaterialName").HeaderText("MaterialName").EditType("dropdownedit").Width("150").MinWidth("8").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
    col.Field("BatchID").HeaderText("BatchID").MinWidth("8").Width("300").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
    col.Field("OrderID").HeaderText("OrderID").Width("200").MinWidth("8").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

 
 
 
 
 
}).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel","Print" }).SortSettings(sort => sort.Columns(cols)).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).Render()
 
 
  
 
    
    <script>
       
        function click(args) {//update grid columns using columns()
            var obj = $("#FlatGrid").ejGrid("instance");
            obj.columns("CustomerID", "add");//Add column
            obj.columns("CustomerID", "remove");//remove column
            obj.columns([{ field: "ShipCity", headerText: "ShipCity" }])//Add an array of object
        }
    </script>
 
 
 
 
</div>
 

[Thavasianand Sankaranarayanan]

Hi Panyu, 

Greetings from Syncfusion support. 

In your given code example you have render EJ 2 Grid but you have get the instances of EJ 1 Grid. It may be your cause of your issue. We can achieve your requirement by using the below code example. 

<script> 

    document.getElementById('element').addEventListener('click', function (args) { 

        var gridObj = document.getElementById('FlatGrid').ej2_instances[0]; 

        gridObj.columns.push({ field: "ShipCity", headerText: "ShipCity" }); 

        gridObj.refreshColumns(); 

 

    }); 

    document.getElementById('element2').addEventListener('click', function (args) { 

        var gridObj = document.getElementById('FlatGrid').ej2_instances[0]; 

        gridObj.columns.splice(1,1); 

        gridObj.refreshColumns(); 

 

    }); 

 

</script> 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#refreshcolumns 

Regards, 

Thavasianand S. 

[Panyu]

Thank you. It really helps!

Kind regards,

Panyu

[Thavasianand Sankaranarayanan]

Hi Panyu, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.