Get selected items in grid with rows details

3 Answers 4283 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.
luis
Top achievements
Rank 1
commented on 28 Jan 2022, 06:54 PM

extraordinaria la solución, muchas gracias!! i love you!!
Anton Mironov
Telerik team
commented on 01 Feb 2022, 09:47 AM

Hi Luis,

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


Kind Regards,
Anton Mironov
Laboratorio
Top achievements
Rank 1
commented on 22 Feb 2024, 05:11 PM

ty so much!!!!
Anton Mironov
Telerik team
commented on 26 Feb 2024, 08:09 AM

Hi Laboratorio,

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

 

Kind Regards,
Anton Mironov

Laboratorio
Top achievements
Rank 1
commented on 26 Feb 2024, 12:15 PM

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
Telerik team
commented on 28 Feb 2024, 08:57 AM

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

 

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