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

6 posts, 0 answers
  1. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 20 Jan Link to this post

    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. 

     

     

     

     

     

     

  2. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 20 Jan Link to this post

    Missed it in original post. Here is the flash video to show the issue.
  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 25 Jan Link to this post

    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

     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 25 Jan in reply to Kiril Nikolov Link to this post

    Kirk,

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

     Thanks.

  6. Avinash
    Avinash  avatar
    52 posts
    Member since:
    Jan 2016

    Posted 26 Jan Link to this post

    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

     

     

     

     

     

     

     

     

     

     

     

  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 27 Jan Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready