Getting rows from grid and subgrid

[Kahl]

 

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

[Martin]

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

[Akshay]

Hi , 
If I have multiple sub grids that populate with the different Ids like "SubGrid_ParentID" then how do i get all the subgrids that has new rows added or the changed data in the subgrids . Is there a way where i can get all the subgrids data which are changed.
Eg.
Grid 1
SubGrid_1
Grid 2
SubGrid_2
How do i get the data from all the sub grids irrespective of they are opened or closed

[Kahl]

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

    }

 

 

[Martin]

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

[Kahl]

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)

[Konstantin Dikov]

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

[Kahl]

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

[Konstantin Dikov]

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:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-select 
• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

Best Regards,
Konstantin Dikov
Telerik by Progress

[Kahl]

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

[Konstantin Dikov]

Hello Kahl,

If you want to use a checkbox for selecting a row you could use the approach demonstrated in the following HowTo article:

• http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/grid-selection-checkbox

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