This example demonstrates how to save and restore grid layouts created by end-users. These modified layouts are stored in a ListBox editor.
- Handle the GridViewSettings.CustomJSProperties event and call the MVCxGridView.SaveClientLayout method to save the currently applied layout.
settings.CustomJSProperties = (s, e) => {
MVCxGridView gridView = (MVCxGridView)s;
e.Properties["cpClientLayout"] = gridView.SaveClientLayout();
};- Handle ASPxClientGridView.Init and ASPxClientGridView.EndCallback events to store the currently applied layout in ListBox.
function OnInit(s, e) {
TrackLayout(s.cpClientLayout);
}
function OnEndCallback(s, e) {
TrackLayout(s.cpClientLayout);
}
function TrackLayout(layout) {
if (!lb.FindItemByValue(layout))
lb.AddItem(layout);
lb.SetValue(layout);
}
- Handle the ASPxClientListBox.SelectedIndexChanged event to perform a custom grid callback (call the MVCxClientGridView.PerformCallback(data) method) when the selected item changes. Pass the end-user's selected layout to the method as a parameter.
function OnSelectedIndexChanged(s, e) {
gv.PerformCallback({ layoutToApply : s.GetValue() });
}
- Handle the custom grid callback in a separate Action method. Retrieve the layout the end-user wants to appy and save this value in
ViewData.
public ActionResult GridViewPartialCustom(string layoutToApply) {
ViewData["Layout"] = layoutToApply;
return GridViewPartialCore();
}
public ActionResult GridViewPartialCore() {
return PartialView("GridViewPartial", GetModel());
}- Handle the GridViewSettings.BeforeGetCallbackResult event and call the MVCxGridView.LoadClientLayout method to apply the layout.
settings.BeforeGetCallbackResult = (s, e) => {
if (ViewData["Layout"] != null) {
MVCxGridView gridView = (MVCxGridView)s;
gridView.LoadClientLayout(ViewData["Layout"].ToString());
}
};