Set the next row of kendo grid programmatically - javascript

I have kendo grid and a button. On button click I want to change the grid content from currently selected row to the next row.
How can I achieve using JQuery/Javascript?

I'm not sure if I get you right. Is something like this what you want?
$("#grid").on("click", ".k-button", function() {
var tr = $(this).closest("tr");
var dataItem = grid.dataItem(tr);
var nextDataItem = grid.dataSource.at(($(tr).index() + 1));
if (nextDataItem) {
nextDataItem.Id = dataItem.Id;
nextDataItem.Name = dataItem.Name;
grid.refresh();
}
});
Fiddle.
The event handler must be attached on the grid(#grid) and filtering by the button selector(.k-button in this case) because when the method .refresh() is called, it recreates the table content removing the old buttons and their events.

Related

How do I swap cells using two Onclick Events in Javascript

I am trying to swap two cells using two separate click events in javascript. The problem is that the values stored by the first click event is overwritten by the second click event, and the console shows me that the StringAdjacent value stored for the second click event has been overwritten. This is my code:
//Listen to a Set of Click Events to Swap Cells
document.getElementById('board').addEventListener("click", function(e){
click1ID = event.target.id;
click1Class = event.target.className;
stringAdjacency1 = click1ID.replace('cell','')
console.log(stringAdjacency1);
document.getElementById('board').addEventListener("click", function(e){
click2ID = event.target.id;
click2Class = event.target.className;
stringAdjacency2 = click2ID.replace('cell','')
console.log(stringAdjacency2);
});
console.log(stringAdjacency1, stringAdjacency2);
});
function swapIds(click1ID, click1Class, click2ID, click2Class) {
//Are cells adjacent? If so, swap Cells
//Check the winning combinations to see if there's a new match;
//Swap cells;
});
Please help! Thank you.
You are adding a click event listener, which when fired by clicking the first cell causes another click event listener to be added. So when you click the second cell, it will fire the first event listener (overwriting the value), plus the second listener you added after the first one.
You only need to register a single listener who's function can handle the logic:
Something like this should work (didn't test):
var firstCell = null;
document.getElementById('board').addEventListener("click", function(e){
if(!firstCell) {
firstCell = e.target;
} else {
var secondCell = e.target;
// do whatever logic you want
// reset first cell
firstCell = null;
}
});
This will set firstCell to be the first cell clicked, then the second click it will no longer be null, so it will go into the else condition and you can do whatever you want. Then you'll reset firstCell so the entire interaction can be repeated.

DOM: Delete newly created 'article' element with newly created delete button within onclick event?

I have one section element that contains one article element. Also, I have one input button with 'onclick' event. Whenever this event fired, a new article element appended to the section element with unique id.
The newArticle element contains a label, text box and a delete button. All these three elements get created within the on-click event.
document.getElementById("addRow").onclick = function () {
var newCustomerlbl = document.createElement("label");
newCustomerlbl.innerHTML = "Cutomer Name: ";
var newCustomertxt = document.createElement("input");
newCustomertxt.setAttribute("type", "text");
var delBtn = document.createElement("input");
delBtn.setAttribute("type", "button");
delBtn.setAttribute("value", "Delete");
delBtn.setAttribute("id", "btnDelete");
var newArticle = document.createElement("article");
newArticle.appendChild(newCustomerlbl);
newArticle.appendChild(newCustomertxt);
newArticle.appendChild(delBtn);
var customerSection = document.getElementById("customerRecords");
var customerArticles = customerSection.getElementsByTagName("article");
for (var i = 0; i < customerArticles.length; i++) {
var lastDigit = i + 1;
var newArticleValue = "article" + lastDigit;
newArticle.setAttribute("id", newArticleValue);
}
customerSection.appendChild(newArticle);
}
Now what I want is whenever user click upon the newly created appended delete button, only that particular article get deleted without effecting the rest of articles.
Here is the my jsFiddle code.
If you don't want to use jQuery you can add event listeners to your buttons:
delBtn.addEventListener('click', function () {
this.parentElement.remove();
}, false);
https://jsfiddle.net/3nq1v5e1/
You need to bind an event listener on the newly created delete button. Your example code about using $(this) suggest that you are using JQuery, but then again in the rest of the code you are not using any JQuery?
If you are using JQuery, things get real simple, just add something like
$(document).on('click','.btnDelete', function(){
$(this).closest('article').remove();
});
(and remember to give the deletebutton a CLASS rather than ID, as there will be multiple delete buttons).
If you are NOT using JQuery, you need to add the event listener EVERY TIME a new delete button is created
newArticle.appendChild(delBtn);
delBtn.onclick = function(.....
etc.

Select programmatically Kendo grid row

I found posts with similar titles but I still cannot resolve my issue. Definitely I am doing something wrong.
In Kendo grid configuration have some function which take context (grid) and read selected row:
change: function (e) {
refresh(this);
}
This is how I configured "change" event.
In function "refresh(grid)" I am getting selected row on following way:
refresh: function (grid) {
var selectedRows = grid.select();
var selectedRow = grid.dataItem(selectedRows[0]);
var id = selectedRow.Id;
}
This approach works perfect when I select grid row manually. But when I select row programatically "selectedRow" variable is null.
I am selecting programatically on following way:
var grid = $("#grid").data("kendoGrid");
var rows = grid.dataSource.data();
var row = rows[rows.length - 1];
grid.select(row);
As I sad in above, in previous "refresh(grid)" method variable selectedRow will be null.
Does anybody have some opinion about that? Why is it happened?
Thanks
According to the Grid documentation the "select" method accepts "string" parameter (selector) or jQuery element. That why if you need to correctly select the row you should modify your current code as follows:
var grid = $("#grid").data("kendoGrid");
//if you are using the "pageable" option of the grid
//you should get the visible rows using the .view() method
var models = grid.dataSource.data();
var model = models[models.length - 1];
var lastRowUid = model.uid;
//find the target row element:
var row = grid.table.find("[data-uid=" + lastRowUid + "]");
grid.select(row);

Kendo grid - get current editing row

How do you get the current row that's been edited even when it's not selected? I have a batch enabled Kendo grid that is navigatable. My goal is to manually edit data in a column using the dataItem.set() method. However, when you add a row it does not get selected automatically. Hence, vm.testGrid.dataItem(vm.testGrid.select()) cannot be used.
vm.testGrid.dataSource.get(e.model.get("Id")) gets the newly added row, but if multiple rows were added before saving, it will always get the first added row ("Id" is set to auto increment and is automatically generated by the database server, therefore all newly created rows will initially have 0 before saving).
vm.onEdit = function (e) {
$('input.k-input.k-textbox').blur(function (f) {
//var data = vm.testGrid.dataItem(vm.testGrid.select());
var data = vm.testGrid.dataSource.get(e.model.get("Id")); // will always get the firstly added row
data.set("LookupCol", "1000");
}
});
Is there a better solution to get the row that's been currently edited? Or is there a better way to edit the current row?
The following will give you the data item associated with the current cell:
var dataItem = grid.dataItem(grid.current().closest("tr"));
// You can then set properties as you want.
dataItem.set("field1", "foo");
dataItem.set("field2", "bar");
I used the JQuery closest() function:
vm.onEdit = function (e) {
$('input.k-input.k-textbox').blur(function (f) {
var data = vm.testGrid.dataItem($(e.container).closest("tr"));
data.set("LookupCol", "1000");
}
});
You can also write an extension for the grid, e.g. like this
// extend the grid
kendo.ui.Grid.fn.getCurrentDataItem = function() {
var that = this, current = that.current(), dataItem = null;
if (current) {
dataItem = that.dataItem(current.closest('tr'));
}
return dataItem;
}
JSFiddle example

How to pass an attribute to the function hover?

I have a table which is populated taking data from an array of contacts. I need to pass to the function hover one of each contact data (your image). How could he?
Here is the code of the dynamic creation of each row.
What would have to put behind tr, to capture it on hover?
for(var i in tbContactos)
{
var contacto = JSON.parse(tbContactos[i]);
$("#tblList tbody").append("<tr alt="+contacto.Imagen+">");
.....
.....
$("#tblList").hover(function(event){
var src = $(this).attr("alt");
............
............
To attach hover event you can use .on(), see below code -
$("#tblList tbody").on("mouseenter","tr",function(){
// do stuff for mouse enter event
var trAttr = $(this).attr('alt');
}).on("mouseleave","tr",function(){
// do stuff for mouse leave event
var trAttr = $(this).attr('alt');
});
try this:
$("#tblList tbody").append("<tr onMouseOver='test(this)' alt="+contacto.Imagen+">");
function test(row){
//here you will get the entire row.
row.getElementsByTagName("td")//will return an array of columns within the row
}

Categories

Resources