This is a migrated thread and some comments may be shown as answers.

Grid / Checkbox selection in Grid in ClientDetailTemplate

3 Answers 59 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Cédric
Top achievements
Rank 1
Cédric asked on 01 Mar 2018, 08:31 AM

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>

3 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 02 Mar 2018, 01:41 PM
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.
0
Cédric
Top achievements
Rank 1
answered on 06 Mar 2018, 01:39 PM

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 !

 

0
Preslav
Telerik team
answered on 08 Mar 2018, 11:36 AM
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.
Tags
Grid
Asked by
Cédric
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Cédric
Top achievements
Rank 1
Share this question
or