Popup editor with nested editor

[Miguel]

Hi! I'm trying to do the following:

I have a grid of groups, and each group can have a bunch of items. The items have two fields right now (url and name, ie two text fields) . I'd like to create a new group, and in the popup editor, being able to add items to it.

The group is something like:

public class Group

{

  public long Id {get; set;}

  public string Name {get; set;}

  public List<Item> Items {get; set;}

}

And the items are like:

public class Item

{

   public long Id {get; set;}
   public string Name {get; set;}

   public string Url{get; set;}

}

I tried to use a ListView but it didnt quite work (seems the API is way, way less developed than the grid's for example), what do you think its the best way to do this? Maybe another grid with inline editing?

Ideally what I'd want is for the nested Item editor to add items to the group being created, and once that group is submitted, then persist everything in the DB.

[Danail Vasilev]

Hello Miguel,

I guess you want to use View Model as shown in this article - http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-to-avoid-circular-reference-exceptions

If that is not the case could you please elaborate more on the matter?

Regards,
Danail Vasilev
Telerik by Progress

[Miguel]

Hm, nope. Thats not what I was talking about.

I mentioned, I have a grid of Groups, and each group can have Items. I wanted to make a popup editor for that grid of groups (Ajax binding) where I can add new Items to it. Basically, how to fill the list of Items from the Grid popup editor.

Anyway I managed to do that. I attached a picture as example of what I am talking about. So, I have a grid of groups like this one:

Html.Kendo().Grid<Group>()
    .BindTo(Model) // Model -> List<Group>

    .Editable( e => e.Editable(true).Mode(GridEditMode.PopUp))
    .DataSource(ds => ds
        .Ajax()
        .Model(mdl =>
        {
            mdl.Id(m => m.Id);
              mdl.Field(m => m.Id).Editable(false);
              mdl.Field(m => m.Name);
              mdl.Field(m => m.Items).DefaultValue(new List<Item>(0));           
        }
      
      .DataSource(ds => ds
          .Ajax()
          .Model(mdl =>
          {
              mdl.Id(m => m.Id);
              mdl.Field(m => m.Id).Editable(false);
              mdl.Field(m => m.Name);
              mdl.Field(m => m.Apps).DefaultValue(new List<App>(0));
          })
          /* Then the actions and so on */

That popup editor launches the Group EditorTemplate, which has a grid inside bound to the Items list:

Html.Kendo()
            .Grid<Item>()
            .Name("id-group-items-grid)
            .BindTo(Model.Items) // Model -> Group
            .HtmlAttributes(new Dictionary<string, object>()
            {

                // this manages to bind the Items list to the grid.
                {"data-bind", "source:Items"}
            })
            .Editable(e => e.Mode(GridEditMode.InLine))

            .Columns(c =>
            {
                c.Bound(m => m.Id).Visible(false);
                c.Bound(m => m.Name);
                c.Bound(m => m.Url);

/* And other initialization code */

That grid has inline editing. Now the issue I have is that I have no way of specifying the required="required" attribute on the inputs of the item (the Name and Url inputs, in the example picture). So I cant do client-side validation to specify that they shouldnt be empty. How could I do that? I tried to do it via jQuery but I realized that the "Name" input has the same Id as the Name input of the Group : / It doesnt seems to affect the data binding but I have no idea how to preffix it or something so it has a different Id (something like "id=Item_Name"). I guess I could navigate the DOM a bit using the row as source...

 

[Danail Vasilev]

Hello Miguel,

Thank you for the clarification.

I am not sure how you want to display the items of the group. What I can suggest, however, is that you either use grouping or hierarchical grids for the purpose. You may find useful the following example on this regards:
    - Edit Nested Grids
    - Edit Records in Child Grids
    - Grouping
    - Grid / Aggregates

Regards,
Danail Vasilev
Telerik by Progress