Multi-select in Grid Column Template Not Holding

8 posts, 1 answers
  1. KC
    KC avatar
    14 posts
    Member since:
    Feb 2013

    Posted 21 Jun 2013 Link to this post

    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;
            };
  2. KC
    KC avatar
    14 posts
    Member since:
    Feb 2013

    Posted 21 Jun 2013 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 25 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. KC
    KC avatar
    14 posts
    Member since:
    Feb 2013

    Posted 25 Jun 2013 Link to this post

    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
  6. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 27 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. KC
    KC avatar
    14 posts
    Member since:
    Feb 2013

    Posted 27 Jun 2013 Link to this post

    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
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 01 Jul 2013 Link to this post

    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?
    Thank you in advance.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. KC
    KC avatar
    14 posts
    Member since:
    Feb 2013

    Posted 02 Jul 2013 Link to this post

    Valchev,

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

    Problem solved, Thank you.

    Very Respectfully,

    KC
Back to Top
Kendo UI is VS 2017 Ready