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

Removing Header and borders of Master Grid of Kendo Hierarchy Grid

2 Answers 72 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, 08:45 PM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Nencho
Telerik team
answered on 10 Jul 2020, 11:10 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Gideon
Top achievements
Rank 1
Veteran
answered on 10 Jul 2020, 08:45 PM

Hello Nencho,

 

Thanks for the selector css. Solved my question.

 

Regards.

Gideon.

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