Removing Header and borders of Master Grid of Kendo Hierarchy Grid

[Gideon]

I am using Kendo Hierarchy Grid and want a way to remove the header and border lines of the master grid alone. When I apply the the CSS below the grid code, it also removes the headers child grids. 

 

@(Html.Kendo().Grid<WorkplansViewModel>()
.Name("grid_outputindicators")
.Columns(columns =>
{
columns.Bound(c => c.Transaction_Id).Hidden();
columns.Bound(c => c.WPMainRecord_Ident).Hidden();
columns.Bound(c => c.ProjectId).Hidden();
columns.Bound(c => c.FYearIdent).Hidden();
columns.Bound(c => c.FPeriodIdent).Hidden();
columns.Bound(c => c.ViewNumbering).Title("No").Width(20).Hidden();
columns.Bound(c => c.Output).Title("Define Indicators for each Output");

columns.Command(command => command.Custom(" Add Indicator").IconClass("k-icon k-i-column-stacked").Click("addoutputindicator"));

})

.Resizable(r=>r.Columns(true))
.ClientDetailTemplateId("templateoutputindicators")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("WP_Outputs_Read", "Admin", new {projid=Model.Project_Id, fyear=Model.FYear, fperiod=Model.FPeriod}))
.Model(model =>
{
  model.Id(p => p.Transaction_Id);
})

.Events(events => events.Error("error_handler"))


)
.Events(events => events.DataBound("dataBoundOutputIndicators"))
)

 

 

 

<script id="templateoutputindicators" type="text/kendo-tmpl">
@(Html.Kendo().Grid<WP_OutputIndicatorsSubGridVM>()
.Name("gridsub_#=Transaction_Id#")
.Columns(columns =>
{
columns.Bound(o => o.Transaction_IndicatorId).Hidden();
columns.Bound(o => o.IndicatorStatementOIVM).Title("Indicator");
columns.Bound(o => o.BaselineOIVM).Width(110).Title("Baseline");
columns.Bound(o => o.TargetOIVM).Title("Target");
columns.Command(command => { command.Destroy().Text(" Delete").IconClass("k-icon k-i-delete"); });
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("WP_OutputsSubIndicators_Read", "Admin", new { output_transid = "#=Transaction_Id#" }))
.Destroy(destroy => destroy.Action("WP_Outputs_Delete", "Admin"))
)
.ToClientTemplate()
)
</script>

 

#grid_outputindicators thead.k-grid-header
{
height: 0;
border-bottom-width: 0;
visibility: hidden;
overflow: hidden;
display: none;
}

[Nencho]

Hello, Gideon,

Please consider using the following selector:

  <style>
      #grid_outputindicators > div.k-grid-header > div > table > thead     
      {
      height: 0;
      border-bottom-width: 0;
      visibility: hidden;
      overflow: hidden;
      display: none;
      }
  </style>

Here's a dojo example, where the above is applied:

https://dojo.telerik.com/IpIYeHEv/3

Hope this would help.

Regards,
Nencho
Progress Telerik

[Gideon]

Hello Nencho,

 

Thanks for the selector css. Solved my question.

 

Regards.

Gideon.