Conditionally Hide Expand Icons for the Detail Template in Grid

Environment

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

Description

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?

Solution

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
            </script>

            <script>
                $(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();
                            items.each(function(){
                              var row = $(this);
                              var dataItem = e.sender.dataItem(row);
                              if(!dataItem.hasChildren){
                                row.find(".k-hierarchy-cell").html("");
                              }

                            })
                        },
                        columns: [
                            {
                                field: "FirstName",
                                title: "First Name",
                                width: "120px"
                            }
                        ]
                    });
                });

                function detailInit(e) {

                }
            </script>

        </div>