Using an MVC model to populate and validate a kendo multiselect?

Question

I am trying to bind my kendo multiselect to a property in a model using mvc 5 however all i get is a list of undefined elements. The list is correct at the controller level and looking at the source code the list is correct there but I can not visualize the list.

What is also puzzling is that there are more undefined elements in the list then items the actual list in the model.

Can anyone explain what is going on or show me how to go about debugging and fixing the issues I am having.

Model:

[Required]
public SelectList hierarchy { get; set; }

public virtual IEnumerable<SelectListItem> Hierarchy
{
    get
    {
        var hierarchies = new List<Company>();
        hierarchies = RoleCompanyHelper.GetHierachies();
        var hierarchiesList = new List<SelectListItem>();
        foreach (var hierarchy in hierarchies)
        {
            hierarchiesList.Add(new SelectListItem
            {
                Value = hierarchy.CompanyID.ToString(),
                Text = hierarchy.CompanyName
            });
        }
        return new SelectList(hierarchiesList, "Value", "Text");
    }
}

Controller:

public ActionResult Index()
{
    var vm = new AXCurrentRolesViewModel();
    return View(vm);
}

View:

@model TelerikMvcApp1.Models.AXCurrentRolesViewModel

@(Html.Kendo().MultiSelect()
    .Name("addRoleCompany_hierarchy")
    .BindTo(new SelectList("Value", "Text"))
    .Value(Model.hierarchy)
    .DataTextField("HierarchyName")
    .DataValueField("HierarchyID")
    .Placeholder("Select Hierarchy...")
    .Filter(FilterType.StartsWith)
    .AutoBind(false)
)

On a slightly separate note why does my standard validation using the model always return true??

Thank you for any help and advice on these issues.

EDIT Source code

<select id="addRoleCompany_hierarchy" multiple="multiple" name="addRoleCompany_hierarchy"></select>
    <script>
        jQuery(function(){jQuery("#addRoleCompany_hierarchy").kendoMultiSelect({"dataSource":[{"Text":"All Companies Inc IFRS \u0026 Consol","Value":"55"},
        {"Text":"All Posting Companies (exc POC \u0026 Investments)","Value":"56"},
        {"Text":"BUUK Group Structure","Value":"57"},
        {"Text":"Cardiff Entities","Value":"58"},
        {"Text":"Department","Value":"59"},
        {"Text":"GTC/GPL/ENC/IPL/QPL/EAM","Value":"60"},
        {"Text":"GTC/GUC/CUL","Value":"61"},
        {"Text":"GTCConsoleAndOperationalCompanies","Value":"62"},
        {"Text":"GTCOperationalCompanies","Value":"63"},
        {"Text":"Inexus Companies","Value":"64"},
        {"Text":"Investment Companies Only","Value":"65"}, 
        {"Text":"PIL/POL","Value":"66"}],"dataTextField":"HierarchyName","filter":"startswith","autoBind":fal    se,
        "dataValueField":"HierarchyID","placeholder":"Select Hierarchy..."});});
    </script>

.BindTo(new SelectList("Value", "Text")) = empty model. You'll want to use Model here. — Scottie, Dec 15 '14 at 15:13
@Scottie what is the syntax for that? '.BindTo(new SelectList(Model.hierarchy, "Value", "Text"))` or `.BindTo(Model.hierarchy)` — LoftyTowers, Dec 15 '14 at 15:20
Assuming Model.hierachy is IEnumerable and has properties of Value and Text, I believe either one will work. IIRC, you may need to cast the 2nd one as .BindTo((IEnumerable)Model.hierachy). — Scottie, Dec 15 '14 at 15:38
After looking at your example, if you want to go the new SelectList route, you'll need to do .BindTo(new SelectList(Model.hierarch, "HierarchyId", "HierarchyName")) — Scottie, Dec 15 '14 at 15:41
@Scottie Looking at that it makes sense however I am getting an error now saying `Value can not be null` I have done some debugging and model.hierarchy is null, but model.Hierarchy is holding the data I wish to use, have I made an error in my Model logic? — LoftyTowers, Dec 15 '14 at 15:49
@Scottie is there a better way of populating my multiselect then using a selectlist? — LoftyTowers, Dec 15 '14 at 15:54
RAZOR is case sensitive. Try using Model.Hierarchy instead of Model.hierarchy. A selectlist is a fine way to populate a multiselect. I do it all the time. — Scottie, Dec 15 '14 at 15:58
@Scottie it seems to that I have something wrong going on in my logic somewhere, when I use: .BindTo(new SelectList(Model.hierarch, "HierarchyId", "HierarchyName")) I get the following message: ` System.Web.HttpException: DataBinding: 'System.Web.Mvc.SelectListItem' does not contain a property with the name 'CompanyId'` but when I use Value and text I just get undefined list but the values behind are correct. Any Ideas? — LoftyTowers, Dec 15 '14 at 16:12
I would set a breakpoint at this line: foreach (var hierarchy in hierarchies) and see what is being assigned there. — Scottie, Dec 15 '14 at 16:31
@Scottie I have just double checked that and it is populating correctly. I have just edited my question to show the source code, I am still showing a list of text saying undefined though. — LoftyTowers, Dec 15 '14 at 16:35
Change .DataTextField("HierarchyName") and .DataValueField("HierarchyID") to .DataTextField("Text") and .DataValueField("Value") — Scottie, Dec 15 '14 at 18:39
@Scottie That has fixed the issues I was having thank you. Do you know how I can get the required field to validate client side? — LoftyTowers, Dec 16 '14 at 08:42
Great! Can you mark my answer as the correct one? You should be able to use DataAnnotations to validatate any fields. — Scottie, Dec 16 '14 at 15:52

score 2 · Accepted Answer · answered Dec 16 '14 at 15:53

2

Change

.DataTextField("HierarchyName") 
.DataValueField("HierarchyID") 

.DataTextField("Text") 
.DataValueField("Value")

answered Dec 16 '14 at 15:53

Scottie

11,050
19
68
109

Using an MVC model to populate and validate a kendo multiselect?

1 Answers1