Grid Search and Pager on the Top
Environment
Product | Progress® Kendo UI® Grid for jQuery | Created with version | 2020.3.1118 |
Description
I had a request to combine the paging bar and search bar into a single div/row. Can we define an HTML template for the pager like we can for the search? Do you think combining the pager and search box in a single row is even possible?
Solution
Indeed, there is no pager template and the toolbar and pager are separate divs (siblings). I was able to achieve an outcome similar to the one you shared with us with the following steps:
- Pager Settings
-
pageable.position
set totop
-
pageable.responsive
set tofalse
-
-
In the
document.ready
event, get the grid instance and use itsdataBound
event to wrap the pager and toolbar elements with another div. This will give us the chance to control them together in a container and reorder them.var grid = $("#grid").data("kendoGrid"); grid.one("dataBound", function(e){ $(".k-grid-toolbar, .k-grid-pager").wrapAll($("<div class='pager-toolbar-container'/>")) });
<style> .pager-toolbar-container{ display: flex; flex-direction: row; } .k-grid-toolbar{ order: 1; width: 35%; } .k-grid-pager{ order: 2; width: 65%; border-bottom-color:rgba(0, 0, 0, 0.08) } .k-grid .k-grid-search { width: auto; } </style>
<div id="example">
<div id="grid"></div>
<style>
.pager-toolbar-container{
display: flex;
flex-direction: row;
}
.k-grid-toolbar{
order: 1;
width: 35%;
}
.k-grid-pager{
order: 2;
width: 65%;
border-bottom-color:rgba(0, 0, 0, 0.08)
}
.k-grid .k-grid-search {
width: auto;
}
</style>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
height: 400,
filterable: true,
pageable: {
position: "top",
pageSizes: true,
info:false,
buttonCount:4,
responsive:false,
messages: {
itemsPerPage: "/page"
}
},
toolbar: ["search"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
var grid = $("#grid").data("kendoGrid");
grid.one("dataBound", function(e){
$(".k-grid-toolbar, .k-grid-pager").wrapAll($("<div class='pager-toolbar-container'/>"))
})
});
</script>
</div>