This is a migrated thread and some comments may be shown as answers.

multiSelect in kendo grid popup

5 Answers 1706 Views

MultiSelect

This is a migrated thread and some comments may be shown as answers.

Michael asked on 10 Sep 2015, 09:54 PM

I have an editor configured for a column which can reflect multiple values - the multiselect control binds to the source datasource just fine when a grid row is edited or a new record is being created but for the pure edit portion I need to preselect the current values from the grid row datasource - the values are there in the row object because I can see them when I do a console.log of the model field via e.model.get("UserRoleSectors") (example of value is ["2","25"] ) - however in the grid edit event handler if I try to set the value for the multi-select to ensure it reflects what values are already bound to the record via the statement e.container.find('[name="UserRoleSectors"]').data("kendoMultiSelect").value(e.model.get("UserRoleSectors")); - nothing is selected even though the values are available in the multiselect. Am I doing something wrong?

editor: function (container, options) {

// create an input element

var input = $('<select multiple="multiple" />');

// set its name to the field to which the column is bound

input.attr("name", options.field);

// append it to the container

input.appendTo(container);

// initialize a Kendo UI MultiSelect

input.kendoMultiSelect({

autoBind: true,

valuePrimitive: true,

dataTextField: "SectorAcronym",

dataValueField: "SectorNo",

dataSource: $scope.sectorsDataSource

});

5 Answers, 1 is accepted

answered on 14 Sep 2015, 05:46 PM

Kiril,

I had seen those articles before but kind of glossed over them - after looking over them again it dawned on me what was possibly wrong and have resolved the issues. The basic gist is that the array of current values from the model object the grid is bound to was not truly being treated as an array so I had to encapsulate it in a JSON.parse call like so in order to get the values to be selected after the multi-select control was bound to its datasource. The new logic in the kendo grid edit event handler is like so:

e.container.find('[name="UserRoleSectors"]').data("kendoMultiSelect").value(JSON.parse(e.model.get("UserRoleSectors")));

answered on 17 Jul 2016, 08:50 AM

Hello,

I've implemented the MultiSelect Editor (with grouping) in Kendo Grid which was working fine with previous version of Kendo UI Professional version 2016.2.607 but right after we upgraded to the latest version 2016.2.714 the MultiSelect grouping inside the grid editor is no longer working (grouping is not showing). and I managed to pinpoint the problem to "autobind: false". In the new kendo 2016.2.714 version if the autobind is false in multiselect editor inside the grid THEN the Multiselect grouping is not shown!!! but in previous versions (2016.2.607) my very same code is working fine! Herewith below is my MultiSelect Editor code:

$('<select name="prd" multiple="multiple" data-bind="value : ' + options.field + '"/>')
.appendTo(container)
.kendoMultiSelect({
placeholder: "Select lookup group...",
dataTextField: "txt",
dataValueField: "val",
autoBind: false,
dataSource: {
data: [
{ txt: "110", val: "Color:110", tag: "Color" },
{ txt: "XTXX20K", val: "Item Group:XTXX20K", tag: "Item Group" },
{ txt: "A", val: "Color Class:RM", tag: "Color Class" }
],
group: { field: "tag" }
}
});

Please help to address this new bug and let us have the fix ASAP.

Thank you.

answered on 22 Sep 2025, 04:39 PM

I have a kendoGrid with a column editor using kendoMultiSelect. As long as the user only selects one item, all works and when they click on the field & switch into editor mode again, the correct item is shown. If multiple items are selected, the editor shows nothing? I have tied multiple things with no luck. In the end, I need options.model[options.field] to be a "," separated list to save to a SQL server text field.

$scope.telrikResponsibility = (container, options) => {
const selectedValues = (options.model[options.field] || "")
.split(',')
.map(s => s.trim())
.filter(s => s.length > 0);
console.log("telrikTagItResponsibility", container, options, options.field, options.model[options.field], selectedValues);
const multiSelect = $(`<select multiple='multiple' data-bind='value:${options.field}'/>`)
.appendTo(container)
.kendoMultiSelect({
autoClose: false,
dataSource: $scope.listResponsibleRoles,
valuePrimitive: true,
autoBind: true, //false,
//value: selectedValues,
change: function (e) {
console.log('telrikResponsibility change', e);
},
select: function (e) {
console.log('telrikResponsibility select', e);
},
dataBound: function () {
console.log('telrikResponsibility dataBound', this, this.value);
}
}).data("kendoMultiSelect");

multiSelect.value(selectedValues);
multiSelect.one("dataBound", function () {
multiSelect.value(selectedValues);
});
}

Nikolay

commented on 24 Sep 2025, 11:18 AM

Hi Jeff,

Addressing the Issue: Editor Shows Nothing for Multiple Selected Items

Based on your description, the MultiSelect editor in your Kendo Grid correctly displays single selections, but fails to show any values when multiple items are selected. This symptom often points to a mismatch between the data formats expected by the MultiSelect and the actual values in your model.

Key Points to Check

Value Format: The MultiSelect expects its value as an array, but your model stores a comma-separated string. When editing, you must convert the string to an array before setting it as the value.
Value Assignment Timing: Setting the value after initialization is crucial, especially if autoBind: false is used. If the value is set before the data is loaded, the MultiSelect may not reflect the selection.
ValuePrimitive Option: Ensure valuePrimitive: true is set if your dataSource items are primitives (strings or numbers).

Troubleshooting Steps

Check the Format of selectedValues: Confirm that selectedValues is an array of strings matching the dataValueField in your dataSource.
Verify DataSource Items: Ensure that $scope.listResponsibleRoles contains objects with the correct value field (matching what’s stored in your model).
Console Logging: Use your existing console logs to inspect the values being passed to MultiSelect. Check if selectedValues contains what you expect when multiple values are present.

Improved Editor Function Example

Here’s a refined approach that ensures values are set after the data is bound and addresses potential timing issues:

$scope.telrikResponsibility = function(container, options) {
    var selectedValues = (options.model[options.field] || "")
        .split(',')
        .map(function(s) { return s.trim(); })
        .filter(function(s) { return s.length > 0; });

    var multiSelect = $("<select multiple='multiple'/>")
        .appendTo(container)
        .kendoMultiSelect({
            dataSource: $scope.listResponsibleRoles,
            valuePrimitive: true,
            autoBind: true,
            change: function(e) {
                var values = this.value();
                options.model.set(options.field, values.join(","));
            }
        }).data("kendoMultiSelect");

    // Set the value after data is bound
    multiSelect.one("dataBound", function () {
        multiSelect.value(selectedValues);
    });

    // For immediate setting if data is already bound
    if (multiSelect.dataSource.view().length) {
        multiSelect.value(selectedValues);
    }
};

Additional Suggestions

Data Consistency: Make sure the values in your comma-separated string exactly match the dataValueField values in your dataSource.
Test with Hardcoded Values: Try manually setting selectedValues to an array of valid values to see if the MultiSelect displays them.
Review Grid Configuration: Ensure that the column using this editor has no conflicting configuration.

Regards,

Nikolay

Jeff

commented on 24 Sep 2025, 11:20 AM

Thanks, I was also given this link - jQuery Use MultiSelect as Custom Editor in Grid - Kendo UI for jQuery