This is a migrated thread and some comments may be shown as answers.

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

3 Answers 786 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gideon
Top achievements
Rank 1
Veteran
Gideon asked on 08 Jul 2020, 09:00 PM
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;
}

3 Answers, 1 is accepted

Sort by
0
Accepted
Martin
Telerik team
answered on 10 Jul 2020, 12:38 PM

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

0
Gideon
Top achievements
Rank 1
Veteran
answered on 10 Jul 2020, 08:43 PM

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

0
Martin
Telerik team
answered on 14 Jul 2020, 10:59 AM

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

Tags
Grid
Asked by
Gideon
Top achievements
Rank 1
Veteran
Answers by
Martin
Telerik team
Gideon
Top achievements
Rank 1
Veteran
Share this question
or