Multi Select Editor Template Issues

4 posts, 0 answers
  1. Tony
    Tony avatar
    13 posts
    Member since:
    Jan 2013

    Posted 29 Jun Link to this post

    Hi all,

    I'm currently trying to implement an MVC grid which contains a multi select editor template.  In the DB it's stored as a comma separated list of strings, but I wish to display it as a multi select (to help the user input data) so i changed my viewmodel property to a list of a custom model.  I've attempted this myself, but it doesn't appear to be posting to my controller action. If i add items, they appear to add to the datasource but dont post to the controller (come through as "nothing"), however, if i add 3 items, then remove one using the X

    My bound column

    columns.Bound(Function(cond) cond.Value).EditorTemplateName("MyTemplate_Value")

     

    My customer object

    Public Class TheValue
        Public Property MyValueID As String
        Public Property MyValue As String
    End Class

    My Editor Template

    @Html.Kendo().MultiSelectFor(Function(m) m).DataTextField("MyValue").DataValueField("MyValueID").Events(Sub(ev) ev.DataBound("MultiSelect_DataBound"))
     
     
        <style>
            #Value-list {
                display: none !important;
            }
        </style>

     

    My javascript

    var currentId = 1;
     
    function MultiSelect_DataBound(e) {
        $('.k-multiselect .k-input').unbind('keyup');
        $('.k-multiselect .k-input').on('keyup', onClickEnter);
    }

    function onClickEnter(e) {
        if (e.keyCode === 13) {
            var widget = $('#Value').getKendoMultiSelect();
            var dataSource = widget.dataSource;
            var input = $('.k-multiselect .k-input');
            var value = input.val().trim();
            if (!value || value.length === 0) {
                return;
            }
            var newItem = {
                MyValueID: currentId++,
                MyValue: value
            };

            dataSource.add(newItem);
            var newValue = newItem.MyValueID;
            widget.value(widget.value().concat([newValue]));
        }
    }

     

     

     

    Any help would be appreciated!

  2. Tony
    Tony avatar
    13 posts
    Member since:
    Jan 2013

    Posted 29 Jun in reply to Tony Link to this post

    Supposed to say "however, if i add 3 items, then remove one using the X, it successfully posts 2 items"  So basically the remove of items is doing something im not doing in my data source item add.
  3. Tony
    Tony avatar
    13 posts
    Member since:
    Jan 2013

    Posted 03 Jul Link to this post

    Any help/guidance on this?
  4. Georgi
    Admin
    Georgi avatar
    368 posts

    Posted 03 Jul Link to this post

    Hello Tony,

    Based on the provided information I assume that the requirement is to edit a string field which contains comma separated values with a MultiSelect widget. Please correct me if I am wrong.

    A possible solution as in the provided code is to create a custom MultiSelect editor widget. However, to populate the editor, use the Edit event handler to get the value of the currently edited item.

    e.g.
    // add event handler 
     
     .Events(Sub(ev) ev.Edit("onEdit"))
     
    //event handler
     
        function onEdit(e){
           var multiSelect = e.container.find('#CommaSeparatedField').data('kendoMultiSelect');
           var value = e.model.CommaSeparatedField.split(',');
           multiSelect.dataSource.data(value); // depending on the use case you could bind the editor to a remote data and omit setting the data as here
           multiSelect.value(value);
        }

    For your convenience I am attaching a small sample which demonstrates the above approach. Please examine it and let me know if it helps.


    Regards,
    Georgi
    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.
Back to Top