This is a migrated thread and some comments may be shown as answers.

Is having a drop down list in a nested grid possible?

7 Answers 335 Views
Grid
This is a migrated thread and some comments may be shown as answers.
chris
Top achievements
Rank 1
chris asked on 04 Apr 2013, 03:15 PM
I'm trying to incorporate a drop down list in a nested grid using the mvc3 wrappers, is this feasible if so does anyone have an example using the mvc wrappers?  I keep getting a js error saying User is undefined.

Here is what my grid looks like :

<div style="width: 95%; margin-left: auto; margin-right: auto;">
    @(Html.Kendo().Grid<ConfigProject>()
      .Name("projects-grid")
      .Columns(c =>
          {
              c.Bound(m => m.Name);
              c.Bound(m => m.Id);
              c.Bound(m => m.Description);
              c.Command(command =>{command.Edit(); command.Destroy(); }).Width(170);
          })
      .ToolBar(toolbar=>toolbar.Create())
      .Editable(editable=>editable.Mode(GridEditMode.PopUp))
      .Scrollable()
      .Pageable()
      .Sortable()
      .DataSource(datasource => datasource
        .Ajax()
        .Model(model => model.Id(p => p.Id))
        .Read(read => read.Action("ProjectsRead","ConfigEditor",new {Area="Config"}))
        .Create(create => create.Action("CreateProject", "ConfigEditor",new {Area="Config"}))
        .Update(update => update.Action("ProjectUpdate", "ConfigEditor",new {Area="Config"}))        
        .Destroy(destroy => destroy.Action("ProjectDestroy", "ConfigEditor",new {Area="Config"}))
      )
      .ClientDetailTemplateId("detail-template")
      .Resizable(resize => resize.Columns(true))
      .HtmlAttributes(new { style = "height:550px;" })
    )
</div>

<script id="detail-template" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
          .Name("tabStrip_#=Id#")
          .SelectedIndex(0)
          .Items(items =>
              {
                  items.Add().Text("Config Settings").Content(@<text>
                    @(Html.Kendo().Grid<ConfigSetting>()
                          .Name("projects-setttings_#=Id#")
                          .Columns(columns =>
                              {
                                  columns.Bound(o => o.Key);
                                  columns.Bound(o => o.Value);
                                  columns.Bound(o => o.Description);
                                  columns.Command(command => command.Destroy()).Width(110);
                              })
                          .ToolBar(toolbar => {
                                toolbar.Create();
                                toolbar.Save();      
                          })
                          .Editable(editable => editable.Mode(GridEditMode.InCell))
                          .DataSource(dataSource => dataSource
                                .Ajax()
                                .Batch(true)
                                .PageSize(8)
                                .Model(model => model.Id(cs => cs.Key))
                                .Read(read => read.Action("GetConfigsForProject", "ConfigEditor", new { Area="Config", projectID = "#=Id#" }))
                                .Create(create => create.Action("CreateSettings", "ConfigEditor", new { Area="Config", projectID="#=Id#"}))
                                .Update( update => update.Action("EditSettings", "ConfigEditor", new{Area="Config",projectID="#=Id#"}))
                                .Destroy(destroy => destroy.Action("DestroySettings", "ConfigEditor", new {Area ="Config",projectID="#=Id#"}))
                          )
                          .Events(e=>e.Edit("readonlyifyKey"))
                          .Resizable(resize => resize.Columns(true))
                          .Pageable()
                          .Sortable()
                          .ToClientTemplate())
                </text>                        
                      );
                  
                  items.Add().Text("Authorized Users").Content(@<text>
                    @(Html.Kendo().Grid<ConfigAdminUserModel>()
                          .Name("projects-AdminUsers_#=Id#")
                          .Columns(columns =>
                              {
                              columns.Bound(o => o.UserId).Visible(false);
                              columns.Bound(o => o.User).ClientTemplate("#=User.UserName#");
                              columns.Command(command => command.Destroy()).Width(110);
                          })
                          .ToolBar(toolbar =>
                          {
                              toolbar.Create();
                              toolbar.Save();
                          })
                          .Editable(editable => editable.Mode(GridEditMode.InCell))
                          .DataSource(dataSource => dataSource
                                .Ajax()
                                .Batch(true)
                                .ServerOperation(false)
                                .Model(model =>
                                    {
                                        model.Id(cs => cs.UserId);
                                        model.Field(cs => cs.UserId).Editable(false);
                                        model.Field(cs => cs.User).DefaultValue(
                                            ViewData["defaultUser"] as ConfigAdminUser);
                                    })
                                .Read(read => read.Action("AdminUserRead", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
                                .Create(create => create.Action("CreateSettings", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
                                .Update(update => update.Action("EditSettings", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
                                .Destroy(destroy => destroy.Action("DestroySettings", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
                          )
                          .Pageable()
                          .Sortable()
                          .ToClientTemplate())
                </text>                        
                      );
                      
                      
                  items.Add().Text("Team Contact Information").Content(
                    "<div class='team-contact-details'>" +
                    "<ul>" +
                    "<li><label>Name: </label>#= Team.Name #</li>" +
                    "<li><label>Description: </label>#= Team.Description #</li>" +
                    "<li><label>Email: </label>#= Team.Email #</li>" +
                    "<li><label>Pager: </label>#= Team.Pager #</li>" +
                    "</ul>" +
                    "</div>"
                    );           
              })
          .ToClientTemplate())
</script>

7 Answers, 1 is accepted

Sort by
0
chris
Top achievements
Rank 1
answered on 04 Apr 2013, 03:39 PM
So i've gotten a little further, it appears that in my detail template for the grid below, this line was bombing

columns.Bound(o => o.User).ClientTemplate("#=User.UserName#");

 because it was expecting a "User" property to exist on the parent model (ConfigProject) not the child model (ConnfigAdminUserModel).  I think this will end up working out ok, just not what i was expecting the behavoir to be.
@(Html.Kendo().Grid<ConfigAdminUserModel>()
                         .Name("projects-AdminUsers_#=Id#")
                         .Columns(columns =>
                             {
                             columns.Bound(o => o.UserId).Visible(false);
                             columns.Bound(o => o.User).ClientTemplate("#=User.UserName#");
                             columns.Command(command => command.Destroy()).Width(110);
                         })
                         .ToolBar(toolbar =>
                         {
                             toolbar.Create();
                             toolbar.Save();
                         })
                         .Editable(editable => editable.Mode(GridEditMode.InCell))
                         .DataSource(dataSource => dataSource
                               .Ajax()
                               .Batch(true)
                               .ServerOperation(false)
                               .Model(model =>
                                   {
                                       model.Id(cs => cs.UserId);
                                       model.Field(cs => cs.UserId).Editable(false);
                                       model.Field(cs => cs.User).DefaultValue(
                                           ViewData["defaultUser"] as ConfigAdminUser);
                                   })
                               .Read(read => read.Action("AdminUserRead", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
                               .Create(create => create.Action("CreateSettings", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
                               .Update(update => update.Action("EditSettings", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
                               .Destroy(destroy => destroy.Action("DestroySettings", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
                         )
                         .Pageable()
                         .Sortable()
                         .ToClientTemplate())
0
chris
Top achievements
Rank 1
answered on 04 Apr 2013, 04:35 PM
No i take that back i need this grid to bind to my sub grid's model, because now the ajax request isn't properly updating that sub grid, the ajax request to AdminUserRead is firing but the grid isn't binding to its results.  I must be doing something fundamentally wrong here.  Please advis.
0
Vladimir Iliev
Telerik team
answered on 08 Apr 2013, 10:53 AM
Hi Chris,


Basically on each nested template level you should escape the sharp symbol (#) with additional double backslash - "\\". Please check the updated column template of the child grid (one level nested):

columns.Bound(o => o.User).ClientTemplate("\\#=User.UserName\\#");

Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
James
Top achievements
Rank 1
answered on 21 Aug 2013, 08:45 PM

This solution got me almost complete except for doing an edit.
The dropdown list is not populating when the grid is nested but it all works fine when the grid is not nested.

I've tried the model like this:

model.Field(tid => tid.ShippingConfiguration).DefaultValue(
ViewData["shippingconfigurations"] as JECD.WebUI.ViewModels.ShippingConfigurationViewModel);

and also like this:

model.Field(tid => tid.ShippingConfiguration).DefaultValue(
new JECD.WebUI.ViewModels.ShippingConfigurationViewModel());

What am I missing?
Any advice?

Thanks.

0
Vladimir Iliev
Telerik team
answered on 26 Aug 2013, 09:12 AM
Hi Chris,

 
I tried to reproduce the problem locally but to no avail – everything is working as expected on our side with the following configuration:

  • Child Grid model:
    public class OrderViewModel
    {
        public int OrderID { get; set; }
     
        public string ShipCountry { get; set; }
     
        public string ShipAddress { get; set; }
     
        public string ShipName { get; set; }
     
        public DateTime? ShippedDate { get; set; }
     
        //will be edited with DropDownList
        public Destination Destination { get; set; }
    }
  • Destination class:
    public class Destination
    {
        public int Id { get; set; }
     
        public string Name { get; set; }
    }
  • Destination.cshtml editor under the EditorTemplates folder:
    @model Destination
     
    @(Html.Kendo().ComboBoxFor(m => m)
        .DataTextField("Name")
        .DataValueField("Id")
        //bind to example data
        .BindTo(new List<Destination>() {
            new Destination() {Id = 1, Name="Sofia"},
            new Destination() {Id = 2, Name="London"}
        } )
    )
  • Child Grid code:   
    <script type="text/kendo" id="OrdersTemplate">
      @(Html.Kendo().Grid<OrderViewModel>()
            .Name("Orders_#=EmployeeID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Width(101);
                columns.Bound(o => o.ShipCountry).Width(140);
                columns.Bound(o => o.ShipAddress).Width(200);
                columns.Bound(o => o.ShipName).Width(200);
                columns.Bound(o => o.ShippedDate).Format("{0:d}");
                columns.Bound(o => o.Destination).ClientTemplate("\\#=Destination ? Destination.Name : '' \\#");
                columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();
                });
            })
            .ToolBar(tools => tools.Create())
            .Pageable().Sortable().Filterable()
            .DataSource(source => source.Ajax()
                .Model(model =>
                        {
                            model.Id(o => o.OrderID);
                            model.Field(o => o.Destination).DefaultValue(new Destination());
                            model.Field(o => o.OrderID).Editable(false);
                        })
                .Read(read => read.Action("Read_Orders", "Orders", new { id = "#=EmployeeID#" }))
                .Update(update => update.Action("Update_Order", "Orders"))
                .Create(create => create.Action("Create_Order", "Orders", new { id = "#=EmployeeID#" }))
                .Destroy(destroy => destroy.Action("Destroy_Order", "Orders")))
            .ToClientTemplate()
        )
    </script>
  •              

Could you please provide runable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
James
Top achievements
Rank 1
answered on 26 Aug 2013, 02:40 PM
Appreciate the reply, Vladimir...

I am working on getting you a runnable project.

In the meantime, the project has three nested grids and it is the third grid where the dropdown list doesn't work in edit...everything else works as expected.

Should a dropdown work on edit with three nested grids?
0
Vladimir Iliev
Telerik team
answered on 28 Aug 2013, 09:08 AM
Hi Chris,

 
Basically if the Grids are correctly configured the DropDownLists should work as expected. 

Kind Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
chris
Top achievements
Rank 1
Answers by
chris
Top achievements
Rank 1
Vladimir Iliev
Telerik team
James
Top achievements
Rank 1
Share this question
or