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.
|
@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> |
