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

Multi Select Issue in Grid

4 Answers 119 Views
Grid
This is a migrated thread and some comments may be shown as answers.
hongbo
Top achievements
Rank 1
hongbo asked on 10 Sep 2013, 02:22 AM
Dear Telerikļ¼Œ

I use grid in my project and would like to provide multi-select options in user-editing. But I got some strange issue using multi-select.
In my project I use multi-select like this. 
$("#grid").kendoGrid({
                    dataSource: dataSource,
                    pageable: true,
                    resizable: true,
                    sortable: true,
                    filterable: true,
                    toolbar: ["create"],
                    save: function (e) {
                        e.model.dirty = true;
                    },
                    detailTemplate: kendo.template($("#template").html()),
                    detailInit: detailInit,
                    columns: [
                        //{ field: "id", title: "id Name" },
                        { field: "Server_Name", title: "Server Name", width: "150px" },
                        { field: "Server_IP_Address", title: "Server IP Address", width: "120px" },
                        { field: "Data_Center_City", title: "City", width: "56px" },
                        { field: "Data_Center_Location", title: "Data Center Location", width: "156px" },
                        { field: "Server_Type", title: "Server Type", width: "100px" },
                        { field: "Server_Instance", title: "Server Instance", width: "120px" },
                        { field: "Environment", title: "Environment", width: "100px", editor: appDropDownEditor },
                        { command: ["edit", "destroy"], title: " ", width: "170px" }],
                    editable: "inline"
                });
            }
 
function appDropDownEditor(container, options) {
            $('<input required data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoMultiSelect({
                    dataTextField: "text",
                    dataValueField: "text",
                    dataSource: [ { text: "PRD" }, { text: "QA" }, { text: "DEV" } ]
                });
        }
I wonder where I got wrong and it appeared with a strange <input> and a <span> unexpected. Just like the image.

I'd like to ask you that how can I use multi-select to get user input in dropdown list? I checked the demos but only found demo for <select> tag or for MVC usage.
I'm looking forward for your reply.

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 11 Sep 2013, 01:59 PM
Hi hongbo,

I am afraid that the attached screenshot cannot be opened. Could you please resend it so we can see the issues you have?

Regarding using MultiSelect in widget, I suggest you to check this forum post as it discusses similar problem. Points #2 #3 and #4 from the reply discusses the binding and the way data should look like.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
hongbo
Top achievements
Rank 1
answered on 12 Sep 2013, 01:16 AM
I am sorry for the broken image. I upload once more. It is strange to render these tags.
0
Accepted
Daniel
Telerik team
answered on 13 Sep 2013, 01:59 PM
Hi,

Thank you for re-sending the image. This problem will occur if the CSS files are not correct for the version. Please verify that the kendo.common and kendo.[ThemeName] CSS files are for the version you are using and that an older version of the files is not cached by the browser. If the files are correct then please provide a runnable sample so we can investigate further.

Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
hongbo
Top achievements
Rank 1
answered on 16 Sep 2013, 05:56 AM
I solved this, it IS about the CSS version. thanks a lot. 
Tags
Grid
Asked by
hongbo
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
hongbo
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or