New to Kendo UI for jQuery? Download free 30-day trial

Conditionally Hide Expand Icons for the Detail Template in Grid


Product Progress® Kendo UI® Grid for jQuery
Product Version 2017.3.913


How can I hide the expand/collapse icon for the detail template in a Kendo UI Grid based on the hasChildren value which I have in the model?


  1. Traverse the rows of the Grid within the dataBound event.
  2. Conditionally hide the icon.
  3. To retrieve the data item, access the <tr> element by the dataItem method of the Grid.
       <div id="example">
            <div id="grid"></div>

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

                $(document).ready(function() {
                    var element = $("#grid").kendoGrid({
                        dataSource: [
                          {FirstName: "name1", hasChildren: true},
                          {FirstName: "name1", hasChildren: false}
                        height: 550,
                        sortable: true,
                        pageable: false,
                        detailTemplate: kendo.template($("#template").html()),
                        detailInit: detailInit,
                        dataBound: function(e) {
                            var items = e.sender.items();
                              var row = $(this);
                              var dataItem = e.sender.dataItem(row);

                        columns: [
                                field: "FirstName",
                                title: "First Name",
                                width: "120px"

                function detailInit(e) {



In this article