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

Kendo Grid Select All Issue

10 Answers 1939 Views

Grid

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

10 Answers, 1 is accepted

answered on 15 Jun 2018, 10:05 AM

Hi Preslav,

The above link which you shared is one time getting the data and displayed but our scenario is to get the data by pagewise means if i have 50 records first time it will display 1 to 10 and if we change the page then it will get 11-20 records .....

.Sorry we could not create a sample data but we can explain the scenario by sending the .cstml file and controllerclass .cs file .Please find the attached file.
Issue:
When i click on select all checkbox in grid it calls the controller method GetLeadCampaignAssignments (suppose i have 200 records per page 10 records)I was able to select only current active page records only when i navigate to second page again it calls controller method GetLeadCampaignAssignments where i get 11-20 records which are not selected.I need to select all the records across all pages in the grid when i check select all checkbox .

Hope you understand the scenario ,Kindly help us in this regard
Thanks & Regards,
Sampath

answered on 15 Jun 2018, 10:05 AM

topreslav.zip

Hi Preslav,

Hope you understand the scenario ,Kindly help us in this regard
Thanks & Regards,
Sampath

answered on 19 Jun 2018, 05:14 PM

Hello Sampath,

Thank you for elaborating on the scenario. The approach from my first post is not working because, in this case, the Grid is using server paging.

Having said that, what I could suggest is directly manipulating the internal "_selectedIds" collection of the Grid. For example, I used the "Checkbox selection" demos as a base:

https://demos.telerik.com/aspnet-mvc/grid/checkbox-selection

Now, the code looks like:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()

.Name("Grid")

.Columns(columns => {

columns.Select().Width(50);

columns.Bound(p => p.ProductName);

columns.Bound(p => p.UnitPrice).Width(140);

columns.Bound(p => p.UnitsInStock).Width(140);

columns.Bound(p => p.Discontinued).Width(100);

})

.Pageable()

.Sortable()

.Events(ev=>ev.Change("onChange"))

.PersistSelection()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.ProductID))

.Read(read => read.Action("Selection_Read", "Grid"))

)

<script>

$(document).ready(function () {

var grid = $("#Grid").data("kendoGrid");

grid.thead.on("click", ".k-checkbox", onClick);

});

function onChange(arg) {

kendoConsole.log("The selected product ids are: [" + this.selectedKeyNames().join(", ") + "]");

}

function onClick(e) {

var grid = $("#Grid").data("kendoGrid");

var total = grid.dataSource.total();

var selected = $("#Grid").data("kendoGrid").select().length;

var pageSize = grid.dataSource.pageSize();

if (selected === pageSize) {

grid._selectedIds = {};

} else {

for (var i = 1; i <= total; i++) {

grid._selectedIds[i] = true;

}

};

</script>

<div class="box wide">

<h4>Console log</h4>

<div class="console"></div>

</div>

<style>

.console div {

height: 3.3em;

}

</style>

I hope this helps.

Regards,
Preslav
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.

answered on 21 Jun 2018, 01:42 PM

TelerikMvcApp111.zip

Hello Sampath,

I tested the demo with the highlighted code again, and it seems everything is okay on my side:

https://www.screencast.com/t/IwvDOxUwm

Additionally, for your convenience, I am attaching a sample runnable project that demonstrates the same code in action.

Regards,
Preslav
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.

answered on 27 Jun 2018, 08:40 AM

Hello,

There were some issues with the attached project (the name of the grid and the missing ID field in the DataSource, which is mandatory for persisting the selection). Here is the correct code:

@(Html.Kendo().Grid<TelerikMvcApp111.Models.OrderViewModel>()

.Name("grid")

.Columns(columns =>

{

columns.Select().Width(50);

columns.Bound(p => p.OrderID).Filterable(false);

columns.Bound(p => p.Freight);

columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");

columns.Bound(p => p.ShipName);

columns.Bound(p => p.ShipCity);

})

.Pageable()

.Sortable()

.Scrollable()

.PersistSelection()

.Filterable()

.HtmlAttributes(new { style = "height:550px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("Orders_Read", "Grid"))

.Model(m=>m.Id("OrderID"))

)

<script>

$(document).ready(function () {

var grid = $("#grid").data("kendoGrid");

grid.thead.on("click", ".k-checkbox", onClick);

});

function onClick(e) {

console.log("test")

var grid = $("#grid").data("kendoGrid");

var total = grid.dataSource.total();

var selected = $("#grid").data("kendoGrid").select().length;

var pageSize = grid.dataSource.pageSize();

if (selected === pageSize) {

grid._selectedIds = {};

} else {

for (var i = 1; i <= total; i++) {

grid._selectedIds[i] = true;

}

};

</script>

Let me know if everything is working correctly on your end.

Regards,
Konstantin Dikov
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.