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

Kendo Grid Select All Issue

10 Answers 599 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sampathkumar
Top achievements
Rank 1
Sampathkumar asked on 11 Jun 2018, 08:01 AM

Hi ,

I was using kendo grid to display the rows in page wise(1-100 records) but when clicked on select all checkbox which selects only the first page. Please help me to achieve the select all functionality in MVC.

Thanks & Regards,

Sampath

10 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 12 Jun 2018, 09:29 AM
Hello Sampath,

This behavior could be achieved with JavaScript. Please check the JavaScript code from this KB article:
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.
0
Sampathkumar
Top achievements
Rank 1
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

0
Sampathkumar
Top achievements
Rank 1
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

0
Preslav
Telerik team
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:
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.
0
Sampathkumar
Top achievements
Rank 1
answered on 20 Jun 2018, 06:38 AM

Hello Preslav,

Thanks for the Reply!

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

I had still same issue unable to select all records.In the above example we had 77 records in 8 pages with 10 records per page if i select checkall in page1 all the records in all the pages should be checked/selected that is not happening with the above example.

Please help me to achieve.

Thanks & Regards,

Sampath

 

 

0
Preslav
Telerik team
answered on 20 Jun 2018, 03:30 PM
Hello Sampath,

Did you add the highlighted code from my last reply to the discussed demo?

I look forward to your reply.


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.
0
Sampathkumar
Top achievements
Rank 1
answered on 21 Jun 2018, 09:53 AM

Hi Preslav,

Thanks for the Reply!

I added the highlighted code still had the same issue ,if possible you can give a try by just copying the highlighted code on a demo sample.Please just don't send the code which doesn't work ,implement on demo if it works let me know by sharing the code.Kindly do the needful .

Thanks & Regards,

Sampath

 

0
Preslav
Telerik team
answered on 21 Jun 2018, 01:42 PM
Hello Sampath,

I tested the demo with the highlighted code again, and it seems everything is okay on my side:
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.
0
Sampathkumar
Top achievements
Rank 1
answered on 25 Jun 2018, 02:07 PM

Hi Preslav,

Thanks for the Reply!

The provided sample is working fine but one more issue we have with the sample:

1. When we clicked on select all check box all the records in all pages are selected but if i unchecked some records in page 2  its not retaining its status again when we shift from page 2 to page 1 all are checked 

Kindly check in the sample provided .Actually it should not change the status of unchecked one.Please help me in this regard.

Thanks & Regards,

Sampath

 

0
Konstantin Dikov
Telerik team
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.
Tags
Grid
Asked by
Sampathkumar
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Sampathkumar
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or