Get Selected Detail Row

3 posts, 0 answers
  1. Travis
    Travis avatar
    4 posts
    Member since:
    Oct 2013

    Posted 11 Feb 2015 Link to this post

    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. Travis
    Travis avatar
    4 posts
    Member since:
    Oct 2013

    Posted 12 Feb 2015 Link to this post

    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);
              });
  3. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 13 Feb 2015 Link to this post

    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.

     
Back to Top