setOptions() new Field

4 posts, 1 answers
  1. Alexander
    Alexander avatar
    4 posts
    Member since:
    May 2018

    Posted 11 Jul Link to this post

    Hi,

    I am saving the grid state in a database by calling grid.getOptions().
    At opening the page, I am calling grid.setOptions(...) to restore the saved grid state. Its working well.

    I added a new field to my grid, but it´s not visible, because in the stored grid state this field is not existing yet.

    I can remove the array "columns" from the grid state JSON, but then the user settings of each column is deleted (for example the width of the columns).

     

    What can I do to show the new field in my grid and not to delete the saved grid state?

     

    Thanks,

    Alex

  2. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    464 posts

    Posted 13 Jul Link to this post

    Hello, Alexander,

    When the Kendo UI Grid setOptions() is used, it first gets the current options and subsequently extends then with the provided object as a parameter to the setOptions() method.

    To add another column to the existing columns set, you should parse the options object, and modify the options. columns array programmatically - either by appending or inserting the new column config. Using this approach will preserve the other columns settings and add the new one successfully:

    // this example inserts the new column at index 0
    var savedOptions = JSON.parse(options);                         
    savedOptions.columns.splice(0,0,{field: "Address", width:150});
     grid.setOptions(savedOptions);
     
    // this example pushes the new column at the end
    var savedOptions = JSON.parse(options);                         
    savedOptions.columns.push({field: "Address", width:150});
    grid.setOptions(savedOptions);


    Here is a runnable example which shows this approach in action:

    https://dojo.telerik.com/@bubblemaster/oMaqAHUx

    Let me know if need further help.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Alexander
    Alexander avatar
    4 posts
    Member since:
    May 2018

    Posted 13 Jul in reply to Alex Hajigeorgieva Link to this post

    Hi Alex,

    thanks for your reply and your example code. I modified your code for my needs and it worked well.

    Best regards,

    Alex

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    464 posts

    Posted 13 Jul Link to this post

    Hello, Alex,

    Thank you for the positive feedback. Should you need further assistance, please feel free to get back to me.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top