This is a migrated thread and some comments may be shown as answers.

Select KendoGrid cell via JavaScript

2 Answers 392 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Erik
Top achievements
Rank 1
Erik asked on 15 Dec 2017, 04:20 AM

Scenario:

I have a Grid, and a column with text, with inline editing and OnChange event.

User Clicks a cell and the OnChange event it fired

Once clicked, a modal window is opened (Standard Bootstrap)

Question:

How do I update that Cell again from the Modal. How do I pass the ID or context of the Cell down the stack to the Modal Window?

I have seen there is a TR data-uid, but I'm not sure how to get it in the click event or how to select it with the api down the road in the modal.

2 Answers, 1 is accepted

Sort by
0
Erik
Top achievements
Rank 1
answered on 15 Dec 2017, 09:56 PM

Here is a same of my solution. I think this will work.

// Get the Row and Cell information from the Grid.
var grid = $("#31PlusGrid").data("kendoGrid");
var row = this.select().closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = this.select().index();
console.log(rowIdx + '-' + colIdx);
 
//In another code block, this can be cleaned up a little, but the point is doing this at different times. Get the right row by index, then set the field you want to update.
var row = grid.tbody.find(">tr:not(.k-grouping-row)").eq(rowIdx);
console.dir(row);
console.dir(grid.dataItem(row));
grid.dataItem(row).set("Comments", $('#textboxThing').val());

 

Thanks!

0
Stefan
Telerik team
answered on 18 Dec 2017, 12:22 PM
Hello, Erik,

Thank you for sharing the approach with the community.

We can also suggest the following one:

//Outside of the function declare the editedDataItem variable
change: function(e) {
      editedDataItem = this.dataItem(this.select());
      //Open the modal and pass the dataItem
 }
 
//Then when closing the Window use the same dataItem and set its new values

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Erik
Top achievements
Rank 1
Answers by
Erik
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or