[Solved] Grid Within Detail Template Does Not Display JSON

[Phil]

Greetings!

I am perplexed.  I've searched extensively and I hope that I'm not expressing an issue that has already been solved / documented .. but here goes:

My goal is to display a detail template with a grid inside.  The template displays and I can display fields from the initial top-level data source.  From within the detailInit event I am able to make a successful Ajax call to my controller and JSON data is being returned to the Ajax.done() callback.  At that point, I successfully do a jQuery find() on e.detailRow and I new up a kendoGrid, passing in the data that Ajax returned.  The result is always an empty grid in the detail template.

Parent grid:

var clientGrid = $("#clientsGrid").kendoGrid({
            dataSource: employeeDataSource,
            columns: [
                {
                    field: "FirstName",
                    title: "First Name"
                }, {
                    field: "LastName",
                    title: "Last Name"
                }, {
                    field: "BirthDateFormatted",
                    title: "Birth Date"
                }, {
                    field: "GenderFormatted",
                    title: "Gender"
                }, {
                    field: "IsActiveFormatted",
                    title: "Active"
                }
            ],
            height: "600px",
            pageable: { pageSize: 25, butonCount: 1 },
            sortable: { allowUnsort: true },
            detailTemplate: kendo.template($("#clientDetailTemplate").html()),
            detailInit: getClientDetail
        });

detailInit handler (data.Data is the JSON payload):

function getClientDetail(e) {

     var detailRow = e.detailRow;

     $.ajax({
             type: "GET",
             url: "/api/ClientApi/GetClientAddresses",
             data: { Id: e.data.Id }
         })
         .done(function (data) {

             var container = detailRow.find(".client-addresses").first();

             container.kendoGrid({
                 height: "150px",
                 dataType: "json",
                 datasource: data.Data,
                 columns: [
                     { field: "Address1", title: "Address 1" },
                     { field: "Address2", title: "Address 2" },
                     { field: "City", title: "City" },
                     { field: "PostalCode", title: "Zip" }
                 ]
             });
         });

 }

.. and, the HTML and template script:

<h2>Clients</h2>

<div id="clientsGrid"></div>

<script type="text/x-kendo-template" id="clientDetailTemplate">
    <div class="panel panel-primary">
        <div class="panel-heading">
            Client Details For #= FirstName # #= LastName #
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3">
                    <label>Inquiry Date:</label>#= kendo.toString(kendo.parseDate(InquiryDate), 'MM/dd/yyyy') #
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                Addresses
            </div>
            <div class="panel-body">
                <div id="#=Id#client-address" class="client-addresses"></div>
            </div>
        </div>

</script>

It seems I have tried all manner of slicing and dicing the logic and get the same results, which looks like the below.  So strange - my controller logic shows the data going out, Fiddler shows the data going out, and I see that the JSON data arrives at the Ajax callback just fine.  



Thanks in advance for any light that can be shown on this issue.

Regards,

Greg

/api/ClientApi/GetClientAddresses

[Vladimir Iliev]

Hello Greg,

To be able to investigate further current behavior we would need the exact response returned from the server side (from Fiddler or your browser network tab). 

Also could you please clarify why you are using custom ajax request instead of the grid build-in one (as demonstrated in this demo)?

Regards,
Vladimir Iliev
Telerik