MultiSelect in kendo ui grid

[deepak]

Hi,
I need to include MultiSelect list in grid which should show already assigned values as selected and if user wants  to assign more then he can select from select list.
I have attached screenshot the way i want select list in grid.
Please reply.

[Daniel]

Hello,

I attached a sample project which shows how to use the MultiSelect in a column template and set the model values.

Regards,
Daniel
the Telerik team

[deepak]

Thanks for reply.
   I  am able to see the MultiSelect initially but it takes to much time to bind and while selecting item from list also taking time when i have commented following code

    function change(e) {
        var row = this.element.closest("tr"),
            model = $("#gridUser").data("kendoGrid").dataItem(row);
            model.set("Credentials", this.dataItems());
    } 

take less time and also when i am going for inline edit editor template is not getting applied i have also added UIHint.
I want the multiselect list value in case of update in inline edit.
--------------------------------------------------------------------------------------------
Now in my grid there are 300 records and expected to be 1000.
Now in MultiSelect list there are 40 items expected to be upto 300.
Please reply.

[Daniel]

Hello,

The set method triggers the change event which will cause the Grid to be rebound. You could assign the data directly in order to avoid the delay:

function change(e) {
    var row = this.element.closest("tr"),
        model = $("#gridUser").data("kendoGrid").dataItem(row);
        model.Credentials = this.dataItems();
}

If you wish to use the MultiSelect in an editor template then I can suggest to check this code library. Kind regards,
Daniel
the Telerik team

[Atlas]

I thought I would post this in case anybody else encounters this problem.
I was unable to open this solution in VS 2010, but it did open correctly in VS 2012.
It did, however, migrate the project.

[Bob]

Daniel,

How would you enable column filtering on the multiselect column?

Thanks!

[Boyan Dimitrov]

Hello Bob,

 

The built-in filtering does not support filtering a collection field. It is possible to implement it by passing the value to the server and filtering the data before using the ToDataSourceResult method.

 

Please refer to the Filtering by List<string> forum discussion for sample project. 

 

Regards,
Boyan Dimitrov
Telerik

[Lazar]

Dear all,
I reproduced the MultiSelect example provided in this post for my case of a many-to-many relationship between entities. I am able to retrieve the select options, but an error appears when I select an option from the list . Namely, as can be seen from the screenshot attached, the value of the model variable remains null. Any help?
Best,

[Boyan Dimitrov]

Hello,

Such problem should be investigated with a sampel runnable project. It seems that there is a problem with retrieving the model object from the Kendo UI DataSource ( this is done by the dataItem method of the Kendo UI Grid). Could you please debug and check what is stored in the row and model variables in the MultiSelect change event handler?  

Regards,
Boyan Dimitrov
Progress Telerik

[Lazar]

Dear Mr. Dimitrov,

Find attached a sample project which produces the malfunction. I think that the problem arises with the option of InCell editing, which I pretend to use in my approach.

Best,

[Boyan Dimitrov]

Hello,

Due to issues with the database I was not able to run the attached project, but I prepared a sample project following the source code for the Index page and everything works fine. Please find it attached to this response. Whenever an item from the multiselect is selected the first name of the employee will be changed and marked in the grid as modified. This is for sample purposes to show that the model is retrieved successfully and set method works as expected. 

Regards,
Boyan Dimitrov
Progress Telerik

[Lazar]

Dear Mr. Dimitrov,

 

Your solution does not work well for the case when the grid editing option is set to InCell. The same error appears when you add the following code to the grid:

.Editable(editable =>
                {
                    editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false);
                }
                )

Best

[Boyan Dimitrov]

Hello,

Indeed the default editor for the Territories field needs be disabled since the Kendo UI MultiSelect widget in the client template should do editing part. Once it is disabled the error should not be thrown anymore. Please find attached a modified version of the project.  

.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(5)
    .Model(model =>
        {
            model.Id(e => e.EmployeeID);
            model.Field(e => e.EmployeeID).Editable(false);
            model.Field(e => e.Territories).DefaultValue(new List<MultiSelectInGrid.Models.TerritoryViewModel>()).Editable(false);
        })

function change(e) {
    var row = this.element.closest("tr"),
        model = $("#grid").data("kendoGrid").dataItem(row);
    model.Territories = this.dataItems();
}

Regards,
Boyan Dimitrov
Progress Telerik