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

checkbox selection in detail grid

1 Answer 373 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mittal
Top achievements
Rank 1
Mittal asked on 29 Sep 2020, 02:09 AM
Hi 
I have a grid with child grid. What i need to achieve is, i should be able to select checkbox in child grid for multiple master rows and get the selected child grid row's ids.
Main grid code: 
  @Code
                     Html.Kendo().Grid(Of PatientEquipmentModel)() _
                         .Name("haemoGrid") _
                         .Columns(Sub(c)
                                      c.Bound(Function(p) p.FullName).ClientTemplate(String.Format("<a title='' href='{0}/{1}'><span style='font-weight:bold;'>#:FullName #</span></a>", Url.Action("EditBay", "Patient"), "#:PatientId#", Url.Action("GetExcel", "Patient"))) _
                                                          .Title("Bays").Filterable(False).Width(250)
                                  End Sub) _
                         .Pageable(Function(p) p.PageSizes(True)) _
                         .Sortable() _
                         .Filterable() _
                         .ClientDetailTemplateId("gridDetailtemplate") _
                         .Groupable() _
                         .Events(Sub(e) e.DataBound("dataBound")) _
                         .DataSource(Sub(d)
                                         d.Ajax() _
                                                         .Read(Function(r) r.Action("GetBays", "Patient").Data("searchCriteria")) _
                                                         .PageSize(20) _
                                                         .Model(Sub(m)
                                                                    m.Id(Function(p) p.PatientId)
                                                                End Sub)
                                     End Sub) _
                     .Render()

                End Code

child grid template:

<script id="gridDetailtemplate" type="text/x-kendo-template">
    @(Html.Kendo().Grid(Of PatientEquipmentModel)() _
                                         .Name("patientEquipmentGrid_#=PatientId#") _
                                         .Columns(Sub(c)
                                                      c.Select().Width(50)
                                                      c.Bound(Function(p) p.EquipmentType).Title("Equipment Type").Width("120")
                                                      c.Bound(Function(p) p.EquipmentModel).Title("Equipment Model").Width("120")
                                                      c.Bound(Function(p) p.EquipmentName).Title("Equipment Name").Width("120")
                                                      c.Bound(Function(p) p.RENNo).Title("REN No").Width("120")
                                                      c.Bound(Function(p) p.SAIDNo).Title("SAID No").Width("120")
                                                      c.Bound(Function(p) p.SerialNo).Title("Serial No").Width("120")
                                                  End Sub) _
                                                  .Events(Sub(e) e.Change("onSelect")) _
                                                 .DataSource(Sub(d)
                                                                 d.Ajax() _
                                                                 .Read(Function(r) r.Action("GetPatientEquipments", "Patient", New With {.patientid = "#=PatientId#"})) _
                                                                 .Model(Sub(m)
                                                                            m.Id(Function(p) p.EquipmentId)
                                                                        End Sub) _
                                                                 .PageSize(20)
                                                             End Sub) _
                                                 .ToClientTemplate())
</script>

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 30 Sep 2020, 01:01 PM

Hello Mittal,

To get the dataItem for each selected row:

- In the change event handler, get and save the rows in a variable by using the select method.

- Loop through the rows by using each jQuery method.

- Get every row data by using the dataItem method.

function onSelect(e) {
            var rows = e.sender.select();
            var idArr = [];
            rows.each(function(e) {
                var grid = $("#grid").data("kendoGrid");
                var dataItem = grid.dataItem(this);
              	idArr.push(dataItem.EquipmentId);
            })
          console.log(idArr);
        };

Let me know if this helps.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Mittal
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Share this question
or