Loading data from a kendo grid into a kendo window

Question

grid with a custom command to open a kendo-window with detailed data. Like described here:

http://demos.telerik.com/kendo-ui/grid/custom-command

I load the data for the grid as json via php script f.e. employees.php.

In the example by clicking on the "View Details" the windows loads Data from the same datasource.

What i need is to load detail data from another php/json file. I found out that it should work with the "refresh" Method, but i didn't get it to work.

Can anybody help me out?

UPDATE

Thanks to @Karthikeyan my code now looks like this:

        <script>
... function showDetails(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var dataItemID = dataItem.AK_ID;
    $.getJSON('data/akDetail.php?ak=' + dataItemID + '', function (data) {
        wnd.content(detailsTemplate(data));
        wnd.center().open();
    });
}
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
    <h2>#= title_dataitem #</h2>
</div>
</script>

the kendo window does not open, i get an error in the chrome console: "Uncaught ReferenceError: title_dataitem is not defined"

Karthikeyan Karthikeyan · Accepted Answer · 2017-03-22T11:13:44

In the demo grid, the line wnd.content(detailsTemplate(dataItem)); binds the template with data of the current row. You can instead do something like

function showDetails(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    $.getJSON('/dataSource.php', { param1: dataItem.param1, param2: dataItem.param2 }, function (data) {
        wnd.content(renderTemplate(data));
        wnd.center().open();
    });
}

The renderTemplate method can generate HTML markup using the data received from server and will get dumped as content inside the window.

Update: renderTemplate method can either be a kendo template that expects the data from the akDetail.php call or a custom implementation that returns HTML markup which can be used as modal window's content. For example,

function renderTemplate(dataItem) {
    var markup = $('<div id="details-container"> ' +
                        '<h2 class="firstName"></h2> ' +
                        '<em class="title"></em> ' +
                        '<dl> ' +
                            '<dt class="city"></dt> ' +
                            '<dt class="dob"></dt> ' +
                        '</dl> ' +
                    '</div>');
    markup.find('h2.firstName').html(dataItem.firstName);
    markup.find('em.title').html(dataItem.title);
    markup.find('dt.city').html(dataItem.city);
    markup.find('dt.dob').html(kendo.toString(dataItem.dob, "MM/dd/yyyy"));
}

Loading data from a kendo grid into a kendo window

1 Answers