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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Unable to set PagerStyle using javascript

Thread ID:





124356 Jun 3,2016 10:54 AM UTC Jun 8,2016 01:39 PM UTC JavaScript 3
Tags: ejGrid
Asked On June 3, 2016 10:54 AM UTC

How to show first, previous, next, last, goto page buttons on the grid page settings ?

Jayaprakash Kamaraj [Syncfusion]
Replied On June 6, 2016 12:29 PM UTC

Hi Dhirendra, 
Thank you for contacting Syncfusion support. 

In Grid, we have an option to render a specific custom template in a grid pager. To render template in pager, set enableTemplates as true and template properties of pageSettings. 

For more reference please refer to the below Help document and sample. 
Help document for: 


Jayaprakash K. 

Prashant Prasad
Replied On June 7, 2016 01:25 PM UTC

I have tried with pager template but the "complete" event is not occurred. Also if filter is applied then the pager is not working.  Please check the attached sample:

<script type="text/x-jsrender" id="template">
    <div class="e-pagercontainer">
        <div class="e-first e-icon e-mediaback e-firstpagedisabled e-disable" title="Go to first page"></div><div class="e-prev e-icon e-arrowheadleft-2x e-prevpagedisabled e-disable" style="border-right:none" title="Go to previous page"></div>
    <div class="e-pagercontainer" style="border-radius:0px">
        <input id="currentPage" class="e-pagercontainer" type="text" style="text-align:center; margin:0px;border:none;width:32px;height:23px" />
    <div id="totalPages" class="e-pagercontainer" style="margin-left:2px;margin-bottom:5px;border:none">
    <div class="e-pagercontainer">
        <div class="e-nextpage e-icon e-arrowheadright-2x e-default" title="Go to next page"></div><div class="e-lastpage e-icon e-mediaforward e-default" title="Go to last page"></div>

$(function () {
            var dataManger = ej.DataManager({ url: "http://localhost:52679/Grid/GetData", adaptor: "UrlAdaptor" });

                dataSource: dataManger,
                allowPaging: true,
                enableAltRow: true,
                enablePersistence: false,
                allowSorting: true,
                allowFiltering: true,
                filterSettings: { filterType: "menu"},
                actionComplete: 'complete',
                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch" },
                pageSettings: { enableTemplates: true, template: "#template", showDefaults: false, showPagerInformation: false },
                allowTextWrap: true,
                allowGrouping: true,
                groupSettings: { showToggleButton: true, showUngroupButton: true },
                columns: [
                            { headerText: "", template: true, templateID: "#AttachmentcolumnTemplate", textAlign: "center", width: 30 },
                            { headerText: "", template: true, templateID: "#viewDetailscolumnTemplate", textAlign: "center", width: 30 },
                            { field: "UNIQUESRL", headerText: "UNIQUESRL", textAlign: ej.TextAlign.Center, visible: false, isPrimaryKey: true, editType: ej.Grid.EditingType.Numeric },
                            { field: "EMPID", headerText: "Employee ID", textAlign: ej.TextAlign.Right },
                            { field: "EMPNAME", headerText: "Employee Name" },
                            { field: "EMPDOJ", headerText: "Date of Joining", format: "{0:MM/dd/yyyy hh:mm:ss tt}", type: "date", editType: ej.Grid.EditingType.DateTimePicker },//textAlign: ej.TextAlign.Right, width: 75, format: "{0:C}"
                            { field: "EMPSAL", headerText: "Employee Salary", format: "{0:c3}", editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 3 } },
                            { field: "Permanent", headerText: "Permanent", editType: ej.Grid.EditingType.Boolean, visible: true, displayAsCheckBox: true, EnableTriState: true },
                showSummary: true,
                summaryRows: [{
                    title: " Sum",
                    summaryColumns: [{
                        summaryType: ej.Grid.SummaryType.Sum,
                        displayColumn: "EMPSAL",
                        dataMember: "EMPSAL",
                        format: "{0:C2}"

            $("#currentPage").keydown(function (e) {
                var gridObj = $("#Grid").data("ejGrid");
                var val = parseInt($("#currentPage").val());
                if (e.keyCode == 13) {
                    if (val > gridObj.model.pageSettings.totalPages)
                        val = gridObj.model.pageSettings.totalPages;
                    if (val <= 0)
                        val = 1;
                    return false;

        function complete(args) {
            $("#totalPages").find('span').text('of ' + this.model.pageSettings.totalPages);
            if (this.initialRender)
            $(".e-pagercontainer:first").css('border-style', 'none');
            if (args.requestType == 'paging') {
                if (this.model.pageSettings.currentPage == this.model.pageSettings.totalPages) {
                else {
                if (this.model.pageSettings.currentPage == 1) {
                    this.element.find('.e-prevpage').addClass('e-prevpagedisabled e-disable').removeClass('e-prevpage');
                    this.element.find('.e-firstpage').addClass('e-firstpagedisabled e-disable').removeClass('e-firstpage');
                else {
                    this.element.find('.e-prevpagedisabled').addClass('e-prevpage').removeClass('e-prevpagedisabled e-disable');
                    this.element.find('.e-firstpagedisabled').addClass('e-firstpage').removeClass('e-firstpagedisabled e-disable');

Jayaprakash Kamaraj [Syncfusion]
Replied On June 8, 2016 01:39 PM UTC

Hi Dhirendra, 

Query1: I have tried with pager template but the "complete" event is not occurred. 

We have created a sample with your code example but we were unable to reproduce the issue at our end.  

Please share the following information to find the cause of the issue.  
1.       Is there any script error or exception thrown in your project? If so, attach a screenshot for your stack trace.    
2.       Essential studio and browser version details. 
3.       Did you facing the issue in initial rendering or any actions performed in Grid ?  
4.       Share the video to show the issue 
5.       An issue reproducing sample if possible or replicate the issue in attached sample. 
Query2: Also if filter is applied then the pager is not working 
We suspect that you are facing the issue in below scenario,  
Issue: After filtering the grid pager next and last buttons enabled when only one page is present . To overcome this problem we suggest you to use below code example and sample. 
function complete(args) { 
            if (args.requestType == 'paging' || args.requestType == 'filtering') { 


Jayaprakash K. 


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