Grid column change does not take effect

Question

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 · Accepted Answer

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()

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.

Shalini Maragathavel · Answer

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

Bruno F Valli · Answer

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()