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

Customize paging for Grid

Hi, I am trying to customize paging element of the Grid. I found some limited documentation on how to do it with templates https://ej2.syncfusion.com/aspnetmvc/documentation/grid/paging/#template. I attached 3 images - Grid pager.jpg is the default pager in EJS Grid, Current pager.jpg and Current pager (filtered data).jpgis what I want it to look like. The main differences are:
  • I want to move page selector to the right and items info to the left;
  • I want to show only Go to previous page button and Go to next page button, but not Go to first page and Go to last page buttons;
  • I want to display the last page as number, e.g. Previous, 1, 2, 3, 4, 5, ... , 33, Next; not Previous, 1, 2, 3, 4, 5, ..., Next;
  • instead of 1 of 11 pages (101 items) I want to display Showing 1 to 10 of 101 entries text to the left;
  • when items are filtered in the Grid instead of 1 of 1 pages (5 items) I want to display Showing 1 to 5 of 5 entries (filtered from 101 total entries)
 Please let me know if it can be done using templates functionality.


Attachment: Pager_7e1de9c.7z

2 Replies

PS Pavithra Subramaniyam Syncfusion Team June 3, 2019 12:53 AM

Hi Egor, 

Thanks for contacting Syncfusion support. 

We have validated your requirements and logged the task to create the custom sample with all of these queries. Currently we are working on this custom sample and we will provide the sample on June 06, 2019. Until then we appreciate your patience.  
 
Regards, 
Pavithra S. 



HJ Hariharan J V Syncfusion Team June 6, 2019 08:46 AM

Hi Egor, 

Thanks for the patience. 

We have created the custom sample with all of your requirements and you can find that sample from the below link, 


In this sample we have rendered the new pager control in Grid by using the pager template and performed the paging in Grid action manually while click the pager buttons. 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).AllowFiltering(true).AllowPaging(true).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("100").Add(); 
    col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add(); 
    col.Field("Freight").HeaderText("Freight").Format("C2").Width("120").Add(); 
    col.Field("ShipCity").HeaderText("Ship City").Width("150").Add(); 
}).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).PageSettings(page => { page.Template("#template"); }).ActionComplete("actionComplete").DataBound("dataBind").Render() 
 
<script id="template" type="text/x-template"> 
    <div class="e-pagertemplate"> 
        <table> 
            <tr> 
                <td style="padding-right: 680px"> 
                    <div id="totalPages" class="e-pagertemplatemessage"> 
                        <span class="e-pagenomsg">${currentPage} to ${pageSize} of ${totalRecordsCount} entries</span>  @*Change the pager message based on your requirement*@ 
                    </div> 
                </td> 
                <td> 
                    <div id="Pager"></div> 
                </td> 
            </tr> 
        </table> 
    </div> 
</script> 
 
<script> 
    var temp = false; 
    var filtering = false; 
    function updateTemplate() { 
        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0] // Grid instance 
        var totalRecordsC = grid.pagerModule.pagerObj.totalRecordsCount; 
        var pageS = grid.pagerModule.pagerObj.pageSize; 
        var currentPage = grid.pagerModule.pagerObj.currentPage; 
        var totalPages = grid.pagerModule.pagerObj.totalPages; 
        // Created the new pager control based on the Grid page settings 
        var pager = new ej.grids.Pager({ 
            totalRecordsCount: totalRecordsC, 
            pageSize: pageS, 
            currentPage: currentPage, 
            pageCount: 5 
        }); 
        pager.appendTo('#Pager'); 
        if (filtering) { 
            filtering = false; 
            // Changed the pager message based on the filted dialog 
            document.getElementById('totalPages').children[0].textContent = document.getElementById('totalPages').children[0].textContent + " (filtered from " + grid.dataSource.length + " total entries)"; 
        } 
        var pagerEle = pager.element.querySelector('.e-link.e-numericitem'); 
        if (!temp) { 
            // created the last page number button and apped it in after the next page button 
            var clone = ej.base.createElement('a', { attrs: { class: "e-link e-numericitem dummy e-spacing e-pager-default", "role": "link", "aria-label": "Goto Page " + totalPages, "rel='nofollow' href": "javascript:void(0);", "name": "Goto page" + totalPages, "tabIndex": "-1" } }); 
            clone.text = totalPages; 
            pager.element.querySelector('.e-np ').parentElement.after(clone); 
        } 
        // hide the default Grid pager message 
        pager.pagerMessageModule.pageNoMsgElem.style.display = "none"; 
        pager.pagerMessageModule.pageCountMsgElem.style.display = "none" 
    }; 
    var flag = true; 
    function dataBind() { 
        if (flag) { 
            flag = false; 
            updateTemplate(); 
        } 
    } 
    function actionComplete(args) { 
        if (args.requestType === 'paging') { 
            updateTemplate(); 
        } 
        if (args.requestType == "filtering") { 
            filtering = true; 
            updateTemplate(); 
        } 
    } 
    document.addEventListener('click', function (e) { 
        if (e.target.classList.contains('e-pager-default') || e.target.classList.contains('e-numericitem') || e.target.classList.contains('e-nextprevitemdisabled')) { 
            var pager = document.getElementById('Pager').ej2_instances[0]; 
            var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
            var value = parseInt(e.target.text); 
            if (pager.element.querySelector('.e-np').parentElement.nextElementSibling.classList.contains('e-next')) { 
                temp = false; 
            } 
            if (!isNaN(value) && pager.currentPage != value) { 
                temp = true; 
                grid.goToPage(value);  // perform paging while click the newly rendured last page button 
            } else { 
                grid.goToPage(pager.currentPage); // perform paging in Grid based on selected value from the pager  
            } 
        } 
    }) 
</script> 
 
<style> 
    .e-grid .e-gridpager .e-first, .e-grid .e-gridpager .e-last { 
        display: none; /*Hidden the go to first and go to last page buttons from the pager*/ 
    } 
</style> 

Regards, 
Hariharan 


Loader.
Live Chat Icon For mobile
Up arrow icon