Model binding fails with Kendo MultiSelect

Question

In the model I have long? field that I like to use Kendo MultiSelect for it. The main reason for this choice is server-side filtering. It doesn't reflect current Model's value, nor it sends any value to the server. By inspected traffic, I'm sure that it doesn't update the model's value.

@(Html.Kendo().MultiSelectFor(x => x.theField)
    .Name("msname")
    .MaxSelectedItems(1)
    .Placeholder("")
    .HighlightFirst(true)
    .DataValueField("Id")
    .DataTextField("Text")
    .AutoBind(true)
    .DataSource(ds =>
        ds.Read(" ", "API").ServerFiltering(true))
    .Value(new long?[] { Model.theField})
)

I can put a hidden field and update its value or multiselect's change, but there should be a better solution.

I should note that this multi select is in an editor template and is used by Kendo Grid in popup editor.

UPDATE

When using nullable types, you need to use ValuePrimitive(true)! So the end code is:

@(Html.Kendo().MultiSelectFor(x => x.theField)
    .MaxSelectedItems(1)
    .Placeholder("")
    .HighlightFirst(true)
    .DataValueField("Id")
    .DataTextField("Text")
    .AutoBind(true)
    .DataSource(ds =>
        ds.Read(" ", "API").ServerFiltering(true))
    .ValuePrimitive(true)
)

Dion Dirza · Accepted Answer · 2015-07-14T11:29:05.157

3

The main reason for this choice is server-side filtering

You can find on their demo site that DropDownList and ComboBox also support that feature. But if you insist to use MultiSelect then lets dig some of your code.

Look Name() method will give a name for your input element e.g (input, select). When form serialized it will use our input name as form's field property. If you are using HtmlHelper that ends with "For" e.g (LabelFor, MultiSelectFor) input attribute name will be named by its binded property.

Html.Kendo().MultiSelectFor(x => x.theField)

You will have

<select name="theField"> ....

You don't have to use Name() method anymore, therefore MultiSelect value will be binded as theField property as per form serialized to server.

Now if you look to Request.Form["theField"] when you debug inside your controller, you will see what value being sent. It usually a content of joined string array if multiple items selected, so you need to change theField type to handle array of string or int instead of nullable long type.

EDIT

At last you find the way to solve your problem, this solution credit to Akbari

When using nullable types, you need to use .ValuePrimitive(true)

edited Jul 14 '15 at 11:29

answered Jul 13 '15 at 09:36

Dion Dirza

2,575
2
17
21

I can not comprehend your problem, could you make a little sample project that reproduce your current situation? maybe it will enlighten me to find the solution.. – Dion Dirza Jul 14 '15 at 06:42
Thanks for your effort Dion, the issue is that If the model's field, `theField` is currently `null`, I'm not able to change it, neither of the controls will update its value. But if it has some value already, I'm able to change it and both controls will update it just fine. Unfortunately, I'm not able to put a sample. – Akbari Jul 14 '15 at 06:58
1 minute please Dion, I think I got the problem, it's probably because of type difference, The Multi Select's data aren't nullable. – Akbari Jul 14 '15 at 07:06
Please update your answer with big, scary font that when using nullable types, you need to use `.ValuePrimitive(true)`! – Akbari Jul 14 '15 at 07:41
Alhamdulillah, glad you find the way bro. As your command, it's done :D – Dion Dirza Jul 14 '15 at 11:29

Model binding fails with Kendo MultiSelect

1 Answers1