Multi Select inline grid editing of object

2 posts, 0 answers
  1. John
    John avatar
    1 posts
    Member since:
    May 2017

    Posted 09 Aug 2017 Link to this post

    Hello, I hope someone can help me out with this problem I am struggling with.

    I am attempting to use a multi select as an editor for a column within my grid. This column itself is actually an object which I use a template to display the text content within the grid:

    "accountReps": {
                "primary": [{
                    "userId": 1234,
                    "name": "Person name"
                }],
                "secondary": []
            }

     

    These properties are also both set as editable in the schema model

    "accountReps.primary": {
        "type": "object",
        "editable": true,
        "nullable": false,
        "validation": {
            "required": false
        }
    },
    "accountReps.secondary": {
        "type": "object",
        "editable": true,
        "nullable": false,
        "validation": {
            "required": false
        }
    }

     

    When its comes to the editor I can display the editor and populate the initial values fine, but when persisting back to the grid the data is not to be mapping to my object correctly. The code I am using for the editor is:

     

    $('<select name="' + options.field + '"/>')
        .appendTo(container)
        .kendoMultiSelect({
            placeholder: "Select",
            autoBind: false,
            dataTextField: "Name",
            dataValueField: "Id",
            valuePrimitive: true,
            dataSource: ds,
            change: function(e) {
                console.log('change');
            },
            select: function(e) {
                console.log('select');
            },
            dataBound: function () {
                var fieldValues = options.model.get(options.field).map(function (item) {
                    return item.userId.toString();
                });
                this.value(fieldValues);
            }
        });

     

    I believe its just setting the selected ids as the value for my column. I'm hoping for an event I can use to set the value correctly or a way to map the object.

    Any help would be much appreciated.

    John

  2. Stefan
    Admin
    Stefan avatar
    3078 posts

    Posted 11 Aug 2017 Link to this post

    Hello John,

    Thank you for the provided information.

    Based on it I can assume that after the editor is closed the selected values are not correctly shown in the Grid?

    If this is correct, I can suggest using a function for the template and check the actual value which is received. Then the modification can be made in the template function in order to show the values.

    Also, I can suggest checking our example of the Grid with MultiSelect editor which demonstrates the required steps to achieve the desired result:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/use-multiselect-as-custom-editor

    If the issue still occurs, please provide a runnable example or the used template and I will gladly assist further.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 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