Get Selected Detail Row

[Travis]

So Here is the situation:

I am currently initializing a grid with details on the client side.  Then I am using a row template on both the regular grid and detail grid to allow check boxes.  I have it where a user checks the top grid check box, it will "select" that detail row.  The issue that I am having is getting the data of that row, if that makes sense.  It doesn't appear this works:

var grid = $("#copyHierarchyGrid").data('kendoGrid');
var allSelected = grid.select();

Here is the code:

Grid:

var element = $("#copyHierarchyGrid").kendoGrid({
                        dataSource: {
                            type: "jsonp",
                            transport: {
                                read: '/AdministerRates/GetCombinedRatesToCopy?collection=' + sCollection
                            },
                            pageSize: 6,
                            serverPaging: false,
                            serverSorting: false
                        },
                        scrollable: false,
                        height: 'auto',
                        sortable: false,
                        pageable: false,
                        detailInit: detailInit,
                        selectable: "multiple",
                        dataBound: function () {
                            this.expandRow(this.tbody.find("tr.k-master-row"));
                        },
                        columns: [
                            {
                                field: "",
                                title: "Select All",
                                width: "75px"
                            },
                            {
                                field: "ProductTypeName",
                                title: "Product Type",
                                width: "auto"
                            }
                        ]
                       , rowTemplate: kendo.template($("#rowTemplate").html())
                    }).data('kendoGrid');

Row Templates:

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr data-uid="#: uid #" class="assignment-table-row1 k-master-row">
        <td class="k-hierarchy-cell"><a class="k-icon k-plus" href="\\#" tabindex="-1"></a></td>
        <td class="photo">
            <input type="checkbox" class="checkParent" onchange="javascript:testing('#: ProductTypeName#', this)" />
        </td>
        <td>#:ProductTypeName#</td>

    </tr>
</script>
<script id="detailRowTemplate" type="text/x-kendo-tmpl">

    <tr data-uid="#: uid #" id="#: uid #">
        <td>
            <input type="checkbox" class="checkChild" onchange="javascript:testing('#: SourceProductId#')" />
        </td>
        <td>#:SourceProductName#</td>
        <td>#:SourceStartDate#</td>
        <td>#:SourceEndDate#</td>
        <td>#:TargetProductName#</td>
        <td>#:TargetStartDate#</td>
        <td>#:TargetEndDate#</td>

    </tr>
</script>

function detailInit(e) {
       debugger
       $("<div/>").appendTo(e.detailCell).kendoGrid({
           dataSource: e.data.ProductDetails,
               scrollable: true,
               sortable: false,
               pageable: false,
               columns: [

                   { field: "SourceProductId", title: "Select Rate", },
                   { field: "SourceProductName" },
                   { field: "SourceStartDate" },
                   { field: "SourceEndDate" },
                   { field: "TargetProductName" },
                   { field: "TargetStartDate" },
                   { field: "TargetEndDate" }
               ],
               selectable: "multiple",
               rowTemplate: kendo.template($("#detailRowTemplate").html()),
               editable: true
       });
   }

[Travis]

Figured out the solution to this.

It turns out since it is a grid within a grid, I had to get the closest grid and then grab the data this way.  Not sure if I am clear.  But I got all the check box items and would get the closest row to each one.  Then I would get the closest grid to that row and ended up finding the data information that way.

So here is how I solved this on the JavaScript side:

​

var grid = $("#copyHierarchyGrid").data('kendoGrid');
          var allChildren = $(grid.element[0]).find('input.checkChild:checked')
          $.each(allChildren, function () {
              debugger
              //this gets the closest grid to the detail template row
              var detailRow = $(this).closest('tr');
              var table = $(this).closest('div.k-grid');
              var detailGrid = $(table).data('kendoGrid');
              //var allSelected = detailGrid.select();
              var data1 = detailGrid.dataItem(detailRow);
              //var data = grid.dataItem(trRow);
          });

[Beryl]

I tried this, but I don't have any checkboxes. How do you do this if there are no checkboxes?

[Anton Mironov]

Hi Beryl,

As I reply in a ticket thread in our system, will try my best to assist with achieving the needed result with the custom Edit button. For this case, I will need a runnable sample of your application, or we will set a Live Session Meeting(as you decide). 

Once we have the solution for this custom scenario, will share it with the community as well. Please let me share with the community, the approach that will work when using the default Edit button. It is in a dojo sample, but only the Edit Event handler will be needed which is the same in the MVC project:

• https://dojo.telerik.com/@anton.mironov/uDAjevif

Looking forward to hearing back from you.


Kind Regards,
Anton Mironov

 

[Dimiter Madjarov]

Hello Travis,

The provided sample code is correct. It will retrieve the closest Grid (master or detail) and get the model for the current row.

Regards,
Dimiter Madjarov
Telerik