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

4 posts, 1 answers
  1. Gideon
    Gideon avatar
    6 posts
    Member since:
    Sep 2012

    Posted 08 Jul 2020 Link to this post

    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;
    }
  2. Answer
    Martin
    Admin
    Martin avatar
    299 posts

    Posted 10 Jul 2020 Link to this post

    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

  3. Gideon
    Gideon avatar
    6 posts
    Member since:
    Sep 2012

    Posted 10 Jul 2020 in reply to Martin Link to this post

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

  4. Martin
    Admin
    Martin avatar
    299 posts

    Posted 14 Jul 2020 Link to this post

    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

Back to Top