Multi level grid expand button doesn't show

[Martin]

I'm trying to create a 3 level hierarchy grid, but for some reason the second level doesn't show the expand button.

The only reason the 3rd level is expanded in the pic is because of the dataBound script, which expands everything.

How do I make the second level expandable?

Here's the code:

@(Html.Kendo().Grid(Model.SalaryApprovalEmployments)
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(e => e.Id).Width(100);
          columns.Bound(e => e.TotalCost).Width(100);
          columns.Bound(e => e.Trend).Width(100);
      })
      .DataSource(dataSource => dataSource
                      .Ajax()
                      .Model(model =>
                      {
                          model.Id(sae => sae.Id);
                      })
                      .ServerOperation(false)
      )
      .Events(events => events.DataBound("dataBound"))
      .ClientDetailTemplateId("salaryCodeTemplate")
      .HtmlAttributes(new { style = "width:600px;" })
    )

<script id="salaryCodeTemplate" type="text/kendo-tmpl">
@(Html.Kendo().Grid<SalaryApprovalTransactionDTO>()
      .Name("grid_#=Id#")
      .Columns(columns =>
               {
                   columns.Bound(o => o.SalaryApprovalEmploymentId).Width(100);
                   columns.Bound(o => o.SalaryCodeId).Width(100);
                   columns.Bound(o => o.Amount).Width(100);
               })
      .DataSource(dataSource => dataSource
                      .Ajax()
                      .Model(model =>
                             {
                                 model.Id(sat => sat.SalaryCodeId);
                             })
                      .Read(read => read.Action("HierarchyBindingTransactions", "SalaryApproval", 
                                                new { salaryApprovalGroupId = Model.Id, salaryApprovalEmploymentId = "#=Id#" }))
      )
      .Events(events => events.DataBound("dataBound"))
      .ClientDetailTemplateId("transactionTemplate")
      .ToClientTemplate()
    )
</script>

<script id="transactionTemplate" type="text/kendo-tmpl">
@(Html.Kendo().Grid<SalaryApprovalTransactionDTO>()
      .Name("grid_#=SalaryApprovalEmploymentId#_#=SalaryCodeId#")
      .Columns(columns =>
               {
                   columns.Bound(o => o.SalaryCodeId).Width(100);
                   columns.Bound(o => o.UnitPrice).Width(100);
                   columns.Bound(o => o.Hours).Width(100);
                   columns.Bound(o => o.Days);
                   columns.Bound(o => o.Amount).Width(100);
               })
      .DataSource(dataSource => dataSource
                      .Ajax()
                      .Model(model =>
                             {
                                 model.Id(sat => sat.Id);
                             })
                      .Read(read => read.Action("HierarchyBindingTransactions", "SalaryApproval", 
                                                new { salaryApprovalGroupId = Model.Id, salaryApprovalEmploymentId = "#=SalaryApprovalEmploymentId#", salaryCodeId = "#=SalaryCodeId#" }))
      )
      .ToClientTemplate()
    )
</script>

<script>
    function dataBound() {
        var grid = this;
        this.tbody.find("tr.k-master-row").each(function( index ) {
            grid.expandRow(this);
        });
    }
</script>

[Martin]

Turns out that someone decided to set it to "display: none" in a css.

It works, as intended.