Get selected items in grid with rows details

[Maciej]

Welcome,
I've got a grid , with grid row details like here:
https://demos.telerik.com/kendo-ui/grid/detailtemplate

also each grid ( "master" and "details") have a checkbox select column like here
https://demos.telerik.com/kendo-ui/grid/checkbox-selection

My grids have local javascript variable (array) which is bound, in master with filter "ParentId == null" , in details "ParentId == e.data.Id".

What I need is to get (for example on "onChange" event) all Id's which are selected. When i use the this.selectedKeyNames() i get Id's only from one specific grid.

[Tsvetina]

Hi Maciej,

To get all selected rows from all Grids, you can access them by k-state-selected class name and then find each row's parent Grid and get the corresponding data item:

var allSelected = $("#grid tr.k-state-selected");
var allSelectedModels = [];
$.each(allSelected, function(e){
  var row = $(this);
  var grid = row.closest(".k-grid").data("kendoGrid");
  var dataItem = grid.dataItem(row);

  allSelectedModels.push(dataItem);

});

Here is a an example using this code:
http://dojo.telerik.com/@tsveti/OWalI

This will work only for the currently loaded selected rows. Row IDs from other pages of the parent Grid can be accessed using the selectedKeyNames() method. Child Grids from other parent Grid pages actually do not exist when the Grid is not on their page, so there are IDs to obtain from them.

I hope this approach works for you.

Regards,
Tsvetina
Progress Telerik

[luis]

extraordinaria la solución, muchas gracias!! i love you!!

[Anton Mironov]

Hi Luis,

If any further assistance is needed - do not hesitate to contact the team.


Kind Regards,
Anton Mironov

[Laboratorio]

ty so much!!!!

[Anton Mironov]

Hi Laboratorio,

If further assistance is needed - let me know and I will try my best to help.

 

Kind Regards,
Anton Mironov

[Laboratorio]

The solution doesn't work when I have a table with pagination, when I send the request to the controller, only the selected rows on the current page travel. :(

[Anton Mironov]

Hi Laboratorio,

Yes, you are totally correct - this behavior is expected. The rows are get and logged by using the "k-state-selected" class when the custom button is clicked. At this moment these are the available rows in the active page.

In order to get all rows selected in all pages - populate them in a global scope collection every time a new row is selected(remove when unselected). The "Change" Event of the Grid could be used for achieving this requirement.

I hope this information helps. Let me know if further assistance or information is needed.

Best Regards,
Anton Mironov

 

[Robert]

I would like to get all line that the column is checked.

 

But cant make it work the controler receive list is always 0

controler

  [HttpPost]

        public JsonResult SaveGridData(List<VwTimeSheetTimeGroup> ListTS)
        {
            // Here i am not implementing all
            // I am interested to show controller is getting data from view
            var count = 0;
            if (ListTS != null)
            {
                count = ListTS.Count;
            }
            //Returns how many records was posted
            return Json(new { count = count });
        }

 

javascipt

function Traiter() {

        var gridData = $("#TimeSheetGroupGrid").data("kendoGrid").dataSource.data();;
        $.ajax({
            type: "POST"
            , url: '@Url.Action("SaveGridData", "TSTransfert")'
            , data: JSON.stringify({ model: gridData })
            , contentType: "application/json"
            , success: function (result) {
                alert(result.count + " record(s) found");
            }
        });
    }

 

 

html file

  @(Html.Kendo().Grid<ProKontrolTimeSheet.Models.VwTimeSheetTimeGroup>

    ()
    .Name("TimeSheetGroupGrid")
    .Reorderable(reorder => reorder.Columns(true))
    .Mobile()
    .Columns(columns =>
    {
        columns.Select().Width(50);
        columns.Bound(p => p.Name).HtmlAttributes(new { @class = "NameId" }).Title("Employés").Width("200px");
        columns.Bound(p => p.DateDebut).Title("du").Format("{0:dd MM yyyy}");
        columns.Bound(p => p.DateFin).Title("au").Format("{0:dd MM yyyy}");
        columns.Bound(p => p.HreTravaille).Title("au travaile");
        columns.Bound(p => p.HreAbsence).Title("absent");
        columns.Bound(p => p.TransfertSage).Title("Transféré sage");
        columns.Bound(p => p.TransferePaie).Title("Transféré paie");

    })
    .Scrollable(s => s.Virtual(true))
    .HtmlAttributes(new { style = "height:350px;" })
    .Sortable(sortable => sortable
    .AllowUnsort(true)
    .SortMode(GridSortMode.MultipleColumn)
    .ShowIndexes(true))
    .Selectable()
    //.Events(events =>
    //{
    //    events.Change("onSelectGrid");
    //})
    .DataSource(dataSource => dataSource
    .Ajax()
    .GroupPaging(false)
    .PageSize(50)
    .Batch(true)
    .AutoSync(true)
    .ServerOperation(false)
    .Read(read => read.Action("TimeSheetPeriod_Read", "TSTransfert").Data("additionalInfo")
    )
    )
    )

[Anton Mironov]

Hi Robert,

Thank you for the code snippets provided.

I dive deeply into your implementation and assume that in the Action method in the Controller, you are expecting a List of the model, while the Ajax request is sending an array. Here is how the Ajax request should be implemented:

    function onClick() {
        var grid = $("#kendogrid").data("kendoGrid");
		
		// Get the dataSource of the Grid
        var dataSource = grid.dataSource;

		// Parse the data of the dataSource to JSON format
        var rows = JSON.stringify({ 'rows': dataSource.data().toJSON() });

		// Building and execution the Ajax request
        $.ajax({
            url: "/Grid/GetGridInfo",
            data: rows,
            dataType: "json",
            type: "POST",
            contentType: 'application/json;'
        });
    }

The fastest route to getting you up and running is if you could provide a runnable, isolated, sample project. Examining this project will let us replicate the issue locally and further troubleshoot it.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov
Progress Telerik