How to get a kendo grid on a kendo template

Question

Firstly I have made a Kendo grid. Each row of the grid has a button on it, which on-click opens a Kendo template (pop-up). still here it's fine.

Is it possible to add another grid in the popup and add editable child items(like grid hierarchy) to each grid row?

This is my main grid:

var grid= $("#Grid").kendoGrid({
        columns: [
          { field: "Name", title: "Name" },
          { field: "Description", title:"Description"},
          { field: "Remarks", title:"Remarks" },
          { command: { name: "details", text: "....", click: showDetails }, title: "Button", attributes: {
              style: "text-align: center;"
          }
          },
          {field:"Status",title:"Status"},
          ],


{......... data source and irrelevant code }

});

Code for window pop-up and button on-click function:

wnd = $("#details")
                        .kendoWindow({
                            title: "Details",
                            modal: true,
                            visible: false,
                            resizable: false,
                            width: 400,
                            height:600
                        }).data("kendoWindow");

    detailsTemplate = kendo.template($("#template").html());
    });

    function showDetails(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }

Code for template look like:

<script type="text/x-kendo-template" id="template">

    <div id="details-container">
        
        <dl>
            <dt id="fac">Fan: </dt>
            <dt id="gc"> AC </dt>
            <dt id="pn"> Name: </dt>
            <dt id=pk> #=Name# </dt>
            <dt id="sn">Status: </dt>
            <dt id=sk> #=Status# </dt>

        </dl>
        <br />
        <div class="rowdiv">
   
            <div id="windowgrid"></div>
           <!-- windowgrid is another grid which I need to get from this template, it is not displaying the grid but give a space in between -->         
           
        </div>
   
        <br />
        <button id="bbb3" class="button">Cancel</button>
        <button id="bbb2" class="button">Save</button>
        <button id="bbb1" class="button">Refresh </button>



    </div>
</script>

The div tag including window grid is not displaying the grid but displaying remaining other things. can you suggest what mistake I have done in the code Secondly, Can you help me with the code to get a child row for each grid row.

Thank you

EDIT This is the dojo link of whole code: http://dojo.telerik.com/igOroG

Consider adding a Dojo example to accommodate your question and demonstrate your issue. — Sandman
Can you go through the code in the given dojo link and explain why a 2nd grid is not being displayed in template pop-up — Siuu

Sandman Sandman · Accepted Answer · 2017-06-09T07:45:18

You are trying to initialise an element before it has been rendered in the x-kendo-template, so just move your grid instantiation to after the open of the kendoWindow.

function showDetails(e) {
    e.preventDefault();

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
    // grid definition here
    var grid = $("#windowgrid").kendoGrid({
        .....
    }).data("kendoGrid");
}

"Code to get a child row for each grid row"

You can use detailInit with detailTemplate on the grids in order to achieve this. With your detailInit function, you will be able to access the data at that specific row using [e.data].

// gets elements on detailRow
var detailRow = e.detailRow;
// get the data at the expanded row
var dataList = [e.data];

I have updated your Dojo example to display the changes required to firstly initialise the grid and extended the code to provide detail rows for the first grid.

EDIT

In order to apply a filtered dataSource to the pop-up grid based on the value selected, you can use the filter function on the data before applying to the Kendo DataSource:

var filteredDataArr = dataArr.filter(function(el) {
    return el.NId == e.NId      
});

el being the element in the data array and e.NId being the selected NId in the parent grid.

Updated Dojo example to demonstrate the above in action.

How to get a kendo grid on a kendo template

1 Answers

EDIT