Losing selected rows when changing page

[Zoran]

I am using the Kendo grid to show data. I am also using a function to export the selected rows to excel. The thing is, if I select multiple rows from multiple pages it only export the rows from the last page or the page I am currently at.

 

<div class="container">

    <div class="clearfix">
        @(Html.Kendo().Grid<Projects.Domain.Project>()
                    .Name("projectsGrid")
                    .ToolBar(toolbar => toolbar.Create())
                    .ToolBar(e =>
                    {
                        e.Custom().Text("Export to excel").HtmlAttributes(new { id = "excelButton" });
                    })
                    .Editable(editable => editable.Mode(GridEditMode.PopUp))
                    .Pageable(pageable => pageable.Input(true).Numeric(false))
                    .PersistSelection()
                    .Scrollable()
                    .Sortable()
                    .Events(ev => ev.Change("onChange"))
                    .Filterable()
                    .ColumnMenu()
                    .Groupable(false)
                    .Columns(columns =>
                    {
                        columns.Select().Width(50);
                        columns.Bound(c => c.Id).Title("ID").Hidden();
                        columns.Bound(c => c.ProjectName_EN).Title("ProjectName_EN").Width("250px");
                        columns.Bound(c => c.ProjectName_MK).Title("ProjectName_MK").Width("200px");
                        columns.Bound(c => c.ContractNumber).Title("ContractNumber").Width("200px");
                        columns.Bound(c => c.ContractStartDate).Title("Start date").Width("200px");
                        columns.Bound(c => c.ContractEndDate).Title("End date").Width("200px");
                        columns.Bound(c => c.Description_MK).Title("desc mk").Width("200px");
                        columns.Bound(c => c.Description_EN).Title("desc en").Width("200px");
                        columns.Bound(c => c.Amount).Title("amount").Width("200px");
                        columns.Bound(c => c.CurrencyId).Title("currency id").Width("200px");
                        columns.Bound(c => c.ContractPerson).Title("ContractPerson").Width("200px");
                        columns.Bound(c => c.UrlWiki).Title("UrlWiki").Width("200px");
                        columns.Bound(c => c.StatusId).Title("StatusId").Width("200px");
                        columns.Bound(c => c.Client).Title("Client").Width("200px");
                        columns.Bound(c => c.ProjectManager).Title("proj manager").Width("200px");
                        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.Id))
                    .Create(update => update.Action("EditingPopup_Create", "Projects"))
                    .Read(read => read.Action("GetProjects", "Projects"))
                    .Update(update => update.Action("EditingPopup_Update", "Projects"))
                    .Destroy(update => update.Action("EditingPopup_Destroy", "Projects"))
                    )
        )
    </div>
</div>

My js functions

 

var globalRows;

    var d = new Date();
    var fileName = "Projects - " + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();

    function onChange(arg) {
        var grid = $("#projectsGrid").getKendoGrid();
        var rows = [{
            cells: [
                { value: "Project name MK" },
                { value: "Project name EN" },
                { value: "Contract number" },
                { value: "Contract start date" },
                { value: "Contract end date" },
                { value: "Description MK" },
                { value: "Description EN" },
                { value: "Ammount" },
                { value: "Currency" },
                { value: "Contract person" },
                { value: "Wiki URL" },
                { value: "Project manager" },
                { value: "Status" },
                { value: "Contractor" }
            ]
        }];

        var trs = $("#projectsGrid").find('tr');
        for (var i = 0; i < trs.length; i++) {
            if ($(trs[i]).find(":checkbox").is(":checked")) {
                var dataItem = grid.dataItem(trs[i]);
                console.log("dataItem", dataItem);
                rows.push({
                    cells: [
                        { value: dataItem.ProjectName_MK },
                        { value: dataItem.ProjectName_EN },
                        { value: dataItem.ContractNumber },
                        { value: dataItem.ContractStartDate },
                        { value: dataItem.ContractEndDate },
                        { value: dataItem.Description_MK },
                        { value: dataItem.Description_EN },
                        { value: dataItem.Amount },
                        { value: dataItem.CurrencyName },
                        { value: dataItem.ContractPerson },
                        { value: dataItem.UrlWiki },
                        { value: dataItem.ProjectManagerId },
                        { value: dataItem.StatusId },
                        { value: dataItem.ContractorId }
                    ]
                });
            }
        }
        globalRows = rows;

    }


    $("#projectsGrid").on("click", "#excelButton", function (e) {
        e.preventDefault();  //prevents postback

        var workbook = new kendo.ooxml.Workbook({
            sheets: [
                {
                    columns: [
                        { autoWidth: true },
                        { autoWidth: true }
                    ],
                    title: "Projects",
                    rows: globalRows
                }
            ]
        });
        kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: fileName });
    });

Any pointers or suggestions on how to proceed? How not to lose the rows from the previous pages?

[Nguyen Ngoc]

When you use PersistSelection, the selected data is saved. You can use the code below to get it out.

$("#grid" ).data("kendoGrid").selectedKeyNames()
//Result: 1,2,3,4,5,6...

To export all selected data you can use:

function exportSelectedWithHeaders() 
{
    var grid = $("#grid").data("kendoGrid");
    let selected = grid.select();

    if (selected.length === 0) {
        kendo.alert("Please select cells before exporting.");
        return;
    }

    grid.exportSelectedToExcel(true);
}

//Reference: https://demos.telerik.com/aspnet-core/grid/selection-export

[Zoran]

I think the selectedKeyNames() returns the entire row div. Can't get it to work.

[Petar]

Hi Zoran,

As we already resolved the issue in a private ticket, I am sharing the solution here just in case it can help someone else who wants to implement the same functionality as yours. 

The below code will be executed when the "Export to Excel" button is clicked. The logic will fetch all dataSource data from the remote datasource and then the excelExport method will save the selected rows to Excel.

    $("#excelButton").on('click', function (e) {
        e.preventDefault();
        var grid = $("#grid").getKendoGrid();
        var rows = [{
            cells: [
                { value: "OrderID" },
                { value: "Freight" },
                { value: "OrderDate" },
                { value: "ShipName" },
                { value: "ShipCity" },
            ]
        }];

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Grid/Orders_Read",
                    dataType: "json" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
                }
            },
            schema: {
                data: "Data"
            }
        });

        const selectedRowsID = grid.selectedKeyNames();

            dataSource.fetch().then(function () {
                var gridDS = dataSource.data();

                $.each(gridDS, function (index, item) {
                    if (selectedRowsID.includes((item.OrderID).toString())) {
                        rows.push({
                            cells: [
                                { value: item.OrderID },
                                { value: item.Freight },
                                { value: item.OrderDate },
                                { value: item.ShipName },
                                { value: item.ShipCity },
                            ]
                        })
                    }
                })

                excelExport(rows)
            });
        })

Here is the definition of the excelExport function:

function excelExport(rows) {
    var workbook = new kendo.ooxml.Workbook({
        sheets: [
            {
                columns: [
                    { autoWidth: true },
                    { autoWidth: true },
                    { autoWidth: true },
                    { autoWidth: true },
                    { autoWidth: true }
                ],
                title: "Orders",
                rows: rows
            }
        ]
    });
    kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: "Test.xlsx" });
}

 

Regards,
Petar
Progress Telerik