Kendo Grid Select All Issue

[Sampathkumar]

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

[Preslav]

Hello Sampath,

This behavior could be achieved with JavaScript. Please check the JavaScript code from this KB article:

• https://docs.telerik.com/kendo-ui/knowledge-base/checkbox-selection-select-all-rows-all-pages

I hope this helps.


Regards,
Preslav
Progress Telerik

[Sampathkumar]

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

[Sampathkumar]

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

[Preslav]

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

[Sampathkumar]

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

 

 

[Preslav]

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

[Sampathkumar]

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

 

[Preslav]

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

[Sampathkumar]

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

 

[Konstantin Dikov]

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