Getting rows from grid and subgrid

10 posts, 1 answers
  1. Kahl
    Kahl avatar
    15 posts
    Member since:
    Nov 2016

    Posted 02 Apr Link to this post

     

    I am wanting to get the data from column 1 on the main grid and the template grid when a checkbox within the template grid is checked.

     

    The grid will hold this type of data.   Each row on the main grid will have 4 rows on the template grid.  When a checkbox is checked I would like to get the \

    data from the main grid row and the template grid row.

     

    Currently I cannot work out what is the main grids row that has been selected and how to get the grid name of the template grid so I can get the data.  The JS I have been playing with is below as well.  This JS is not what I want but close.   I just need to get the info from different grids on selection.

     

    Thanks in advance

     

    function selectColumn(e) {

            
            var grid = $("#siteCriteriaCriteria").data("kendoGrid");
            // Get selected rows
            var sel = $("input:checked", grid.tbody).closest("tr");
            // Get data item for each
            var items = [];
            $.each (sel, function(idx, row) {
                var item = grid.dataItem(row);
                var update = item.name;
                alert(update);
                items.push(item);
            });
            alert ("selected: " + JSON.stringify(items));

    }

     

     

      @(Html.Kendo().Grid<WebSite.Library.Models.SiteCriteria>()
                                         .Name("siteCriteriaCriteria")
                                         .HtmlAttributes(new { style = "height:60vh; " })
                                            .Scrollable()
                                         .Columns(columns =>
                                         {
                                             columns.Bound(p => p.siteId).Title("siteId").Width(50).Hidden();
                                             columns.Bound(p => p.areaId).Title("AreaId").Width(50).Hidden();
                                             columns.Bound(p => p.name).Title("Hazard Area").Width(150);
                                             columns.Template(p => "").HtmlAttributes(new { @class = "templateCell" }).Title("criteria").Width(200)
                                                .ClientTemplate(
                                                    
                                                 Html.Kendo().Grid<WebSite.Library.Models.SiteCriteria>()
                                                       .Name("areaCriteria_#=areaId#")
                                                     
                                                       .Columns(c =>
                                                       {
                                                           c.Bound(e1 => e1.name).Title("Training").Width(150).HeaderHtmlAttributes(new { style = "display:none;" }).HtmlAttributes(new { style = "height: 15px" });
                                                           c.Bound(e1 => e1.areaId).Title("Area").Width(100).Hidden();

                                                           c.Bound(e1 => e1.siteCriteria).Title("Access Criteria").ClientTemplate("<input type='checkbox' #=siteCriteria# '    onchange='requestStartHandler(\"grid\");' />")
                                                                                    .HtmlAttributes(new { style = "height: 15px" }).HeaderHtmlAttributes(new { style = "display:none;" });
                                                       })
                                                       .Events(events => events.DataBound("siteCriteriaCriteria_onDataBound"))
                                                        .DataSource(source1 => source1
                                                       .Custom()
                                                                         .Transport(transport => transport
                                                       .Read(read =>
                                                       {
                                                           read.Url("/Api/SiteInfo/_getTrainingAreas/_si=" + Model.SiteId)
                                                               .DataType("json");
                                                       })


                                                        ))

                                                        .ToClientTemplate().ToHtmlString()

                                                    );
                                             columns.Command(command => { command.Edit(); }).Width(250);

                                         })

                                           .Events(events => events.Save("onSaveCriteria").DataBound("hideEditCommand"))

                                           .NoRecords("No criteria exists.")
                                           .ToolBar(toolbar => toolbar.Create())
                                           .Editable(editable => editable.Mode(GridEditMode.InLine))
                                           .DataSource(source => source
                                           .Custom()
                                            .Schema(schema => schema
                                           .Model(m => m.Id(p => p.siteId)))
                                           .Transport(transport => transport
                                           .Read(read =>
                                           {
                                               read.Url("/Api/SiteInfo/_getPremiseArea/_si=" + Model.SiteId)
                                                   .DataType("json");
                                           })
                                        ))
                            )

  2. Answer
    Martin
    Admin
    Martin avatar
    822 posts

    Posted 04 Apr Link to this post

    Hello,

    If we assume that the selectColumn functionis called when a checkbox is checked, then you can get the checkbox parent row and grid like this:

    function selectColumn(e) {
        var row = $(this).closest("tr");
        var nestedGrid = row.closest(".k-grid.k-widget").data("kendoGrid");
        var dataItem = nestedGrid.dataItem(row)
              
    }

    Once you have the child grid, you can use similar code to get the parent row and grid.

    Regards,
    Martin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Kahl
    Kahl avatar
    15 posts
    Member since:
    Nov 2016

    Posted 03 May in reply to Martin Link to this post

    The checkbox in the clientTempale grid is called by by the below code

    what is happening with the change event on the checkbox in the SubGrid is.

    The row # of the main grid is being obtained, but the value being returned is the ?? row of the subgrid.

     

    Ie:  Selecting the 3rd row on the subgrid on the 2nd row of the main grid, will always return the data from the 3rd row in the subgrid.

     

    What I need is the dataItem row  from the subgrid  and the dataItem row of the main table row associated for the selected checkBox.

    I am still having issues getting the dataItems from associated rows in each grid.

    Thanks

     

     

    ,

     

     .Columns(c =>
                                                       {
                                                           c.Bound(e1 => e1.siteCriteria).Title("Access Criteria").ClientTemplate("<input type='checkbox' #=siteCriteria# '    onchange='requestStartHandlerArea(\"areaCriteria_#=areaId#\");' />")
                                                                                    .HtmlAttributes(new { style = "height: 15px" }).HeaderHtmlAttributes(new { style = "display:none;" });
                                                       })

     

     

    Javascript

     

     function requestStartHandlerArea(gridName) {
          
           

            var grid = $("#" + gridName).data("kendoGrid");
            var myVar = grid.dataItem($("#" + gridName).closest("tr"));
            alert(myVar.name);


          
            
            return function (e) {

        }

     

     

  4. Martin
    Admin
    Martin avatar
    822 posts

    Posted 04 May Link to this post

    Hello,

    Once you have a reference to the parent and detail grid you can use the code bellow to get a reference to the data item of the parent grid. Note that you need closest k-master-row which is a sibling of the k-detail-row

    var parentGrid = $("#siteCriteriaCriteria").data("kendoGrid");
    var detailGrid = $("#" + gridName).data("kendoGrid");
    var parentGridDataItem = parentGrid.dataItem(detailGrid.wrapper.closest(".k-detail-row").prev())

    I hope this helps.

    Regards,
    Martin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Kahl
    Kahl avatar
    15 posts
    Member since:
    Nov 2016

    Posted 06 May in reply to Martin Link to this post

    I still cant seem to get the name item from the parent dataItem, I have tried using k.master-row as well,  No luck. \

    can you please be a bit more precise.

     

    Thanks

     

     

    var parentGrid = $("#siteCriteriaCriteria").data("kendoGrid");
    var detailGrid = $("#" + gridName).data("kendoGrid");
    var parentGridDataItem = parentGrid.dataItem(detailGrid.wrapper.closest(".k-detail-row").prev())
    alert(parentGridDataItem.name)

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2069 posts

    Posted 10 May Link to this post

    Hello Kahl,

    Could you please try the following code instead:
    var parentGrid = $("#siteCriteriaCriteria").data("kendoGrid");
    var detailGrid = $("#" + gridName).data("kendoGrid");
    var parentGridDataItem = parentGrid.dataItem(detailGrid.element.closest("tr"))

    If you still face problems, please debug the above lines and see if you get reference to both Grid instances correctly.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Kahl
    Kahl avatar
    15 posts
    Member since:
    Nov 2016

    Posted 11 May in reply to Konstantin Dikov Link to this post

    Yes that works perfect, Thanks for that  

     

    but now my code to get the internal data is returning the detail row of the row number of the selected parent.

     

    Ie,  I also need to get the detail row selected .

     

    Thanks

       existing code to get the detail dataItem selected .

            var detailGrid = $("#" + gridName).data("kendoGrid");
            var row = detailGrid.dataItem(detailGrid.element.closest("tr"));

  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2069 posts

    Posted 12 May Link to this post

    Hello Kahl,

    If you need to get the dataItem of the selected row in the detail Grid you could use its select method for getting the selected row and then use its dataItem method:

    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Kahl
    Kahl avatar
    15 posts
    Member since:
    Nov 2016

    Posted 15 May in reply to Konstantin Dikov Link to this post

    I have tried using the selected row, see below prior,  but when I check the checkbox within the detailgrids row,there are no selected row.

     

    I have made the grid selectable (.Selectable(selectable => selectable.Mode(GridSelectionMode.Single)))

    and am trying to get the selected rows datitem,   but its undefined,.

    does the checkbox click actuallt select the row,  if not how do I get the  closest row of the grid within a columns datitem row??

    I have tried all sorts and cannot get the actual row in the subgrid.  

     

    The selected

      var detailGrid = $("#" + gridName).data("kendoGrid");

            var selectedItem = detailGrid.dataItem(detailGrid.select());
            if (selectedItem != undefined)
                alert("The Row Is SELECTED");
            else
                alert("NO Row Is SELECTED")

  10. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2069 posts

    Posted 17 May Link to this post

    Hello Kahl,

    If you want to use a checkbox for selecting a row you could use the approach demonstrated in the following HowTo article:
    As for the other questions, please try to create a dojo example to demonstrate the exact scenario that you have and provide detailed information on the requirement. You could also open a regular support ticket and attach a runnable project.


    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top