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?