Persisted Grid Issues

[Lucy]

Hello,

I'm currently trying to make the grid's on our website persisted but have a couple of questions:

1. Persisting Columns with Multicheck Filters
When I try and open the column menu on a column that has multi check filter, it errors. It's the exact same issue as in https://www.telerik.com/forums/multi-check-box-filter-and-persistance but the answer was from 2 years ago. Is there an update to this? 

2. Handling data changes
What happens when you add, remove or rename a column? Is there a way to compare the saved (in local storage) columns and see if there are any differences? If so, delete the saved grid settings as it's now incorrect?

Thank you

Lucy

[Tsvetina]

Hi Lucy,

The problem on your side is slightly different because the error is observed even if the columnMenuInit event handler is correctly persisted. This happens because when grouping the Grid, the multi-checkbox DataSource copies the grouping and this line does not return a proper array of data:

filterMultiCheck.checkSource.view().toJSON()

You can see that in the Sort Multiple Checkbox Filter example, there is a special line to be used with grouping:

    // uncomment the following line to handle any grouping from the original dataSource:
// filterMultiCheck.checkSource.group(null);

    filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
    filterMultiCheck.createCheckBoxes();

So, when I combined this line with the usage of an external serialization library, all works fine. I am attaching a small sample demonstrating this.

As for comparing column options, at any time you can compare:

// the stored column options
var options = localStorage["kendo-grid-options"];
var storedColumnOptions = JSONfn.parse(options).columns;

// the current columns
var currentColumnOptions = $("#grid").data("kendoGrid").columns;

If you find any changes, you can clear the local storage:

localStorage.removeItem("kendo-grid-options");

Regards,
Tsvetina
Progress Telerik

[Lucy]

Thank you Tsverina.

I tried to compare the two columns but it is always coming up as not matching. I have noticed that the 'hidden' on each column is 'undefined' on the current columns. I'm comparing on grid databound.

Thank you

Lucy

[Lucy]

[quote]Lucy said:

Thank you Tsverina.

I tried to compare the two columns but it is always coming up as not matching. I have noticed that the 'hidden' on each column is 'undefined' on the current columns. I'm comparing on grid databound.

Thank you

Lucy

[/quote]

 

I've managed to fix the undefined. How do I compare only certain details? For example, I want to make sure that each column exists but it doesn't matter the order or the size etc.

Thank you

Lucy

[Tsvetina]

Hello Lucy,

You can run a nested loop that goes through all new columns and checks each of the stored columns to see if there is a match in the field names:

var shouldResetStorage = false;
// the stored column options
var options = localStorage["kendo-grid-options"];
var storedColumnOptions = JSONfn.parse(options).columns;

// the current columns
var currentColumnOptions = $("#grid").data("kendoGrid").columns;

// loop through the current columns
for(var i = 0; i < currentColumnOptions.length; i++) {
    var columnFound = false;
    var currColumn = currentColumnOptions[i];
    // for each current column, loop the stored column and look for matches
    for(var j = 0; j < storedColumnOptions.length; j++) {
        if(currColumn.field === storedColumnOptions[j].field) {
            columnFound = true;
            break;
        }
    }
    // if no match is found for a column, reset the stored options
    if(!columnFound) {
        localStorage.removeItem("kendo-grid-options");
        break;
    }
}

Regards,
Tsvetina
Progress Telerik