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

MultiSelect in kendo ui grid

12 Answers 1188 Views
Grid
This is a migrated thread and some comments may be shown as answers.
deepak
Top achievements
Rank 1
deepak asked on 25 Mar 2013, 11:42 AM
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.

12 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 27 Mar 2013, 10:40 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
deepak
Top achievements
Rank 1
answered on 29 Mar 2013, 03:11 PM
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.
0
Daniel
Telerik team
answered on 01 Apr 2013, 10:56 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Atlas
Top achievements
Rank 1
answered on 19 Sep 2013, 08:35 PM
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.
0
Bob
Top achievements
Rank 2
answered on 29 Jan 2016, 09:59 PM

Daniel,

How would you enable column filtering on the multiselect column?

Thanks!

0
Boyan Dimitrov
Telerik team
answered on 03 Feb 2016, 09:33 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Lazar
Top achievements
Rank 2
answered on 21 Jun 2018, 12:40 PM
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,
0
Boyan Dimitrov
Telerik team
answered on 25 Jun 2018, 10:39 AM
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
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.
0
Lazar
Top achievements
Rank 2
answered on 25 Jun 2018, 01:31 PM
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,
0
Boyan Dimitrov
Telerik team
answered on 27 Jun 2018, 01:20 PM
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
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.
0
Lazar
Top achievements
Rank 2
answered on 28 Jun 2018, 11:09 AM

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

0
Boyan Dimitrov
Telerik team
answered on 02 Jul 2018, 11:54 AM
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
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.
Tags
Grid
Asked by
deepak
Top achievements
Rank 1
Answers by
Daniel
Telerik team
deepak
Top achievements
Rank 1
Atlas
Top achievements
Rank 1
Bob
Top achievements
Rank 2
Boyan Dimitrov
Telerik team
Lazar
Top achievements
Rank 2
Share this question
or