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

Get Selected Detail Row

2 Answers 422 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Travis
Top achievements
Rank 1
Travis asked on 11 Feb 2015, 09:41 PM
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
       });
   }











2 Answers, 1 is accepted

Sort by
0
Travis
Top achievements
Rank 1
answered on 12 Feb 2015, 01:22 PM
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
Top achievements
Rank 1
commented on 19 Jul 2021, 08:31 PM

I tried this, but I don't have any checkboxes. How do you do this if there are no checkboxes?
Anton Mironov
Telerik team
commented on 21 Jul 2021, 11:09 AM

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:


Looking forward to hearing back from you.


Kind Regards,
Anton Mironov

 
0
Dimiter Madjarov
Telerik team
answered on 13 Feb 2015, 09:56 AM

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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Travis
Top achievements
Rank 1
Answers by
Travis
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Share this question
or