Multi Select Editor Template Issues

[H2e]

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!

[H2e]

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.

[H2e]

Any help/guidance on this?

[Georgi]

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