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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customize paging for Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

144964 May 30,2019 03:59 PM UTC Jun 6,2019 01:46 PM UTC ASP.NET MVC - EJ 2 2
loading
Tags: Grid
Egor Ilin
Asked On May 30, 2019 03:59 PM UTC

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 [Syncfusion]
Replied On June 3, 2019 05:53 AM UTC

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 [Syncfusion]
Replied On June 6, 2019 01:46 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon