Real world example of dynamic data

[Voss]

Do you have an example of showing a window that has dynamic data?

Example:
I have a list of 10 items. When you click on an item a window should appear that shows the detail for that item.

I hoping the solution is not to pre-create a window for each item.

Is it possible to show a window and then have it load the content url dynamically?

thanks.

[Alex Gyoshev]

Hi Voss,

You can use the refresh() method to get the window content from an URL, thus reusing the window for each of the items. With the beta2 its signature is refresh(url, data). Please note that there will be a minor breaking change with the official release, as outlined in the changes and backwards compatibility help topic.

Best wishes,
Alex Gyoshev
the Telerik team

[Voss]

Alex,

Thanks for the response.

I know you'll are busy with the getting the BETA out, but are there any more examples or demos to look at?
I'm struggling to figure out how to do some basic things and it may just be javascript in general that I need to look at.

But I'm trying to do the following end to end (which I think would be a great example for you'll to have):

1. Load a grid up with remote data (JSON) : This I have working
2. Select a row (ideally this would have a hidden column with a "ID" property.
3. Popup a window
4. The window would grab remote data based on the "ID" passed in and refresh and show some data/template.

I have a basic grid working(can you a Table instead of a div), but I do not know what is the best approach to do the rest.

I'm working on a asp.net MVC 3 app using the netflix odata services for testing. I'll be than happy to share my project with the other forum users once I can get a few more things working which I think would have a lot of value as a fully functional demo application with real data.

<div id="playersWidgetGameStats" class="k-content" style="height: 350px; border:1px solid; border-radius: 10px;">
    <div id="gridPlayersGameStats" ></div>

    <script>
        var dsPlayers2 = new kendo.data.DataSource(
        {
            type: "json",
            transport:
            {
                read: "JsonGetTeamPlayers"
            },
            serverPaging: false,
            serverSorting: false
        });

        $(document).ready(function () {
            $("#gridPlayersGameStats").kendoGrid({
                dataSource: dsPlayers2,
                selectable: "row",
                scrollable: false,
                sortable: true,
                pageable: false,
                navigatable: true,
                columns:
                        [
                            { field: "Name", title: "NAME" }
                            , { field: "GameStats.PPG", title: "PPG" }
                            , { field: "GameStats.TRPG", title: "TRPG" }
                            , { field: "GameStats.APG", title: "APG" }
                            , { field: "GameStats.SPG", title: "SPG" }
                            , { field: "GameStats.BPG", title: "BPG" }
                            , { field: "GameStats.MPG", title: "MPG" }

                        ]
            });
        });
    </script>
</div>

[Alex Gyoshev]

Hi Voss,

2. Select a row -- use jQuery to select the row and then call the grid select() method:
    // selects a grid with a td that contains the text "101"
    grid.select(grid.tbody.find(">tr td:content(101)"));

3. Popup a window -- use the window open() method. You can refer to the window examples on how to do this.

4. The window would grab remote data based on the "ID" -- you can use the refresh() method to fetch remote data and load it as the window content:

windowObject.refresh({
    url: "/details",
    data: { userId: 42 }
});

If you need to apply the template on the client, you need to fetch it through jQuery and set the window content through the content() method:

var tmpl = kendo.template("Hello, #= firstName # #= lastName #");
kendoWindow.content(tmpl(data));

Greetings,
Alex Gyoshev
the Telerik team