Search code examples
kendo-uitelerikkendo-gridtelerik-gridkendo-datasource

Kendo Grid doesn't send all checked items


I have a Kendo Grid that has checked box items. I want to check all items and send them to the controller, for export checked data to PDF. But, when I have checked all items, Kendo Grid sends only checked items from the first page of grid, and my report in PDF has only one page. How to get all checked items from Kendo Grid? My code is here:

<div style="text-align:right; font-size: 0.9em;height:28px;position: relative;">

        <span style="float:left;text-align:left;">
            <a href="#" onclick="checkAll();">Check All</a>&nbsp;
            <a href="#" onclick="uncheckAll();">Uncheck All</a>&nbsp;
            <a class="k-button k-button-icontext k-grid-Patient" id="hrefCheckedPatients" href="#" onclick="getChecked();">Export to PDF</a>&nbsp;
            <a href="#" id="lnkPdfDownload" style="display:none;" onclick="$(this).hide();">Download Generated PDF</a>
            <label id="checkedMsg" style="color:red;display:none;"></label>
        </span>
(Html.Kendo().Grid<RunSummary>()
          .Name("CheckedPatients")          
          .DataSource(datasource => datasource
                .Ajax().PageSize(25)        
                .Sort(sort => sort.Add("UniqueId").Ascending())                        
                .Read(read => read.Action("GetRunSummaries", "PatientReport")))
          .Columns(columns =>
              {

                  columns.Bound(c => c.UniqueId).Title(ELSORegistry.Resources.Views.Home.HomeStrings.UniqueId)
                        .ClientTemplate("<input type='checkbox'  class='primaryBox' id='#= UniqueId #'>#= UniqueId #</input>");
                  columns.Bound(c => c.RunNo).Title(SharedStrings.Run);
                  columns.Bound(c => c.Birthdate).Title(SharedStrings.Birthdate).Format("{0:g}").Filterable(true);

                  columns.Bound(c => c.customAge).Title(SharedStrings.Age)
                         .Filterable(
                             filterable => filterable
                                 .UI("AgeFilter")
                                 .Extra(false)
                                 .Operators(operators => operators
                                     .ForString(str => str.Clear().IsEqualTo("Is equal to"))
                                     )

                       );

                  columns.Bound(c => c.TimeOn).Title(PatientStrings.DateOn)
                      .Format("{0:g}")
                      .Filterable(true);
                  columns.Bound(c => c.TimeOff).Title(PatientStrings.DateOff)
                      .Format("{0:g}")
                      .Filterable(true);
                  columns.Bound(c => c.DischargedAlive).Title(PatientStrings.DischargedAlive).Filterable(true).ClientTemplate("#= DischargedAlive ? 'Yes' : 'No' #");
                  columns.Bound(c => c.ShowSubmitted).Title(PatientStrings.Submitted).Filterable(true).ClientTemplate("#= ShowSubmitted ? 'Yes' : 'No' #");
                  columns.Bound(c => c.SupportTypeEnum).Title(PatientStrings.SupportType).Filterable(true);//.ClientTemplate("#= SupportType ? 'Yes' : 'No' #");
              }
          )
          .Pageable(p => p.PageSizes(new[] {10, 25, 50, 100}))
          .Sortable()
          .Filterable( )
          .Events( e => e.FilterMenuInit("FilterMenuFuncWithAge") ) // apply x [closing box] on pop up filter box
          )
 function getChecked() {
        $('#checkedMsg').text('');        
        var ids = new Array();

        $('.primaryBox:checked').map(function (index) {
            ids.push(this.id);
        });        

        if (ids.length == 0) {
            $('#checkedMsg').text('@ELSORegistry.Resources.Views.Patient.PatientStrings.NoPatientsSelected').show();
            $('#hrefCheckedPatients').blur();
            return;
        } else {
            $('#checkedMsg').text('').hide();
            $('#hrefCheckedPatients').blur();

        }

        $.ajax({
            type: "POST",
            url: "/PatientReport/ExportToPDF",
            dataType: "json",
            traditional: true,
            data: { uniqueIds: ids },
            success: function (data) {
                if (data.success) {                    
                    $('#lnkPdfDownload').show();
                    $('#lnkPdfDownload').attr('href', '/PatientReport/DownloadFile' + '?fName=' + data.fName);
                } else {
                    $('#lnkPdfDownload').hide();
                }

            },
            error: function (jqXHR, textStatus, errorThrown) {
                $('#checkedMsg').text('@ELSORegistry.Resources.Views.Patient.PatientStrings.CheckedError').show();
                $('#hrefCheckedPatients').blur();
            }
        });
        }
</script>

Thank you in advance for any help.


Solution

  • We can't get directly all Ids from the kendo grid from all pages. So we have to manually get it from all the pages.

    Please try with the below code snippet.

    <script>
    
        var ids = [];
    
        function checkAll() {
            var dataSource = $("#CheckedPatients").data("kendoGrid").dataSource;
            var filters = dataSource.filter();
            var totalRowCount = parseInt(dataSource.total().toString());
            var totalPages = Math.ceil(totalRowCount / dataSource.pageSize());
            var currentPageSize = $("#CheckedPatients").data("kendoGrid").dataSource.page();
            PageTraverser(dataSource, 1, totalPages,filters, function () {
                $("#CheckedPatients").data("kendoGrid").dataSource.page(currentPageSize);
                alert("You have slected this Ids:- " + ids.join(','));
            });
        }
    
        function PageTraverser(dataSource, targetPage, totalPages,filters, completionFunction) { 
            dataSource.query({
                page: targetPage,
                filter: filters
                pageSize: 1,
            }).then(function () {
                var view = dataSource.view();
                for (var viewItemId = 0; viewItemId < view.length; viewItemId++) {
                    var viewItem = view[viewItemId];
                    ids.push(viewItem.UniqueId); //Please change your field name here
                }
                targetPage++;
                if (targetPage <= totalPages) {
                    PageTraverser(dataSource, targetPage, totalPages, filters, completionFunction);
                } else {
                    completionFunction();
                }
            });
        }
    
    </script>
    

    Let me know if any concern.