Recently, I've been experimenting with Kendo UI and encountered a specific issue: The pager for my Kendo grid is not aligning properly at the bottom of the grid. Although I've attempted to adjust the CSS styling for k-grid-pager, the issue persists. Initially, the pager was positioned in the upper left corner until I manually adjusted the top margin to 450px to shift it downwards. I am seeking a dynamic solution that can adapt to the overall height of the grid. Additionally, there seems to be a black border that is a part of the pager, giving me the impression that a certain class is being hidden from me. Here is an image illustrating the current state of my grid:
Below is the CSS code snippet used to customize the grid and its appearance:
#konTable2 {
position: absolute;
left: 150px;
margin-right: -50%;
background-color: rgba(0, 0, 0, 0);
border: 0px solid rbga(0, 0, 0, 0);
}
.k-grid tr th {
border-bottom: 1px solid black;
text-align: center;
height: 25px;
}
.k-grid tr td {
background-color: #494949;
border-bottom: 1px solid black;
text-align: left;
mix-blend-mode: hard-light;
}
.k-grid-pager {
position: relative !important;
float: left !important;
background-color: lime;
width: 900px;
left: 50%;
margin-right: -450px;
margin-top: 450px;
}
Now, let's take a look at the HTML/JavaScript code used to structure the grid:
<div id="konTable2"></div>
<script src="../json/Koncerts.jsonp"></script>
<script type="text/javascript">
var myConcerts = concerts;
$(function() {
var dataSource = new kendo.data.DataSource({
data: myConcerts
});
$('#konTable2').kendoGrid({
columns: [{ title: "Artist", field: "artist", template: "<div class='name' style='width:200px'>#= artist #</div>"},
{title: "Concert", field: "concert", template: "<div class='name' style='width:250px'>#= concert #</div>"},
{title: "Date", field: "date", template: "<div class='date' style='width:150px'>#= date #</div>"},
{title: "City", field: "location.city", template: "<div class='name' style='width:150px'>#= location.city #</div>"},
{title: "State", field: "location.state",template: "<div class='name' style='width:150px'>#= location.state #</div>"}
],
dataSource: {
data: myConcerts,
pageSize: 5
},
selectable: true,
sortable: true,
scrollable: false,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
});
});
</script>
UPDATE
I have tweaked the CSS styling. I am now focused on modifying k-pager-wrap to reposition the pager, resulting in a slight improvement. Here's how it currently appears:
Note: I have removed the vertical translation seen earlier. You can observe how the pager seems determined to remain at the upper left corner of the grid... Additionally, here is the updated relevant CSS:
.k-pager-wrap {
width: 900px;
position: relative;
float: right;
left: 50%;
margin-right: -450px;
mix-blend-mode: normal !important;
}
.k-grid-pager {
width: 900px;
}