Popup editor with nested editor

4 posts, 0 answers
  1. Miguel
    Miguel avatar
    8 posts
    Member since:
    Oct 2013

    Posted 07 Sep Link to this post

    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.

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 09 Sep Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Miguel
    Miguel avatar
    8 posts
    Member since:
    Oct 2013

    Posted 09 Sep in reply to Danail Vasilev Link to this post

    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...

     

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 13 Sep Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready