Get selected items in grid with rows details

3 Answers 1605 Views
Grid
Maciej
Top achievements
Rank 1
Maciej asked on 06 Feb 2018, 11:45 AM

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.

3 Answers, 1 is accepted

Sort by
1
Tsvetina
Telerik team
answered on 07 Feb 2018, 03:54 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert
Top achievements
Rank 1
Iron
answered on 28 May 2021, 09:02 PM

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")
    )
    )
    )
0
Anton Mironov
Telerik team
answered on 01 Jun 2021, 12:40 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Maciej
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Robert
Top achievements
Rank 1
Iron
Anton Mironov
Telerik team
Share this question
or