Customize paging for Grid

[Egor Ilin]

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

[Pavithra Subramaniyam]

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. 

[Hariharan J V]

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, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Grid1075226936.zip 

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