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. Image for the cookie policy date

EJ2 DataGrids Add Column Dynamically

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>
 

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team July 2, 2019 01:00 PM UTC

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. 


Regards, 
Thavasianand S. 



PA Panyu July 4, 2019 07:00 AM UTC

Thank you. It really helps!

Kind regards,
Panyu


TS Thavasianand Sankaranarayanan Syncfusion Team July 4, 2019 08:47 AM UTC

Hi Panyu, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


Loader.
Live Chat Icon For mobile
Up arrow icon