Get inner items of grid

4 posts, 0 answers
  1. ShareDocs
    ShareDocs avatar
    91 posts
    Member since:
    Oct 2012

    Posted 10 Jul 2017 Link to this post

    Hi,

    I have a problem to get the inner items of hierarchical grid.

    This is the main grid:

     @(Html.Kendo().Grid(Model.List1)
            .Name("List1")
        .Columns(columns =>
        {
            columns.Bound(p => p.ColA).Title("ColA").Width(135);

            columns.Bound(p => p.ColB).Title("ColB").Width(110).Template(@<text>
              <a href='\\#' class='link' style="color:red;" onclick='UpdateItem(@item.ColC) '>@item.ColC</a>     
            </text>);

     })

        .Pageable()
        .Sortable()
        .Groupable()
        .DataSource(dataSource => dataSource.Server().PageSize(5))
        .HtmlAttributes(new { style = "height:500px;" })
        .DetailTemplate(

            @<text>
                @(Html.Kendo().Grid(item.InnerList)
                                        .Name("Inner_" + item.ListID)
                                        .Columns(columns =>
                                        {
                                        columns.Bound(o => o.ColD1).Title("ColD1").Width(110).HtmlAttributes(new { @class =  "btn-link", @style = "cursor: pointer;" }).HtmlAttributes(new { @onclick = "UpdateItem('"+@item.ColD1+")" })
                           
                                            columns.Bound(o => o.ColD2).Title("ColD2").Width(110);
                                        })

                                     .DataSource(dataSource => dataSource.Server())
                                     .Pageable()
                                     .Sortable()
                )
            </text>
              )

     

    ______________________________________________

    1. In the detail template I tried add a link to column ColD1 as in column ColC with .Template but it didn't work.

    So I used HtmlAttributes instead to simulate a link :

    I added: @class =  "btn-link", @style = "cursor: pointer;"  and it worked.

    Why can't I use the .Template in the inner grid?

     

    2. When I click on the link I want to run a javascript function. I tried sending the inner item as parameter to the function (as I did successfully in the main grid with @item) but it didn't work. 

    I tried to send it in many ways:

    1. @item.ColD1

    2. o.ColD1

    3.\\#= ColD1\\#

    But none of the ways worked....

    I'll be glad to receive your help,

    Elad.

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 12 Jul 2017 Link to this post

    Hi Elad,

    This is a limitation of the Razor view engine. If you need to nest server templates, you can use helpers:
    @model IEnumerable<Kendo.Mvc.Examples.Models.Employee>
     
        @{ Html.Kendo().Grid(Model)
                  .Name("Employees")
                  .Columns(columns =>
                  {
                      columns.Bound(e => e.FirstName).Width(140);
                      columns.Bound(e => e.LastName).Width(140);
                      columns.Bound(e => e.Title).Width(200);
                      columns.Bound(e => e.Country).Width(200);
                      columns.Bound(e => e.City);
                  })
               .DetailTemplate(f => RenderGrid(f))
                  .RowAction(row =>
                  {
                      if (row.Index == 0)
                      {
                          row.DetailRow.Expanded = true;
                      }
                      else
                      {
                          var requestKeys = Request.QueryString.Keys.Cast<string>();
                          var expanded = requestKeys.Any(key => key.StartsWith("Orders_" + row.DataItem.EmployeeID) ||
                              key.StartsWith("OrderDetails_" + row.DataItem.EmployeeID));
                          row.DetailRow.Expanded = expanded;
                      }
                  })
                  .Pageable()
                  .DataSource(dataSource => dataSource.Server().PageSize(5))
                  .Sortable()
                  .Render();
        }
     
        @helper RenderGrid(Kendo.Mvc.Examples.Models.Employee employee)
        {
            @(Html.Kendo().Grid(employee.Orders)
                .Name("Orders_" + employee.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).Template(@<text>
            <a href='\\#' class='link' style="color:red;" onclick='UpdateItem(@employee.EmployeeID) '>@employee.EmployeeID</a>
                    </text>);
                    columns.Bound(o => o.ShippedDate).Format("{0:d}");
                 })
                 .DataSource(dataSource => dataSource.Server())
                 .Pageable()
                 .Sortable()
                 .Filterable()
        )
    }


    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. ShareDocs
    ShareDocs avatar
    91 posts
    Member since:
    Oct 2012

    Posted 17 Jul 2017 in reply to Tsvetina Link to this post

    Hi Tsvetina,

    It works!!

    Thanks for your help!

    Elad


  4. ShareDocs
    ShareDocs avatar
    91 posts
    Member since:
    Oct 2012

    Posted 17 Jul 2017 in reply to Tsvetina Link to this post

    Hi Tsvetina,

    Its works!!

    Thanks for your help!

    Elad.

Back to Top