Grid Editor Widget Issues

[Steve]

Hi,

I need a grid (or maybe another similar tabular display) to show a column of text and a boolean column with a switch widget.

The switch widgets need to be always visible, unlike this example where you need to click the cell to go into edit mode.

I have followed another approach in order to achieve this, but for some reason I don't seem to able to get the grid data item in the switch change handler (rowDataItem is undefined, while grid and gridRow appear to resolve ok).

Assistance is appreciated.

Thanks.

 

[Georgi]

Hello Steven,

Indeed one way to achieve the described behavior is to use a template and bind each row to its corresponding data item as in the second sample. Currently the dataItem is undefined as the grid is rebound when the item is changed. In other words, new tr elements are rendered. A possible workaround would be to get the dataItem using the uid attribute of the row.

e.g.

    function GridSelectionSwitchChanged()
    {
      var grid = $("#gridDiv").data("kendoGrid");
      var gridRow = this.wrapper.closest("tr");
      var rowDataItem = grid.dataSource.getByUid(gridRow.attr('data-uid'))
      console.log("Item: " + rowDataItem.Field1 + " change: IsSelected: " + rowDataItem.IsSelected);
    }

Below you will find a modified version of the provided sample:

• https://dojo.telerik.com/ezOLemOV

 

Regards,
Georgi
Progress Telerik

[Steve]

Hi Georgi.

As I understood it, grid.dataItem() would use the uid attribute on its rendered row to retrieve the data item.

Though the uid's still appears to be present on the tr elements, I was assuming that the kendo.bind binding could be replacing the grid's own binding to the elements it rendered, and so, grid.dataItem() wouldn't be able to resolve anything.

From your description, it sounds like the tr found by the SwitchChanged handler is the old tr - and at that time (or just before) has been replaced by the re-rendering of the grid. The old tr might still exist as an object, but is removed from the DOM. It is no longer a child element of the grid (enough for .dataItem() to not resolve even though uid attribute is present?) - but the uid can still be used to retrieve the data item from the data source.

Your modification makes sense and appears to work well.

Thanks for the help.

Regards,

Steven

[Georgi]

Hello Steven,

Your understanding is correct. 

However, the dataItem method internally uses the index of the row to map it to its corresponding model.

e.g.

 return this._data[correctIdx]; // where correctIdx is the index of the row in the table

However, as the row is no longer in the DOM, its index is -1, thus nothing is returned.

Regards,
Georgi
Progress Telerik

[Steve]

Hi Georgi,

Thanks for clarifying.