Unique Dropdownlist per grid row housed within a parent Grid's detail template

10 posts, 0 answers
  1. ASAP Developer
    ASAP Developer avatar
    12 posts
    Member since:
    Sep 2013

    Posted 09 Oct 2013 Link to this post

    I'm having trouble figuring out how to have a dropdown list within a grid while performing inline editing with data that is unique to each individual row.

    We have a grid that has a detail template, and in the detail template is another grid (in reality the child grid is housed within a tab panel but I'm presenting it this way for simplicity sake).  The parent grid is readonly and the child grid contains editable rows.  When adding a row to the child grid (using inline editing) we need one of the columns to display a dropdown containing values that are unique to each parent grid's row ID. 

    While searching through the demo's I came across the following:
    http://demos.kendoui.com/web/grid/editing-custom.html
    However, in our situation we need each row's dropdown to have different values (rather than binding to a single list in the viewbag). 

    I was horsing around with creating a column with a ClientTemplate containing a dropdownlist that pulls its data from a controller method, but was unable to figure out the exact syntax to get it to work within the context of a row detail template.  Is this the only way to go about doing this or am I missing something obvious?  Thanks!
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2204 posts

    Posted 11 Oct 2013 Link to this post

    Hi,

     
    Please check the example below of achieving the desired behavior:

    1. Set the column in the child Grid in the following way:  
      @(Html.Kendo().Grid<OrderViewModel>()
          .Name("Orders_#=EmployeeID#")
          .Columns(columns =>
          {
              //Product must be object
              columns.Bound(o => o.Product)
                  .ClientTemplate("\\#= Product ? Product.ProductName : ''\\#")
                  .EditorTemplateName("DynamicDropDownList");
    2. Add "DynamicDropDownList.cshtml" editor under the EditorTemplates folder (for example under the Views -> Shared folder):
      <script type="text/javascript">
          function getParentId() {
              return { EmployeeID: '#=EmployeeID#' };
          }
      </script>
       
      @(Html.Kendo().DropDownList()
              .Name("Product")
              .DataValueField("ProductID")
              .DataTextField("ProductName")
              .DataSource(ds => ds
                  .Read(read => read.Action("Read_Products", "Products").Data("getParentId")))
      )    
    3. Set the Controller action to return list of Products: 
      public ActionResult Read_Products(int EmployeeID)
      {
          return Json(context.Products.Where(e => e.EmployeeID == EmployeeID).Select(e => new ProductViewModel
              {
                  ProductID = e.ProductID,
                  ProductName = e.ProductName,
                  Price = e.Price
              }), JsonRequestBehavior.AllowGet);
      }
    4.        
    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!
  3. ASAP Developer
    ASAP Developer avatar
    12 posts
    Member since:
    Sep 2013

    Posted 11 Oct 2013 Link to this post

    Thank you for the example.

    I went ahead and implemented it and the edit template correctly populates a drop down, however now the toolbar add button isn't adding a new row to the grid.  Here's an example of what the grid looks like:

    @(Html.Kendo().Grid<Document>()
                           .Name("DocumentGrid_#=PackageID#")
                           .Columns(columns =>
                           {
                               columns.Bound(p => p.CreateDateTime).Width(110);
                               columns.Bound(p => p.OTest)
                                   .ClientTemplate("\\#= OTest? OTest.Name : ''\\#")
                                   .EditorTemplateName("DocumentDropDown");         
                               columns.Command(commands =>
                               {
                                   commands.Edit();
                                   commands.Destroy();
                               }).Title("Commands").Width(200);
                                
                           })
                             .ToolBar(toolbar =>
                                 {
                                   toolbar.Create();
                                 })
                             .Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode
                           .DataSource(dataSource => dataSource
                               .Ajax()
                               .Model(model =>
                               {
                                   model.Id(i => i.DocumentID);
                                              model.Field(p => p.OTest);
                               })
                                 .PageSize(5)
                                 .Read(read => read.Action("PackageRead", "Dispatch", new { PackageID = "#=PackageID#"}))
                                 .Update(update => update.Action("Document_Update", "Dispatch"))
                                 .Destroy(delete => delete.Action("Document_Delete", "Dispatch"))
                                 .Create(create => create.Action("Document_Create", "Dispatch"))
                           )
                           .ToClientTemplate())
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2204 posts

    Posted 15 Oct 2013 Link to this post

    Hi,

     
    I would suggest to try setting default value for the "OTest" field - please check the example below:

    .Model(model =>
    {
        model.Id(p => p.ProductID);
        model.Field(p => p.ProductID).Editable(false);
        //set a empty object as default value - the DropDownList should have OptionLabel defined
        model.Field(p => p.Category).DefaultValue(new Kendo.Mvc.Examples.Models.ClientCategoryViewModel());
        // OR set a p[opulated object as default value
        //model.Field(p => p.Category).DefaultValue(new Kendo.Mvc.Examples.Models.ClientCategoryViewModel() {CategoryID = 1, CategoryName = "Category 1" });
    })
    Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. ASAP Developer
    ASAP Developer avatar
    12 posts
    Member since:
    Sep 2013

    Posted 15 Oct 2013 Link to this post

    Can you provide an example for the ClientCategoryViewModel?  I'm getting a serialization error when attempting to do as you suggested.
  6. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2204 posts

    Posted 16 Oct 2013 Link to this post

    Hi,

     
    The "ClientCategoryViewModel" model can be found in the offline demos that comes with your KendoUI for ASP.NET MVC installation, however I also included the model below:

    public class ClientCategoryViewModel
    {
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
    }
    Also if you are getting "circular reference error" during serialization of current model you can check the Grid troubleshooting article for more information about how to fix this error:


    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!
  7. ASAP Developer
    ASAP Developer avatar
    12 posts
    Member since:
    Sep 2013

    Posted 23 Oct 2013 Link to this post

    I attempted to assign a defaultvalue like you suggested and the page breaks and doesn't load.  I found the following serialization error being thrown:
    Cannot serialize objects of type ... 

    *scratches head*.  I've checked and rechecked the grid and editor template and not seeing what could be causing the problem.  Any ideas?
  8. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2204 posts

    Posted 24 Oct 2013 Link to this post

    Hi,

    As this thread is out of the original topic, may I kindly ask you to open a new support thread for the appropriate product (KendoUI DataSource in that case)?

    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!
  9. Eileen
    Eileen avatar
    2 posts
    Member since:
    Mar 2012

    Posted 04 Feb 2015 in reply to Vladimir Iliev Link to this post

    Hi Vladimir,

    I am looking for same functionality without parent grid  ie., in a grid each row may have different dropdown values based on other column and I am using HTML5/ Jquery.   Cloud you please provide the above example in with Jquery.

    Thanks in advance for your time.

    Thanks!
  10. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 06 Feb 2015 Link to this post

    Hello Eileen,

    I am not sure if I understand the issue with the described scenario but you could just set the corresponding data when creating the editor. I have created an example based on the custom editor demo that filters the data based on the ProductID value.

    Regards,
    Daniel
    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