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

Getting rows from grid and subgrid

9 Answers 398 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kahl
Top achievements
Rank 1
Kahl asked on 02 Apr 2017, 10:08 AM

 

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");
                                       })
                                    ))
                        )

9 Answers, 1 is accepted

Sort by
0
Accepted
Martin
Telerik team
answered on 04 Apr 2017, 01:49 PM
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.
0
Kahl
Top achievements
Rank 1
answered on 03 May 2017, 10:58 AM

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) {

    }

 

 

0
Martin
Telerik team
answered on 04 May 2017, 08:44 AM
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.
0
Kahl
Top achievements
Rank 1
answered on 07 May 2017, 12:55 AM

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)

0
Konstantin Dikov
Telerik team
answered on 10 May 2017, 06:43 AM
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.
0
Kahl
Top achievements
Rank 1
answered on 11 May 2017, 06:40 AM

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"));

0
Konstantin Dikov
Telerik team
answered on 12 May 2017, 08:34 AM
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.
0
Kahl
Top achievements
Rank 1
answered on 15 May 2017, 07:45 AM

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")

0
Konstantin Dikov
Telerik team
answered on 17 May 2017, 05:52 AM
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.
Tags
Grid
Asked by
Kahl
Top achievements
Rank 1
Answers by
Martin
Telerik team
Kahl
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or