Removing Header and borders of Master Grid of Kendo Hierarchy Grid using CSS

[Gideon]

I am using Kendo Hierarchy Grid and wants a way to remove the header and border lines of the master grid alone/only. When I apply the CSS below the grids' code, it also removes the headers child grids. I have attached a PDF to illustrate the rendering.

 

@(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;
}

[Martin]

Hello Gideon,

Thank you for the provided resources.

You can use the columns.headerAttibutes configuration to add custom class to the master Grid's headers only. You can then apply the below CSS to achieve the desired result:

 columns: [
   {
     field: "FirstName",
     title: "First Name",
     width: "120px",
     headerAttributes:{
       class:"hidden"
     }
   },

#grid>.k-grid-header, .hidden{
  display:none;
}

Here is a small Dojo example for reference.

I am not sure I understood which border you wish to remove, so kindly provide additional explanations about that and I will happily assist you.

Regards,
Martin
Progress Telerik

[Gideon]

Hello Martin,

 

Thanks a lot a lot for this. Because I am using razor for my implementation, I had to make some few adjustment to your code:

 

#grid_outputindicators>.k-grid-header tr, .hidden{
height: 0;
border-bottom-width: 0;
visibility: hidden;
overflow: hidden;
display: none;
}
.k-hierarchy-cell.k-header
{
height: 0;
border-bottom-width: 0;
visibility: hidden;
overflow: hidden;
display: none;

}
#grid_outputindicators {
border-color: #ffffff;
}

[Martin]

Hello Gideon,

I am glad that you were able to achieve the desired layout, and thank you for sharing the necessary CSS. 

Do not hesitate to contact us if you have further questions.

Regards,
Martin
Progress Telerik