Rank 2
Iron
Hi,
how can I achieve that when I go through my grid (paging is active), that always the first entry of the respective page is selected, but if a new element is added to the grid, this should be selected? I would be very grateful for an example.
I know how to select the first item of each page (did at in dataBound), but as soon as I add a new item to the grid I don't know how to turn off this default behavior to select the new item.
Thanks in advance
1 Answer, 1 is accepted
Hello, Sterling,
In this Dojo example, you can see that the first row is selected when you add a new item. Could you please let me know if I am missing something?
Looking forward to your reply.
Regards,
Martin
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 2
Iron
Hi Martin,
thanks for the dojo. Theres a little misunderstanding, I hope this explains my problem better.
When you add a new item to the list it will be added to the page you are currently on.
My entries are sorted alphabetically (up to 10,000). If I am on page 1 and add the element "x", I try to switch to the page where "x" is now (for this, I do a grid.refresh() after saving to database).
But if I don't add an element, only scroll through the grid, the first element should always be selected. I don't know how to tell the grid to always select the first element, unless a new one has been added to the list (in which case it should be selected).
I would appreciate if you could update the dojo.
Thanks
Rank 2
Iron
Hi Martin,
I have just solved the problem myself. Thank you anyway for your help. Here is the code, in case someone else has a simliar problem.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/editing">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2022.3.1109/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<div id="addNewBandDiv" style="display:none;">
<div class="demo-section k-content wide">
<table style="display:inline-block;">
<colgroup>
<col style="width:40%;">
<col style="width:60%;">
</colgroup>
<tr>
<td><h4 style="font-weight:bold;text-align:right;">Band Name</h4></td>
<td><input class="k-textbox" id="addNewBand" maxlength="10" size="10"/></td>
</tr>
</table>
</div>
<br><br>
<div>
<button type="button" id="saveBtn" alt="Save" title="Save">Save</button>
</div>
</div>
<div>
<button type="button" onclick="addNew()">Add New Band</button>
</div>
<script>
$(document).ready(function () {
const dataSource = [
{ id: 1, band: "Iron Maiden", song: "Wasted Years", album: "Ed Hunter", members: "Bruce Dickinson, Steve Harris and more" },
{ id: 2, band: "Metallica", song: "Enter Sandman", album: "Metallica", members: "James Headfield, Lars Ulrich and more" },
{ id: 3, band: "Mr. Big", song: "Seven Impossible Days", album: "Japandemonium", members: "Eric Martin, Paul Gilber and more" },
{ id: 4, band: "Rammstein", song: "Zick Zack", album: "Zeit", members: "Till Lindemann, Paul Landers and more" },
{ id: 5, band: "Motörhead", song: "Ace of Spades", album: "Ace of Spades", members: "Lemy Kilmister, Eddie Clark and more" },
{ id: 6, band: "Mötley Crüe", song: "Kickstart my Heart", album: "Dr. Feelgood", members: "Tommy Lee, Nikki Sixx and more" },
{ id: 7, band: "AC/DC", song: "Highway to Hell", album: "Highway to Hell", members: "Angus Young, Dave Evans and more" },
{ id: 8, band: "Led Zeppelin", song: "Stairway to Heaven", album: "Led Zeppelin IV", members: "Robert Plant, Jimmy Page and more" },
{ id: 9, band: "Black Sabbath", song: "Paranoid", album: "Paranoid", members: "Ozzy Osbourne, Ronnie James and more" },
{ id: 10, band: "Guns n' Roses", song: "Knockin' on Heaven's Door", album: "Use your Illusion", members: "Axel Rose, Slash and more" },
];
$("#grid").kendoGrid({
dataSource: {
data: dataSource,
schema: {
model: {
fields: {
id: {type: "integer"},
band: { type: "string" },
song: { type: "string" },
album: { type: "string" },
members: { type: "string" }
}
}
},
sort: { field: "band", dir: "asc" },
pageSize: 5,
},
navigatable: true,
selectable: true,
pageable: true,
columns: [
{ field: "id", title: "ID", width: "130px" },
{ field: "band", title: "Band", width: "130px" },
{ field: "song", title: "Song", width: "130px" },
{ field: "album", title: "Album", width: "130px" },
{ field: "members", title: "Members", width: "130px" }
],
persistSelection: true,
height: 350,
});
});
function addNew() {
var addNewWindow = $("#addNewBandDiv").kendoWindow({
actions: [ "Close" ],
draggable: false,
height: "300px",
width: "500px",
modal: true,
resizable: false,
visible: false
}).data("kendoWindow").center().open();
addNewWindow.title("Add New Band");
$("#addNewBand").val("");
}
$("#saveBtn").kendoButton({
click: function(e){
const grid = $("#grid").data("kendoGrid");
const newBandName = $("#addNewBand").val();
const data = grid.dataSource.data();
const lastItemInList = data[data.length - 1];
grid.dataSource.add({ id: lastItemInList.id + 1, band: newBandName });
$("#addNewBandDiv").data("kendoWindow").close();
selectRow(grid, newBandName);
}
});
function selectRow(grid, newItem){
let dataSource = grid.dataSource,
sort = dataSource.sort() || {},
models = dataSource.data();
let query = new kendo.data.Query(models),
rowNum = 0,
modelToSelect = null;
models = query.sort(sort).data;
for (var i = 0; i < models.length; ++i) {
let model = models[i];
if (model.band == newItem) {
modelToSelect = model;
rowNum = i;
break;
}
}
let currentPageSize = grid.dataSource.pageSize(),
pageWithRow = parseInt((rowNum / currentPageSize)) + 1;
grid.dataSource.page(pageWithRow);
// go to page with row
grid.element.find("tr[data-uid='" + modelToSelect.uid + "']");
// get all items from current page
let pageItems = grid.dataItems();
// get row of item on current page
for (var i = 0; i < pageItems.length; ++i) {
let model = pageItems[i];
if (model.band == newItem) {
modelToSelect = model;
rowNum = i;
break;
}
}
// select item
grid.select(`tr:eq(${rowNum})`);
}
</script>
</body>
</html>