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

Unable to set PagerStyle using javascript

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

3 Replies

JK Jayaprakash Kamaraj Syncfusion Team 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. 

PP Prashant Prasad 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');

JK Jayaprakash Kamaraj Syncfusion Team 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. 

Live Chat Icon For mobile
Up arrow icon