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>
<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>
<div id="totalPages" class="e-pagercontainer" style="margin-left:2px;margin-bottom:5px;border:none">
<span></span>
</div>
<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>
</div>
</script>
$(function () {
var dataManger = ej.DataManager({ url: "http://localhost:52679/Grid/GetData", adaptor: "UrlAdaptor" });
$("#Grid").ejGrid({
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;
gridObj.gotoPage(val);
return false;
}
});
});
function complete(args) {
$("#totalPages").find('span').text('of ' + this.model.pageSettings.totalPages);
if (this.initialRender)
$("#currentPage").val(1);
$(".e-pagercontainer:first").css('border-style', 'none');
if (args.requestType == 'paging') {
if (this.model.pageSettings.currentPage == this.model.pageSettings.totalPages) {
this.element.find('.e-nextpage').addClass('e-nextpagedisabled').removeClass('e-nextpage');
this.element.find('.e-lastpage').addClass('e-lastpagedisabled').removeClass('e-lastpage');
}
else {
this.element.find('.e-nextpagedisabled').addClass('e-nextpage').removeClass('e-nextpagedisabled');
this.element.find('.e-lastpagedisabled').addClass('e-lastpage').removeClass('e-lastpagedisabled');
}
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');
}
$("#currentPage").val(this.model.pageSettings.currentPage);
}
}
