We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Filter Records with Total Records in Paging Menu

Hello, 

Currently without any filtered applied on server side datagrid we can see all the records details with pagination details 

so let's say we have 50 records with pageSize = 10 so it will be written over there with 

1 of 5 page (50 items)


Now when we apply filtering and we have 25 records after filter then it will written like 

1 of 3 page (25 items)


Now question is what if i want to show all records and out of that filter records in pager 

so it should be like 

1 of 3 page (25 items / 50 items ) 
so we get idea we have 50 records from that 25th are currently filtered. 


How can we achieve this functionality in asp.net core - datagrid - server side control. 

Thanks.


3 Replies 1 reply marked as answer

VB Vinitha Balasubramanian Syncfusion Team October 20, 2022 02:10 PM UTC

Hi Hiral,


Greetings from Syncfusion support.


Query : Filter Records with Total Records in Paging Menu


From your query, we have customized the default innerHTML content using Grid’s actionComplete event to show all records and out of that filter records in pager. Please refer to the below code example for more information.


<script>

function actionComplete(args) {

  var totalRecords = grid.getDataModule().dataManager.dataSource.json.length;

  var filterRecords;

  if (args.requestType == 'filtering') {

    filterRecords = grid.getFilteredRecords().length;

    grid.element.querySelector('.e-pagecountmsg').innerHTML =

      '(' + filterRecords + ' items / ' + totalRecords + 'items' + ')';

  }

}

</script>


Help documentation : https://ej2.syncfusion.com/documentation/api/grid/#getfilteredrecords

                                        https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete


Please get back to us if you need further assistance.


Regards,

Vinitha Balasubramanian

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.



HI Hiral October 20, 2022 02:19 PM UTC

Thanks for your response. But when i tried to implement your code its showing like this. 

image_4.png



JC Joseph Christ Nithin Issack Syncfusion Team October 27, 2022 07:35 PM UTC

Hi Hiral,


  Thanks for your update.


 
Based on your query, you want to customize the total records message in the pager component when you are filtering the grid. Your requirement can be achieved using the databound and the actionComplete event.


Please refer the below code example.


 

var totalRecords;

  var initial = true;

    function dataBound() {

        if(initial) {

            initial = false;

            totalRecords = grid.pagerModule.pagerObj.totalRecordsCount;

        }

    }

 

    function actionComplete(args) {

        if (args.requestType == 'filtering') {

 

        var filterRecords = grid.pagerModule.pagerObj.totalRecordsCount;

            grid.element.querySelector('.e-pagecountmsg').innerHTML = '(' + filterRecords + ' items / ' + totalRecords + 'items' + ')';

        }

}

 


Please get back to us for further details.


Regards,

Joseph I.


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon