Persisted Grid Issues

5 posts, 0 answers
  1. Lucy
    Lucy avatar
    17 posts
    Member since:
    Nov 2016

    Posted 29 May 2019 Link to this post

    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

  2.
  3. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 31 May 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Lucy
    Lucy avatar
    17 posts
    Member since:
    Nov 2016

    Posted 05 Jun 2019 in reply to Tsvetina Link to this post

    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

  7. Lucy
    Lucy avatar
    17 posts
    Member since:
    Nov 2016

    Posted 05 Jun 2019 in reply to Lucy Link to this post

    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

     

    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

  8.
  9. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 06 Jun 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top