Refreshing Kendo Window with next item

[Avnish]

Hello,

I have a Kendo Grid with a command column, that on clicking shows extra details for that row. I want to show this extra information in a Kendo Window. I have been able to achieve this. Next, I want to add a button inside this Kendo Window, that allows user to show the details for the next grid row, without having to go back to the grid. I am having some trouble with this. Few notes about the Kendo Window -

1. The contents of the Kendo Window is displayed using a Script template. I am passing the grid's current dataItem to the template to render HTML. More on this in #3

2. The user can have multiple such grids open in the same window, and hence multiple Kendo Windows, so it's not practical to save the current row number and grid # in JS. The number of the grids is dynamic, so there is no id associated with any of them. 

3. To work around #2, instead of passing the grid's dataItem, I have an object that passes the entire data associated with the grid and the current index of the grid. The data in the grid is pretty small, so I am not too worried about passing entire data. In this approach, I was hoping, on the Next Button click action, I can retrieve the object passed earlier, and then increment the index. However, when I use Kendo Window's content(), I get a string back with HTML. I am guessing this is due to the Script template. I am not sure how to proceed with this approach. Is there a way to extract the underlying object that was passed to the script template?

Also, the approach in #3 seems very crude to me. Is there a better way to implement the functionality I am looking for? I looked around some of the other Kendo UI widgets, and Scrollview seemed like what I needed (minus the drag scroll). But it looks like scrollview is meant for mobile only?

Thanks,
Avnish

[Dimiter Topalov]

Hi Avnish,

You can simplify the scenario, and get only the data item, associated with the currently clicked row, and the next one only, and then use both objects in the Kendo UI Window creation logic either directly, or via passing them as arguments to a function that deals with creating the Window.

Here is a possible approach to access the data item, associated with the row that is below the clicked one (next row) involves using the dataItem() method of the grid, and the data() and at() methods of the dataSource:

http://dojo.telerik.com/IlefI

Alternatively, you can attach the whole dataSource as a custom Window property, and use it via the Window instance e.g.:

var window = $(...).kendoWindow({
 ...
});
window.options.customData = e.sender.dataSource.data(); // assuming this takes place in a Grid event handler

I hope this helps.

Regards,
Dimiter Topalov
Telerik