Get row data from editor template? in Kendo UI for jQuery

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

Get row data from editor template?

1 Answer 96 Views

Grid

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

Joseph asked on 28 Sep 2018, 02:01 AM

I'm working on a kendo grid and I'm having some trouble on a use case I feel like should be pretty straight forward but I can't seem to figure out so apologies if I'm missing something obvious. Basically I have a grid that has two dropdowns using editor templates and two number values, looks something like this:

@(Html.Kendo().Grid(Model.gridModel)

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.Type).Width(200).EditorTemplateName("TypeDropDownList");

columns.Bound(c => c.SubType).Width(150).EditorTemplateName("SubTypesDropDownList");

columns.Bound(c => c.ArgOne).Width(50);

columns.Bound(c => c.ArgTwo).Width(50);

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(false)

.ServerOperation(false)

.Model(model =>

{

model.Id(p => new { p.Type, p.SubType });

model.Field(p => p.Type).DefaultValue("Select Type");

model.Field(p => p.SubType).DefaultValue("Select Sub Type");

model.Field(p => p.ArgOne).DefaultValue(0);

model.Field(p => p.ArgTwo).DefaultValue(0);

})

)

I have an event set up on the change event for the drop down but I'm running into some trouble on how I can get the current row's data: I've tried using the closest('tr') but I'm not getting a result back:

function dropDownGridChange(e) {

var gridObject = $("#grid");

var grid = $("#grid").data("kendoGrid");

var dataItem = grid.dataItem($(this).closest('tr')); //returns undefined

...

I even tried putting a cell close event on the grid itself and was going to try and get the row from the UID but I can't seem to pull that value out either:

function onChangeGrid(e) {

var grid = e.sender;

var cell = grid.select();

var row = cell.closest('tr');

var row_uid = row.attr('data-uid'); //returns undefined

...

Is there any way I can get the data out when the dropdown changes or any other way I could update ArgOne & ArgTwo on that change if I'm not going about this the right way? I'm just not sure where I'm going wrong.

1 Answer, 1 is accepted

answered on 01 Oct 2018, 10:48 AM

Hello Joseph,

The context (this keyword) of the change event handler of the drop down editor is the drop down widget itself. In other words you could access the row using the following code:

function dropDownGridChange(e) {

var gridObject = $("#grid");

var grid = $("#grid").data("kendoGrid");

var dataItem = grid.dataItem(this.wrapper.parents('tr')); //returns undefined

...

Furthermore, the Change event of the grid is triggered when the user selects/unselects a row/cell. I noticed that in your configuration Selection is not enabled which means that the Change event of the grid will not trigger.

Regards,
Georgi
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.