Editable Grid not load correctly dropdown list

2 posts, 0 answers
  1. Giovanni
    Giovanni avatar
    1 posts
    Member since:
    May 2015

    Posted 29 Nov 2016 Link to this post

    Hi all, I've problem to load drop down list inside kendo grid foreign key column:

    My configuration is the following:
    I have a view

    @model Pomini.DeviceMonitor.Configurator.Models.Device.DeviceSearchModel
     
    @{
        ViewBag.Title = "Device";
        Layout = "~/Views/Shared/_DefaultLayoutForKendoGrid.cshtml";
    }
     
    @section PageScript {
        <script src="~/Scripts/device.js"></script>
    }
     
    <div class="row">
     
        <div class="col-md-12">
            <h1>Device List of @Model.RollshopName</h1>
     
            @(Html.Kendo().Grid<Pomini.DeviceMonitor.Business.Device>(Model.DeviceList)
                .Name("DeviceGrid")
                .Columns(columns =>
                {
                columns.Bound(p => p.DeviceID);
                columns.Bound(p => p.SerialNumber);
                columns.ForeignKey(p => p.DeviceType, @Model.DeviceTypeEnumList, "Value", "Name");
                columns.Template(@<text></text>).ClientTemplate(@Html.ActionLink("View Configuration", "Index", "Item", new { deviceId = "#=DeviceID#" }, null).ToHtmlString());
                })
                .Pageable()
                .Sortable(sortable =>
                {
                    sortable.Enabled(true);
                    sortable.SortMode(GridSortMode.SingleColumn);
                })
                .Filterable()
                .ToolBar(toolbar =>
                {
                    toolbar.Create();
                    toolbar.Save();
                })
                .Editable(editable =>
                {
                    editable.Mode(GridEditMode.InCell);
                    editable.Enabled(true);
                    editable.DisplayDeleteConfirmation(true);
                })
                .Navigatable()
                .DataSource(dataSource =>
                    dataSource.Ajax()
                    .Batch(true)
                    .Model(model =>
                    {
                        model.Id(p => p.DeviceID);
                        model.Field(p => p.DeviceID).Editable(false);
                    })
                    .Read(read => read.Action("Device_Read", "Device"))
                    .Create(create => create.Action("Device_Create", "Device", new { rollshopId = @Model.RollshopId }))
                    .Update(update => update.Action("Device_Update", "Device"))
                    .Sort(sort => sort.Add("DeviceID").Ascending())
                )
            )
        </div>
     
    </div>

     

    My viewmodel page, from which I retrieve all data I need in my view

    public class DeviceSearchModel
        {
            public DeviceSearchModel(int rollshopID)
            {
                this.RollshopName = Business.Rollshop.Query(x => x.ID == rollshopID).FirstOrDefault() != null ? Business.Rollshop.Query(x => x.ID == rollshopID).FirstOrDefault().Name : "";
                this.DeviceTypeEnumList = Business.Helper.GetListFromEnum<DeviceTypeDescriptions>();
                this.DeviceList = Business.Device.Query(x => x.RollshopID == rollshopID);
                this.RollshopId = rollshopID;
            }
     
            public string RollshopName { get; private set; }
     
            public List<EnumModel> DeviceTypeEnumList { get; set; }
            public IEnumerable<Business.Device> DeviceList { get; private set; }
            public int RollshopId { get; private set; }
        }

     

    I've also the class that own the structure of my dropdown items:

    public class EnumModel
            {
                public int Value { get; set; }
                public string Name { get; set; }
            }

     

    This is my Enum class:

    public enum DeviceTypeDescriptions
        {
            [Display(Name = "Starndard Grinder")]
            StandardGrinder = 0,
            [Display(Name = "Pomini digital texturing")]
            PDT = 1,
            MWGrinder = 2,
            BladeGrinder = 3
        }

     

    And this is the method I use to populate my dropdownlist item's from my Enum:

    public static List<EnumModel> GetListFromEnum<T>()
            {
                return Enum.GetValues(typeof(T))
                    .Cast<T>()
                    .Select(x => new EnumModel()
                    {
                        Value = Convert.ToInt32(x),
                        Name = x.ToString()
                    }).ToList();
            }

     

    This is my Device class: in this class I retrieve data which populate the grid:

    public sealed class Device : IBusinessDomain
        {
            public int DeviceID { get; internal set; }
            public int RollshopID { get; internal set; }
     
            public string SerialNumber { get; set; }
     
            public int DeviceType { get; set; }
     
            //public DeviceTypeDescriptions DeviceTypeDescription { get; set; }
             
            public Lazy<Business.Rollshop> Rollshop { get; internal set; }
            public Lazy<IEnumerable<Business.Item>> ItemList { get; internal set; }
     
            public static IEnumerable<Device> Query(Expression<Func<Data.MainDB.Device, bool>> where = null)
            {
                using (var db = new Repository())
                {
                    IEnumerable<Device> result = db.Device.Enumerate(where).Select(x => (Device) x).ToArray();
                    return result;
                }
                     
            }
     
    public static explicit operator Device(Data.MainDB.Device arg)
            {
                var value = Mapper.Map<Device>((Data.MainDB.Device) arg);
                return value;
            }
    }

     

    And this is my database model object:

    public partial class Device
        {
            [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
            public Device()
            {
                this.Item = new HashSet<Item>();
            }
         
            public int ID { get; set; }
            public string SerialNumber { get; set; }
            public int DeviceType { get; set; }
            public System.DateTime CreationDate { get; set; }
            public System.DateTime LastUpdateDate { get; set; }
            public int RollshopID { get; set; }
         
            public virtual Rollshop Rollshop { get; set; }
            [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
            public virtual ICollection<Item> Item { get; set; }
        }

     

    Ok so now this is my situation. I hope is clear.
    The behaviour in this situation is that grid will be populated well on load, but when i click cell to edit content, dropdown does'n appear and i can't edit cell (no textbox also appear) (only for DeviceType column, for SerialNumber column all works).
    If in my grid I change bound to foreign key in this way:

     

    columns.ForeignKey(p => p.DeviceType, @Model.DeviceTypeEnumList, "Name", "Name");

     

    when i load my grid, DeviceType column will remain blank (not bound to it's value), but when i click on this the cell enter correctly in edit mode and show my dropdown. Then if I choose an item in the dropdown, when i click outside cell, this cell return blank (item I choosen is not shown in grid).
    I hope is all clear!
    Thank

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 30 Nov 2016 Link to this post

    Hello Giovanni,

    Please refer to the answer in the support ticket, where we are discussing the problem. For other convenience that might encounter similar problem, the issue is due to an unsupported jQuery version.


    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
Back to Top