kendo grid edit template mvc combobox

[Bill]

I have followed the instructions shown here: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/editor-templates

When inline editing in the Grid, the combobox renders fine, however the ID/integer of the underlying property is being filled into the textbox/input field regardless of setting .Text to string.Empty and setting .AutoBind to false.  This is very annoying to have a "0" in the user's input area of the combobox.  See code snippets below:

SellerEditor.cshtml

@model object

@(Html.Kendo().ComboBoxFor(m => m)
    .DataTextField("SellerName")
    .DataValueField("SellerId")
    .Filter(FilterType.StartsWith)
    .Text(string.Empty)
    .Value(string.Empty)
    .Placeholder("")
    .AutoBind(false)
    .MinLength(1)
    .DataSource(source => source.Read("GetSellerSelectItems", "Now360", new { area = "Admin" }).ServerFiltering(true))
    .HtmlAttributes(new { style = "width: 100%;" })
    .Delay(500))

Main View w/ Grid:

@(Html.Kendo().Grid<VINspinAppsWeb.Areas.Admin.Models.Now360.SellerInterestGridViewModel>()
    .Name("grdInterests")
    .Columns(columns =>
    {
        columns.Bound(m => m.SellerId).Template(@<text></text>).ClientTemplate("#:SellerName#");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(190);
    })
    .Groupable(grouping => grouping.Enabled(false))
    .Events(events =>
    {
        events.DataBound("onGridInterestsDataBound");
        events.Save("function(e) { kendo.ui.progress($('#grdInterests'), true); }");
        events.Remove("function(e) { kendo.ui.progress($('#grdInterests'), true); }");
        events.Edit("onGridInterestsEdit");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(m => m.SubscriberSellerInterestId);
            model.Field(p => p.SubscriberSellerInterestId);
            model.Field(p => p.SubscriberId);
            model.Field(p => p.SubscriberSellerId);
            model.Field(p => p.InterestType);
            model.Field(p => p.MakeId);
            model.Field(p => p.SellerId);
        })
        .Events(events =>
        {
            events.Error("onGridError");
            events.Sync("function(e) { kendo.ui.progress($('#grdInterests'), false); }");
        })
        .Read(read => read.Action("SellerInterestsByInterestType", "Now360", new { area = "Admin" }).Data("additionalData"))
        .Update(update => update.Action("UpdateInterest", "Now360", new {area = "Admin" }))
        .Create(create => create.Action("CreateInterest", "Now360", new { area = "Admin" }))
        .Destroy(destroy => destroy.Action("DeleteInterest", "Now360", new { area = "Admin" }))
        .Sort(sort => sort.Add(m => m.SellerName).Ascending())
        .PageSize(10))
    .ToolBar(toolbar => toolbar.Create().Text("New Interest"))
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Filterable(filtering => filtering.Enabled(true))
    .Pageable(paging => paging
        .Enabled(true)
        .Info(true)
        .PageSizes(false)
        .Refresh(true))
    .Scrollable(scrolling => scrolling
        .Enabled(false)
        .Height(400)
        .Virtual(false))
    .Sortable(sorting => sorting
        .Enabled(true)
        .AllowUnsort(false)
        .SortMode(GridSortMode.SingleColumn))
)

ViewModel:

public class SellerInterestGridViewModel
{
    public Guid? SubscriberSellerInterestId { get; set; }

    public Guid SubscriberId { get; set; }

    [Required]
    public Guid SubscriberSellerId { get; set; }

    [Required]
    [UIHint("SellerEditor")]
    [Display(Name = "Seller")]
    public int SellerId { get; set; }

    public string SellerName { get; set; }

    [Required]
    public short InterestType { get; set; }

    public byte? MakeId { get; set; }
}

[Vladimir Iliev]

Hi Bill,

This behavior is related to ComboBox specific behavior - when for the passed value there is no corresponding item in the ComboBox DataSource, it's displayed as-is (this way the widget support custom values). In current case you should either create ViewModel where the target field is of nullable type (in order to pass null value initially) or set DefaultValue for it - this way a valid item from the list will be selected.

e.g.:

public class License
{
    [Required(ErrorMessage = "LicenseId is required")]
    public int LicenseId { get; set; }

    [UIHint("CustomerId")]
    [Required(ErrorMessage = "CustomerId is required")]
    public int? CustomerId { get; set; }

    [UIHint("VendorId")]
    [Required(ErrorMessage = "VendorId is required")]
    public int? VendorId { get; set; }

    [UIHint("ProductId")]
    [Required(ErrorMessage = "Product is required")]
    public string Product { get; set; }
}

@model int?

@(Html.Kendo().ComboBoxFor(m => m)
    .AutoBind(false)
    .Placeholder("Select ...")
    .ValuePrimitive(true)
    .DataTextField("Name")
    .DataValueField("Id")
    .DataSource(dataSource =>
    {
        dataSource.Read(read => read.Action("GetCustomers", "Home"))
            .ServerFiltering(true);
    }))
    @Html.ValidationMessageFor(m => m)

Regards,
Vladimir Iliev
Telerik

 

 

[Bill]

Thanks Vladimir, that worked.