Hi,
is it possible to get the current Settings of an igGrid table?
Background: I want to store them in a Cookie to Show the table exactly with the same Settings (sorting, column ordering, grouping) as the user has set when he used the table the last time.
Thanks.
Michael
Hello Michael,
There is no unified way for restoring the grid state but you could certainly implement a solution on your own using grid's API. For example, using the features you mentioned, you can get the currently sorted columns with:
$("#grid1").igGridSorting("option", "columnSettings");
Traversing the array returned you'll notice that sorted columns have the currentSortDirection property set. The columnSettings option works both ways. Setting the same property for columns on grid's initialization will pre-sort it as required. You can read more about this option here: http://help.infragistics.com/jQuery/2013.2/ui.iggridsorting#options. The downside of this method is that the sort style is not reapplied. Please, let me know if you need to restore the sort style as well because it'll require a different approach.
For GroupBy it's best to use the groupedColumns option to get the currently grouped columns and restore them by setting the isGroupBy property in the columnSettings collection. Again you can learn more about these options here: http://help.infragistics.com/jQuery/2013.2/ui.iggridgroupby#options
$("#grid1").igGridGroupBy("option", "groupedColumns");
An example of how the grid definition will look with some columns pre-sorted and pre-grouped:
$("#grid1").igGrid({
...
features: [ { name: "Sorting", columnSettings: [ { columnKey: "UnitPrice", currentSortDirection: "asc" } ] }, { name: "GroupBy", columnSettings: [ { columnKey: "ProductDescription", isGroupBy: true } ] }]
});
The column order is probably the easiest as you can basically serialize what you receive from:
$("#grid1").igGrid("option", "columns");
and then deserialize it to initialize the grid with the result directly.
I hope this helps! Please let me know if you have any other questions and/or concerns!
Best regards,
Stamen Stoychev
Thank you for posting in our forum.
In addition to the response of my colleague Stamen I have attached a sample presenting how to save igGrid column states. In this sample it is shown how to keep the hidden column property.
The behavior is achieved by using the javascript deep copy object. Having the states saved in a javascript object you could also send them to the server and save them if needed.
If you have any further questions or comments don’t hesitate to contact us again.
I am just checking your progress on this scenario. If you have any questions, concerns or suggestions don’t hesitate to update the ticket.
Can we store the whole Grid state at Client Side i.e if the user opens the Page for the Next time the Grid State should same as user set last time (Property such as:- Grid's Column order,width etc.)
Thanks & Regards,
Ashish Devade
Hey Ashish,
You can extract any of the grid options using the following approach:
$("#grid1").igGrid("option", "columns")
$("#grid1").igGrid("option", "width")
Do this for the properties you want to preserve, store them and use their values when creating the new grid.
Hey DeyanK,
I am using the same method but the problem is in the grid I have drop-downs, so as we try to reset the columns setting then the text of drop-down is not appearing instead of this it's value is appearing.
For example if I have a drop-down of name like 1=Andrew,2=Liza,3=Peter then it is showing 1/2/3 instead of Andrew/Liza/Peter.
Can you send a sample, demonstrating this?
//Suppose this is the Dropdown var QCResult = [ { "ID": "", "Name": "" }, { "ID": "1", "Name": "Pass" }, { "ID": "2", "Name": "Fail" }, ];
//Fomat Method for the dropdown function formatQCResult(val) { var i, category; for (i = 0; i < QCResult.length; i++) { category = QCResult[i]; if (category.ID == val) { val = category.Name; } } return val; }
//This is the IgGrid
$("#gridVari").igGrid({ columns: //JSON.parse($.cookie("Columns")), [ { "headerText": "S.No.", "key": "SerialNo", "dataType": "number", "width": "100px"}, { "headerText": "Sample No.", "key": "SampleNo", "dataType": "number", "width": "150px"}, { "headerText": "Sub Plan Code", "key": "U_O_SUBPLAN_CODE", "dataType": "string", "width": "100px" }, //{ "headerText": "Variable Value Sequence", "key": "U_O_VARI_VALUE_SEQ", "dataType": "string", "width": "250px" }, { "headerText": "Variable Name", "key": "U_O_VARIABLE_NAME", "dataType": "string", "width": "200px" }, { "headerText": "Inspection Type", "key": "U_O_INS_TYPE", "dataType": "string", "width": "100px", "formatter": formatInspectionType}, { "headerText": "Value", "key": "U_O_VARI_MEA_VAL", "dataType": "number", "width": "100px" }, //Bug no. 8143 22-Nov-16 was taking alphanumeric value { "headerText": "Upper Value", "key": "U_O_VARI_UPPER_VAL", "dataType": "number", "width": "100px" }, { "headerText": "Lower Value", "key": "U_O_VARI_LOWER_VAL", "dataType": "number", "width": "100px" }, { "headerText": "Go Result", "key": "U_O_GORESULT", "dataType": "string", "width": "100px", "formatter": formatQCResult}, { "headerText": "NoGo Result", "key": "U_O_NOGORESULT", "dataType": "string", "width": "100px", "formatter": formatQCResult }, { "headerText": "TG Code Used", "key": "U_O_TG_ID_USED", "dataType": "string", "width": "100px", "formatter": formatToolGuage}, { "headerText": "Inspector Code", "key": "U_O_INSPECTOR_ID", "dataType": "string", "width": "100px", "formatter": formatInspectorMaster}, { "headerText": "Observation", "key": "U_O_OBSERVATION", "dataType": "string", "width": "100px", "formatter": formatObservation}, { "headerText": "QC Result", "key": "U_O_QC_RESULT", "dataType": "string", "width": "100px", "formatter": formatQCResult}, { "headerText": "Remarks", "key": "U_O_REMARKS", "dataType": "string", "width": "100px" }, { "headerText": "Line No", "key": "LineId", "dataType": "number", "width": "100px"}, { "headerText": "Lot Is Posted", "key": "LotIsPosted", "dataType": "string", "width": "100px" }, { "headerText": "Line Is Posted", "key": "LineIsPosted", "dataType": "string", "width": "100px" } //{ "headerText": "Test Result", "key": " U_O_TEST_RESULT", "dataType": "string", "width": "100px" } ],
features: [
{ name: "ColumnMoving", columnMovingDialogContainment: "window", columnMoved: function (evt, args) { $.cookie("Columns", JSON.stringify($("#gridVari").igGrid("option", "columns"))); }
]
--We are using this cookies for making the state persist till next change by user