Dropdownlist reverts back to 'null' value after selection is moved in the Grid [ASP MVC 5]

[Avinash]

I have a grid with Inline batch editing mode on. I am trying to display dropdownlist inside the grid and enable user to select values from the dropdown. The issue i am running into right now is, by default it shows null value, when clicked on that cell it shows all the dropdown values and you can select to different dropdown value. But as soon as you click outside the grid cell, it reverts the text to 'null' again. When clicked on the cell back again, it changes from 'null' to previously selected value.

ViewModel: 

 

public class CreateAsnRequestViewModel
{
    [Display(Name = "UPC UOM")]
    public string UPCUOM               { get; set; }

    public string UserDefinedCode      { get; set; }
}

public class CommonDetailsCommonProperties
{
    public string ProductCode          { get; set; }
    public string UserDefinedCodes     { get; set; }
    public string UserDefinedCode      { get; set; }
    public string CombinedValuesToSave { get; set; }
}

public class UOMItem : CommonDetailsCommonProperties
{
    public string UOM                  { get; set; }
}

public class CommonDetailsViewModel
{
    public List<UOMItem> UOMs          { get; set; }
}

Controller:

CommonDetailsViewModel commonDetailsViewModel = commonService.InvokeGetCommonDetails(flag);
ViewData["UOMList"] = commonDetailsViewModel.UOMs;

Views:

EditorTemplate: _UOMDropDownList.cshtml

@using System.Collections
@using Kendo.Mvc.UI;

@(Html.Kendo().DropDownList()
.BindTo((IEnumerable)ViewData["UOMList"])
    .DataValueField("UserDefinedCode")
    .DataTextField("UserDefinedCode")
    .Name("UPCUOM")
)

Main Razor View:

@(Html.Kendo().Grid<SupplierPortal.ViewModels.CreateAsnRequestViewModel>()
      .Name("GridViewOpenPOSelected")
      .Columns(columns =>
      {
          columns.Bound(p => p.UPCUOM).HtmlAttributes(new { @class = "editableFiled" }).EditorTemplateName("_UPCUOMDropDownList").ClientTemplate("#:UserDefinedCode#").Width(180);
      })
    .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
    .AutoBind(false)
    .Navigatable()
    .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .PageSize(10)
                .Read(read => read.Action("GetSelectedPO",   "Asn").Data("GetSelectedPOParameters"))
                .ServerOperation(false)
                .Model(model =>
                {
                    model.Id(p => p.Id);
                }))
    .Events(events => events.DataBound("gridDataBound"))
    .Events(events => events.DataBinding("gridDataBinding"))
    .Events(events => events.Edit("onEdit"))
)

 

Any help will be appreciated.

Thanks. 

 

 

 

 

 

 

[Avinash]

Missed it in original post. Here is the flash video to show the issue.

[Kiril Nikolov]

Hello Avinash,

 

Please try the following:

 

@(Html.Kendo().DropDownList()
.BindTo((IEnumerable)ViewData["UOMList"])
    .DataValueField("UserDefinedCode")
    .DataTextField("UserDefinedCode")
    .Name("UPCUOM")

    .HtmlAttributes(new { data_value_primitive = "true" }))

 

 

 

Regards,

Kiril Nikolov

Telerik

 

 

[Avinash]

Kirk,

 I made that change but i still have the issue.
Any other suggestion?

 Thanks.

[Avinash]

Here is how i fixed this issue:

Got rid of ClientTemplate attribute from View. So the code looks like this now:

View

.Columns(columns =>

{

    columns.Bound(p => p.UPCUOM).HtmlAttributes(new { @class = "editableFiled" }).EditorTemplateName("_UPCUOMDropDownList").Width(180);

})

Also found out that i didn't need 'UserDefinedCode' property in my Model.

Model 

public class CreateAsnRequestViewModel
{
    [Display(Name = "UPC UOM")]
    public string UPCUOM               { get; set; }
}

Also learned that i could use .ValuePrimitive function similar to what Kirk suggested .HtmlAttributes(new { data_value_primitive = "true" })) to show empty value incase you have null values in Model, so the editor template code looks like this now.

@(Html.Kendo().DropDownList()
.BindTo((IEnumerable)ViewData["UOMList"])
    .DataValueField("UserDefinedCode")
    .DataTextField("UserDefinedCode")
    .Name("UPCUOM")
    .ValuePrimitive(true)
)

 

 Hope this helps someone with similar issue.

This issue can be closed now.

Thanks.

Avinash

 

 

 

 

 

 

 

 

 

 

 

[Kiril Nikolov]

Hello Avinash,

 

I am happy to hear that the issue is resolved. 

 

In case you have any further questions, please do not hesitate to contact us.

 

 

Regards,
Kiril Nikolov
Telerik