Kendo Grid and DetailTemplate

Question

I want to load into DetailTemplate additional info about every row using result of ajax call (this data is not loaded with grid, because it's huge data). For testing, I just created json object:

My grid:

                            $("#device-grid").kendoGrid({
                                detailTemplate: kendo.template($("#detailTemplate").html()),
                                detailInit: detailInit,

My detailInit:

                                function detailInit(e) {
                                    console.log("detailInit started: " + CurrentTimeString());
                                    var detailRow = e.detailRow;

                                    var template = kendo.template($("#detailTemplate").html());

                                    // Create some dummy data.
                                    var data = { FirstName: "Test" };

                                    var result = template(data); //Execute the template
                                    $("#detailTabstrip").html(result); //Append the result

                                    detailRow.find(".detailTabstrip").kendoTabStrip({
                                        animation: {
                                            open: { effects: "fadeIn" }
                                        }
                                    });
                                    console.log("detailInit ended: " + CurrentTimeString());
                                };

My template:

                        <script type="text/x-kendo-template" id="detailTemplate">
                            <div class="detailTabstrip">
                                First Name: #= FirstName #
                            </div>
                        </script>

But I get an exception:

Uncaught ReferenceError: FirstName is not defined

What is wrong with mapping?

Answer 1

Solved this problem by the following way:

1. described div for data

                    <div id="detail" class="detail">
                        <div class="int"></div>
                    </div>
   

2. template

                        <script type="text/x-kendo-template" id="detailTemplate">
                            <div>
                                First Name: #= FirstName #
                            </div>
                        </script>
   

3. define this div as template

                                $("#device-grid").kendoGrid({
                                    detailTemplate: $("#detail").html(),
                                    detailInit: detailInit,
   

4. then load template, fill data and add the template to div

                                function detailInit(e) {
                                    console.log("detailInit started: " + CurrentTimeString());
                                    var detailRow = e.detailRow;
   
                                    var template = kendo.template($("#detailTemplate").html());
   
                                    // Create some dummy data.
                                    var data = { FirstName: "Test" };
   
                                    var result = template(data);
                                    detailRow.find(".int").html(result);
   

It works as expected