Grid column change does not take effect

[Bruno F Valli]

Basically I have a grid with this:

@Html.Grid(Model).Columns(columns =>

           {

               columns.Add(item => item.ChapterItemModel_Display).Titled(Html.DisplayNameFor(item => item[0].ChapterItemModel_Display).ToString()).Sortable(true).Filterable(true);

               columns.Add(item => item.Name).Titled(Html.DisplayNameFor(item => item[0].Name).ToString()).Sortable(true).Filterable(true);

               columns.Add(item => item.Description).Titled(Html.DisplayNameFor(item => item[0].Description).ToString()).Sortable(true).Filterable(true);

               columns.Add(item => item.Quantity).Titled(Html.DisplayNameFor(item => item[0].Quantity).ToString()).Sortable(true).Filterable(true);

               if (User.IsInRole(Mbfv.Hub.BL.Security.SecurityRoleOption.AdminName.ToString()))

               {

                   columns.Add(item => item.Cost).Titled(Html.DisplayNameFor(item => item[0].Cost).ToString()).Sortable(true).Filterable(true);

               }

               if (User.IsInRole(Mbfv.Hub.BL.Security.SecurityRoleOption.AdminName.ToString()))

               {

                   columns.Add().Encoded(false).Sanitized(false).SetWidth(10).RenderValueAs(item => @Html.ActionLink(" ", "Detail", new { id = item.Id }, new { @id = "ProductBundleDetailButton", @name = item.Name, @class = "btn btn-sm btn-detail glyphicon glyphicon-th-list", @title = "Detail" }));

                   columns.Add().Encoded(false).Sanitized(false).SetWidth(10).RenderValueAs(item => @Html.ActionLink(" ", "Edit", new { id = item.Id }, new { @id = "ProductBundleEditButton", @name = item.Name, @class = "btn btn-sm btn-edit glyphicon glyphicon-pencil", @title = "Edit" }));

                   columns.Add().Encoded(false).Sanitized(false).SetWidth(10).RenderValueAs(item => @Html.ActionLink(" ", "Delete", new { id = item.Id }, new { @id = "ProductBundleDeleteButton", @class = "btn btn-sm btn-delete glyphicon glyphicon-remove", @title = "Delete" }));

               }

           })

When I add a new column

               columns.Add(item => item.SaleValue).Titled(Html.DisplayNameFor(item => item[0].SaleValue).ToString()).Sortable(true).Filterable(true);

When I run the application the new column does not show up, but when I open the same page in incognito the column is there. I tried to refresh holding Shift on Chrome and I get the same result.

What am I doing wrong?

[Shalini Maragathavel]

Hi Bruno, 

Thanks for contacting Syncfusion support. 

Based on your query we suspect that you have using ASP.NET MVC platform. So, we have prepared a Grid sample in ASP.NET MVC platform.  

Please refer to the code example for more information. 

Index.cshtml 

 

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

{ 

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 

    col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add(); 

    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    

 

}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

Please find the  below sample for more information. 

Sample : https://www.syncfusion.com/downloads/support/forum/160991/ze/gridmvclocalization731870571.zip

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/getting-started-mvc/

Demo: https://ej2.syncfusion.com/aspnetmvc/Grid/LocalData#/material

If we misunderstood your query, then please share us the following information to validate further on this, 

• Please confirm us, In which platform you are rendering the Grid?
• Elaborate your requirement in detail.

Regards, 

Shalini M. 

[Bruno F Valli]

I am using ASP.NET MVC EJS on my project.

I think I found the issue, but don't know how to fix it.

I am using .EnablePersistence(). on my grid.

When I create a new grid with EnablePersistence with a column Name "First Name". If I run my application and go to the grid, everything is fine. (Using Chrome). 

If I add a new column called "Age" and run the application again the Header First Name and Age will display, but the column for Age will not display.

If I set the EnablePersistence to false and try again everything is fine the Age column is there. If I set the EnablePersistence to true the column goes away.

Am I missing something? When I EnablePersistence, where is the Persistence data stored? In a cookie?

Please let me know.

God bless,

Bruno

Here is my Code:

 @Html.EJS().Grid("ProductListIndex").DataSource(ds => ds.Url(@Url.Action("IndexDatasource", "Product")).Adaptor("UrlAdaptor")).CommandClick("commandClick").AllowPaging().PageSettings(page => page.PageCount(4).PageSize(50).PageSizes(new string[] { "50", "100", "500" })).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).AllowSorting().ColumnMenuClick("columnMenuClick").ActionBegin("actionBegin").ActionFailure("actionFailure").ActionComplete("actionComplete").Columns(col =>

   {

       // need to put the right field here to be able to track the position.

       col.Field("Id").Visible(false).Add();

       col.Field("Name").HeaderText("Name").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Width("50%").Add();

       col.Field("Age").HeaderText("Age").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Width("50%").Add();

   }).EditSettings(edit => { edit.AllowEditing(false).AllowDeleting(false).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).EnablePersistence(false).Toolbar(new List() { "Add Product" }).ToolbarClick("ToolbarClick").Render()

[Shalini Maragathavel]

Hi Bruno, 

Thanks for the update. 

We have analyzed your query and we could see that you like to add/remove the columns dynamically. When you add/remove the columns dynamically by using the Grid’s inbuilt method only. 

You cannot add/remove the columns dynamically by using the dom elements. Because it will not update or reflected in Grid model. So, If you like to 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. 

 

 

<button id="AddColumn"  onclick="AddColumn()">AddColumn</button> 

<button id="RemoveColumn"  onclick="RemoveColumn()">RemoveColumn</button> 

 

@Html.EJS().Grid("Grid").EnablePersistence(true).AllowPaging(true).Columns(col => 

{ 

    . . . 

 

}).Render() 

 

<script> 

    function AddColumn() { 

 

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

 

        var obj = { field: "Freight", headerText: "Freight", 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/EJ2Grid-158075224.zip 

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

Please get back to us, if you need further assistance. 

Regards, 

Shalini M.