Multi-select in Grid Column Template Not Holding

[KC]

Greeting,

I am having an issue using the multi select inside a gird cell. I have the <select> control being generated inside a kendo.template and am binding the class of that <select> to the multi select on the dataBound event of the grid.

The is initially empty and gets populated base on a choice from a list view. When the grid is populated, everything shows up fine. BUT, when i click inside the multi select it looses its kendo...ness and reverts to an html multi select. I have noticed that there is a very small area that I can click (right next to  an already selected item or at the very end) but other than that it will loose it.

I wasn't sure if this was a bug or how I was creating it.

Thanks in advance.

GRID:

$("#grid").kendoGrid({
                dataSource: gridDS,
                toolbar: ["save", "cancel"],
                columns: [
                    { field: "Commodity", title: "Commodity" },
                    { field: "Description", title: "Description" },
                    { field: "Price", title: "Price", format: "{0:c}" },
                    { field: "NoteObj", title: "Note", template: kendo.template($("#tempNote").html()) },
                    { field: "QuoteBy", title: "Last Quoted By" },
                    { field: "QuoteDate", title: "Date", format: "{0:MM/dd/yy}" }
                ],
                editable: true,
                navigatable: true,
                pageable: true,
                update: true,d
                change: detailInit,
                selectable: true,
                dataBound: function (e) {
                    $('#grid').data('kendoGrid').tbody.find('#noteS').kendoMultiSelect();
                }
            });

TEMPLATE:

<script type="text/x-kendo-tmpl" id="tempNote">
        #=ParseNote(NoteObj)#
    </script>

FUNCTION:

function ParseNote(d) {            
            var a = d.split(',');
            var builder = "<input id='noteS' multiple='multiple'>";
            console.log(builder);
            for (var i = 0; i < a.length; i++) {
                if (a[i] !== "") {
                    if (a[i] == " True") {
                        builder += "<option selected>" + a[i] + "</option>";
                    } else {
                        builder += "<option>" + a[i] + "</option>";
                    }
                }
            }
            builder += "</select>";
            console.log(builder);
            return builder;
        };

[KC]

I just noticed some issues with the code I posted that is different than that of the code I am using.

1: var builder = "<select class='noteS' multiple='multiple'>"
2: update: true,
3: $('#grid').data('kendoGrid').tbody.find('.noteS').kendoMultiSelect();

I believe that was it.

[Alexander Valchev]

Hello KC,

It seems that you managed to resolve the issue.
Is that correct? Can we close this thread as resolved?

Regards,
Alexander Valchev
Telerik

[KC]

No, Sorry, just realized what my last post looked like. I was trying different things when I decided to ask for help, so I reverted back to the method that worked the best, but in doing so, I miss typed some of the code. The second reply was me correcting the code that I posted so as those mistakes would not be considered when evaluating the situation.

I apologize for the confusion and the issue still stands as unresolved. I have changed the application to have multiple columns with bit flags but would like to not have to use those and just use one column with the multi select.

Very Respectfully,
KC

[Alexander Valchev]

Hello KC,

Thank you for the clarification.

I believe that the problem is occurs because incell editing is turned on - the template of the editable cell is re-rendered, but dataBound is not fired. As a result you see a standard multiselect element.

The solution is to disable the editing for that column by removing its field.

{ title: "Note", template: kendo.template($("#tempNote").html()) },

If you want to use the multiselect as editor, please hook up to its change event and update the underlying model manually through the set method.
I hope this information will be helpful.

Regards,
Alexander Valchev
Telerik

[KC]

Valchev,

Thank you for the reply. That makes a lot of sense, but if I remove the field I am not able to access the data needed to populate the multi-select. Is there a way to get that field for that row without using the "field" decoration in the column creation?

ie { field: "NoteObj"}  <--- I need that object.

Very Respectfully,

KC

[Alexander Valchev]

Hi KC,

The whole dataItem should be available in the template, no matter whether the column has a field or not.
For your convenience I prepared a small example. Could you please check it and let me know what I am missing?

• http://jsbin.com/axudux/2/edit
  
  

Thank you in advance.

Regards,
Alexander Valchev
Telerik

[KC]

Valchev,

You are genius and correct. That fixed the strange behavior.

Problem solved, Thank you.

Very Respectfully,

KC