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

EJ2 DataGrids Add Column Dynamically

Thread ID:

Created:

Updated:

Platform:

Replies:

145618 Jul 1,2019 02:00 PM UTC Jul 4,2019 08:47 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Grid
Panyu
Asked On July 1, 2019 02:00 PM UTC

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 [Syncfusion]
Replied On 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. 


Panyu
Replied On July 4, 2019 07:00 AM UTC

Thank you. It really helps!

Kind regards,
Panyu

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.  


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