Kendo Grid with Drop Drop Down Lists

5 posts, 1 answers
  1. Robert
    Robert avatar
    5 posts
    Member since:
    Jan 2014

    Posted 09 Feb 2016 Link to this post

    I'm using the grid setOptions/getOptions to save a particular view for a grid.   Basically a user can filter the grid in a certain way, show and hide columns, etc.

     In the grid I have several inline drop downs.  This is an example of one of the field definitions:

    { field: "LocationId", title: "Location Name", width: 200, editor: gridHelper.locationDropDownEditor, template: "#=gridHelper.getLocationCode(LocationId)#" },

    On initial load everything works absolutely fine.  The problem comes in when the user selects a different view and I call setOptions to instantiate that view.   For the most part everything works, however when clicking on a cell with a dropdown the dropdown does not get reinitialized as a dropdown.  It's simply a text field with the right Location Name displayed, however when you click it you get the id#.

    Is there a proper way to reinitialize those dropdowns using the model I've given above?

    I've tried refreshing both the grid and the datasource along with destroying and recreating the grid from scratch but no options seem to lead to something that will work.

     Thanks!

     

     

     

     

  2. Robert
    Robert avatar
    5 posts
    Member since:
    Jan 2014

    Posted 09 Feb 2016 in reply to Robert Link to this post

    If helpful this is my editor function setup in the grid definition.

    locationDropDownEditor: function (container, options) {
            $('<input required data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    dataSource: myDataSources.locationDataSource,
                    dataTextField: "LocationCode",
                    dataValueField: "LocationId",
                    optionLabel: "Select Location",
                    filter: "contains"
                });
        },

  3. Robert
    Robert avatar
    5 posts
    Member since:
    Jan 2014

    Posted 09 Feb 2016 Link to this post

    More information:

     I've found that saving the grid state via getOptions does not store the "editor" part of the field definition.  So of course it can't restore it to the grid on setOptions.

     

    Still no solution to the problem however.

     

    { field: "LocationId", title: "Location Name", width: 200, editor: gridHelper.locationDropDownEditor, template: "#=gridHelper.getLocationCode(LocationId)#" },

  4. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 11 Feb 2016 Link to this post

    Hello Robert,

     

    As stated in the setOptions article the JSON.stringify() cannot serialize function references (e.g. event handlers), so if stringification is used for the retrieved Grid state, all configuration fields, which represent function references, will be lost. You have two options to avoid this limitation: use a custom implementation to serialize JavaScript functions, or add the function references back to the deserialized configuration object before passing it to the setOptions method.

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Robert
    Robert avatar
    5 posts
    Member since:
    Jan 2014

    Posted 11 Feb 2016 in reply to Boyan Dimitrov Link to this post

    That was a great confirmation.    Reattaching the event handlers seems like it would be the most straight forward solution and was what I was attempting to do, but in a much harder way.

    Thanks for putting me on the right track. 

     

Back to Top