MVC Grid DropDown Editor Templates

2 posts, 0 answers
  1. Umut
    Umut avatar
    7 posts
    Member since:
    May 2014

    Posted 09 Mar 2015 Link to this post

    Hi, 
    I am trying to put a cascading dropdowns into my GridView and for first step, i want to create a basic editor template. 
    It is working while in edit mode, but in read-mode, i could not figure how i shoul read. This field is WlbLine property. 

    How can i get the WlbLine.LineNo in grid-Read-Mode. 

    Here is my view:

    @model IEnumerable<Umki2.Areas.Wlb.ViewModels.VmWlbWeldLogBook>


    @(Html.Kendo().Grid(Model)
             .Name("grid")
             .DataSource(ds => ds
             .Ajax()
             .PageSize(20)
             .Model(model =>
             {
                 model.Id(a => a.Id);
                 model.Field(a => a.Id).Editable(false);
                 model.Field(a => a.PID).Editable(false);
     
             })
                 .Create(create => create.Action("Grid_Create", "WlbWeldLogBook"))
                         .Read(read => read.Action("Grid_Read", "WlbWeldLogBook"))
                         .Update(update => update.Action("Grid_Update", "WlbWeldLogBook"))
                         .Destroy(destroy => destroy.Action("Grid_Destroy", "WlbWeldLogBook"))
             )
             .Columns(p =>
             {
                 p.Command(commands =>
                 {
                     commands.Edit();
                     commands.Destroy();
                 }).Title("").Width(180).Locked();
     
     
                 p.Bound(c => c.WlbLine).Width(160);
                 p.ForeignKey(c => c.WlbSpoolId, (System.Collections.IEnumerable)ViewData["WlbSpoolId"], "Id", "SpoolNo").Width(110).Locked(true).Lockable(false);
                 p.Bound(c => c.PID).Width(200);
                 p.Bound(c => c.JointNo).Width(110).Locked(true).Lockable(false);
                 p.Bound(c => c.WeldingProcess).Width(200);
                 p.Bound(c => c.WlbJointLocation).Width(200);
                 p.Bound(c => c.WlbJointType).Width(200);
                 p.ForeignKey(c => c.WrhIdentity1Id, (System.Collections.IEnumerable)ViewData["WrhIdentityList"], "Id", "IdentityNo").Width(110);
                 p.ForeignKey(c => c.WrhIdentity2Id, (System.Collections.IEnumerable)ViewData["WrhIdentityList"], "Id", "IdentityNo").Width(110);
     
             })
                 .ToolBar(toolbar =>
                 {
                     toolbar.Create();
                     toolbar.Excel();
                 })
         .Editable(editable => editable.Mode(GridEditMode.InLine))
         .Pageable()
         .Sortable()
         .Groupable()
         .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
         .Resizable(resizable => resizable.Columns(true))
         .Scrollable(scrollable => scrollable.Height(430))
         .Reorderable(reorderable => reorderable.Columns(true))
         .ColumnMenu()
         .Excel(excel => excel
             .FileName("LineList_" + System.DateTime.Now + ".xlsx")
             .Filterable(true)
             .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
             )
                     )

    And my editor template WlbLine.cshtml

    @model Umki2.Areas.Wlb.Models.WlbLine
     
    @(Html.Kendo().DropDownListFor(m => m)
                      .AutoBind(false)
                      .OptionLabel("Select Line...")
                        .DataTextField("LineNo")
                      .DataValueField("Id")
                      .DataSource(dataSource =>
                      {
                          dataSource.Read(read => read.Action("GetLines", "WlbWeldLogBook", new { area = "Wlb" }))
                                    .ServerFiltering(true);
                      })
    )
    @Html.ValidationMessageFor(m => m)


    Finally my controller : 

    public JsonResult GetLines()
           {
               return Json(
       db.WlbLine.Select(x => new
       {
           Id = x.Id,
           LineNo = x.LineNo
       }), JsonRequestBehavior.AllowGet);
     
           }
     
           public ActionResult Index()
           {
               ViewBag.WlbSpoolId = db.WlbSpool.ToList();
               ViewBag.WrhIdentityList = db.WrhIdentityList.ToList();
               return View();
           }
     
           public ActionResult Grid_Read([DataSourceRequest]DataSourceRequest request)
           {
               IQueryable<WlbJoint> WlbJoint = db.WlbJoint;
     
               var model = from o in db.WlbJoint
                           select new VmWlbWeldLogBook
                           {
                               Id = o.Id,
                               JointNo = o.JointNo,
                               WeldingProcess = o.WeldingProcess,
                               WlbJointType = o.WlbJointType,
                               WlbJointLocation = o.WlbJointLocation,
                               WlbSpoolId = o.WlbSpoolId,
                               WrhIdentity1Id = o.WrhIdentity1Id,
                               WrhIdentity2Id = o.WrhIdentity2Id,
                               WlbLineId = o.WlbSpool.WlbIsometric.WlbLineId,
                               PID = o.WlbSpool.WlbIsometric.WlbLine.PID
     
                           };
               DataSourceResult result = model.ToDataSourceResult(request);
               return Json(result);
           }

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 11 Mar 2015 Link to this post

    Hello Umut,

    From the provided information it's not clear for us what is the type of the "WlbLine" field that is listed in the Grid columns (e.g.: is primitive or complex type). If it's complex type and contains the "LineNo" as nested property you can use "Template" and "ClientTemplate" method to show it:

    columns.Bound(p => p.WlbLine).ClientTemplate("#=WlbLine ? WlbLine.LineNo : 'no value'#");

    If the "WlbLine" contains only the reference to the nested object than you should use ForeignKeyColumn:

    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top