Grid / Checkbox selection in Grid in ClientDetailTemplate

4 posts, 0 answers
  1. Cédric
    Cédric avatar
    3 posts
    Member since:
    Jan 2018

    Posted 01 Mar 2018 Link to this post

    I am trying to use the Grid / Checkbox selection feature in nested grids, inside client detail templates.

    I am in face of a disturbing issue because the "select all" operation (by using the checkbox in the header) is always done in the first row having details.

     

    To be clearer, suppose having a master grid with only 2 rows. Each row has a detail template containing a nested grid. Expand the 2 detail templates and try to select all the rows of the 2nd nested grid => That selects all the rows of the 1st one.

     

    Have you an idea to help me ?

    Thank you in advance.

     

    Hereafter my shortened code of  the view (the full version is attached):

    @(Html.Kendo().Grid<SellerViewModel>()

          .Name("SellersGrid")
          .Columns(columns =>
          {
              columns.Bound(p => p.SellerId).Hidden();
              columns.Bound(p => p.IsSelected);
              columns.Bound(e => e.Name);
              columns.Bound(e => e.IsActive);
          })
          .Events(e =>
          {
              e.DataBound("onHostSellersDataBound");
          })
          .Filterable()
          .Pageable(pager => pager.ButtonCount(3))
          .Editable(editable => editable.Mode(GridEditMode.InCell))
          .Sortable(sortable => sortable
              .AllowUnsort(true)
              .SortMode(GridSortMode.MultipleColumn))
          .ClientDetailTemplateId("marketplaces_template")
          .DataSource(dataSource => dataSource
              .Ajax()
              .Read(read => read.Action("GetHostSellers", "CompetitorGroup", new { competitorGroupId = Model.CompetitorGroupId }))
              .Sort(sort => sort.Add("IsSelected").Descending())
              .PageSize(25)
              .Model(model =>
              {
                  model.Id(p => p.UniqueId);
                  model.Field(p => p.SellerId).Editable(false);
                  model.Field(p => p.IsSelected).Editable(true);
                  model.Field(p => p.Name).Editable(false);
                  model.Field(p => p.IsActive).Editable(false);
              })
              .ServerOperation(false))
    )

    <script id="marketplaces_template" type="text/kendo-tmpl">
        @(Html.Kendo().TabStrip()
              .Name("MarketplacesTabStrip_#=SellerId#")
              .SelectedIndex(0)
              .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
              .Items(items =>
              {
                  items.Add().Text("Marketplaces")
                      .Content(@<text>
                            @(Html.Kendo().Grid<SellerViewModel>()
                                  .Name("MarketplacesGrid_#=SellerId#")
                                  .HtmlAttributes(new {style = "height: 543px;"})
                                  .Columns(columns =>
                                  {
                                      columns.Select().Width(50);
                                      columns.Bound(p => p.SellerId).Hidden();
                                      columns.Bound(p => p.HostSellerId).Hidden();
                                      columns.Bound(p => p.IsSelected).Title("Inclus");
                                      columns.Bound(e => e.Name);
                                      columns.Bound(e => e.IsActive);
                                  })
                                  .Events(e =>
                                  {
                                      e.DataBound("onMarketplacesDataBound");
                                  })
                                  .Filterable()
                                  .Editable(editable => editable.Mode(GridEditMode.InCell))
                                  .Scrollable(scrollable => scrollable.Virtual(true))
                                  .Sortable(sortable => sortable
                                      .AllowUnsort(true)
                                      .SortMode(GridSortMode.SingleColumn))
                                  .PersistSelection()
                                  .Pageable(pager =>
                                  {
                                      pager.ButtonCount(3);
                                      pager.Messages(msg => msg.Display("Marketplaces {0} à {1} - sur {2}"));
                                  })
                                  .DataSource(dataSource => dataSource
                                      .Ajax()
                                      .PageSize(500)
                                      .ServerOperation(false)
                                      .Read(read => read.Action("GetMarketplaces", "CompetitorGroup", new {competitorGroupId = Model.CompetitorGroupId, hostSellerId = "#=SellerId#"}))
                                      .Sort(sort => sort.Add("IsSelected").Descending())
                                      .Model(model =>
                                      {
                                          model.Id(p => p.UniqueId);
                                          model.Field(p => p.SellerId).Editable(false);
                                          model.Field(p => p.HostSellerId).Editable(false);
                                          model.Field(p => p.IsSelected).Editable(true);
                                          model.Field(p => p.Name).Editable(false);
                                          model.Field(p => p.IsActive).Editable(false);
                                      })
                                  )
                                  .ToClientTemplate())
                        </text>);

              })
              .ToClientTemplate())
    </script>

  2. Preslav
    Admin
    Preslav avatar
    583 posts

    Posted 02 Mar 2018 Link to this post

    Hello Cédric,

    Based on your post, I believe that the issue is related to this bug:
    If this is the case, the above bug was fixed with our 2018 R1 release. Having said that, could you check if updating the Kendo UI version to latest fixes the issue?

    I look forward to your reply.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Cédric
    Cédric avatar
    3 posts
    Member since:
    Jan 2018

    Posted 06 Mar 2018 in reply to Preslav Link to this post

    Hello,

    I was confident when I saw the bug described in the link you attached because the behavior looked like very similar to my use case.

    However, after having checked the Kendo UI version in my project, I can confirm it is the 2018 R1 release.

    To be absolutely sure the issue does not come from my project, I created another one, lighter, based on your VS template. You can find attached the 

    The issue is still there : select all the rows of a nested grid (which details any row of the master grid except the first one) selects all the rows of the first nested grid !

     

  4. Preslav
    Admin
    Preslav avatar
    583 posts

    Posted 08 Mar 2018 Link to this post

    Hi Cédric,

    Thank you very much for sharing the isolated example with us. It helped us to understand the root of the problem.

    This behavior is a bug and our dev team already fixed it:
    The fix will be included in our next official release(it will be out mid-May). It will be also available in our next internal build. Unfortunately, for the time being, our trail users cannot access the internal builds.

    Finally, as a small token of gratitude for pointing us to the above bug, I updated your Telerik points.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top