Removing Header and borders of Master Grid of Kendo Hierarchy Grid

3 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 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. Answer
    Nencho
    Admin
    Nencho avatar
    1881 posts

    Posted 10 Jul 2020 Link to this post

    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.
  3. Gideon
    Gideon avatar
    6 posts
    Member since:
    Sep 2012

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

    Hello Nencho,

     

    Thanks for the selector css. Solved my question.

     

    Regards.

    Gideon.

Back to Top