Saving and restoring igGrid filters, sorting, and columns

Hi,

I’d developing an ASP.NET MVC application using Infragistics Grid. I’d like to let users save the filtering, sorting, and column hiding options they set on the grid, using a Save button on the UI. So, the setting are not to be saved automatically, but only when the button is pressed. This will extract the setting from the grid, and post them to the server, to store in DB. This part works nicely:

var gridSortingSettings = $(“#CompaniesGrid”).igGridSorting(“option”, “columnSettings”);
var gridColumnSettings = $(“#CompaniesGrid”).igGrid(“option”, “columns”);
var gridFilteringSettings = $(“#CompaniesGrid”).igGridFiltering(“option”, “columnSettings”);

var url = ‘@Url.Action(“SaveGridSettings”)’;
$.ajax({
type: “POST”,
url: url,
data: JSON.stringify({
sortingSettings: gridSortingSettings,
columnSettings: gridColumnSettings,
filteringSettings: gridFilteringSettings
}),
contentType: “application/json; charset=utf-8”,
dataType: “json”,
});

What i’d like to do now, is to be able to restore these setting from the database, when loading the grid. I can retrieve these setting as JSON, however, I found no example of setting these options using the MVC View of the grid, as the grid is initialized this way. I have no idea how to set a JSON here. Do you have any suggestion, maybe better ideas for restoring these settings?

I tried setting it manually, this way, using a Restore button (would’t be working this way, just for testing):
var gridSortingSettings = <get JSON from server…>
$(‘#CompaniesGrid’).igGridSorting(“option”, “columnSettings”, gridSortingSettings);

Then, reading it again:
var gridSortingSettingsReadBack = $(“#CompaniesGrid”).igGridSorting(“option”, “columnSettings”);

I found that however the JSON i read back changes as expected, the grid shows no difference. Maybe I need some way to refresh? Anyway, the perfect solutuon would be to make this load automatically from the MVC View when the grid is initializing grid, like setting @Html.Infragistics().Features().Sorting().Whatever()… in the View.

regards,

Peter

Hello Peter,

Thank you for contacting Infragistics!

Since you are using the MVC wrappers of the Ignite UI controls you can execute C# code inside the wrappers. So instead of trying to apply the settings after the grid is setup and then refresh you can apply them when initializing the grid. For example:

features.Updating().EditMode(GridEditMode.Cell).ColumnSettings(settings =>
                {
                    if (editor == true)
                    {
                        settings.ColumnSetting().ColumnKey("ProductID").EditorType(ColumnEditorType.Combo).ComboEditorOptions(options =>
                        {
                            options.DataSourceUrl(Url.Action("GetComboData", "Home")).ShowDropDownButton(true).TextKey("ProductID").ValueKey("ProductID");
                        });
                    }
                   
                });

So you can loop/parse you saved settings and apply them in initialization.

Please let me know if you have any further questions concerning this matter.

Mike,

Thanks for the quick help. So, that means that I have to parse the JSONs I saved from the grid, and set those options one by one using C# code? I have very complex grids, I hoped for a more straightforward solution, where I don't have to care about the actual contents of the JSONs, just save and restore them as strings, and igGrid taking care of the rest. Are you sure that no such solution exists? Maybe not using the MVC wrappers, but using pure JS or jQuery?

It's kind of hard to believe that I can't import something that I just exported without parsing it myself.

If I eventually have to implement this parsing, is there any resource about the structure of those JSONs? I'm afraid just clicking through the grid and checking the results wouldn't reveal all options that might be in them.

regards,

Peter

Hello Peter,

Thank you for the update. The Updating and sorting behaviors don’t have set methods for the column settings. The Filtering does:

http://www.igniteui.com/help/api/2015.2/ui.iggridfiltering#options:columnSettings

If you use JavaScript/jQuery to initialize the grid instead of the MVC wrappers you can put the settings you got before directly into the column settings property of the different grid features.

Mike,

Thanks for answering the first part of my question. However, I'm still waiting for the second answer:

"If I eventually have to implement this parsing, is there any resource about the structure of those JSONs? I'm afraid just clicking through the grid and checking the results wouldn't reveal all options that might be in them."

Could you pleas answer this as well? 

regards,

Peter

Hello Peter,

They would be an array of column settings and you can see the documentation for what properties they have:

http://www.igniteui.com/help/api/2015.2/ui.iggridsorting#options:columnSettings

Mike,

Thanks again.

Now, i'm considering to change from MVC initialization to jQuery initialization, to be able to set these settings directly, as you suggested:

"If you use JavaScript/jQuery to initialize the grid instead of the MVC wrappers you can put the settings you got before directly into the column settings property of the different grid features."

Could you please show me an example, how to do this in this case? 

regards,

Peter

Hello Peter,

Thank you for the update. I am attaching a sample that demonstrates creating the columns from an array. Then on button click gets the columns using the API method and then destroys the grid and re-creates it based on the columns it got.

Mike.

Thanks, this way I can save and restore grid settings. However, I noticed that the fitler expressions (like: Name contains "blah", etc. ) don't get saved this way. I managed to get them by saving the following JSON:

 var filteringExpressions = $("#CompaniesGrid").data("igGrid").dataSource.settings.filtering.expressions;

And then, restoring it in the igGrid "rednered" event handler like this:

$("#CompaniesGrid").igGrid({
rendered: function (evt, ui) {
$('#CompaniesGrid').igGridFiltering("filter", filteringExpressions);
}
});

This works properly for me, I posted this partly to let others know how this works, but party to ask you Mike, is this the proper way to restore these filter expressions? Or, is there a better way to do this?

regards,

Peter

 

Hello Peter,

Thank you for the update. Currently this is the way to achieve getting the filtered columns expressions as there isn’t a method in the API to get them.

Please let me know if you have any further questions concerning this matter.

Mike,

Thanks, but my question was not about getting, it was about restoring, as I said:

"is this the proper way to restore these filter expressions?" 

And by that, I meant, is it the best option to do this in the "rendered" event handler of the grid, or, maybe it's better to use some other event handlers?

regards,

Peter

Hello Peter,

Using the render event is fine. You can also do it after you initialize the grid in the startup method. It would probably be best to do it in a location that only gets fired once instead of every time the page renders in case the user wants to change it.