HeaderTemplate is not shown

4 posts, 0 answers
  1. Rui
    Rui avatar
    17 posts
    Member since:
    Jun 2017

    Posted 03 Aug 2017 Link to this post

    I have this grid that has a hidden column that is hidden on Load.

    <div class="row">

                <div class="blanktable references" style="padding: 5px; border: 1px solid rgb(211, 211, 211); border-image: none;">

                    @(Html.Kendo().Grid<Something>()

                          .Name("Something ")

                          .Selectable(builder => builder.Mode(GridSelectionMode.Multiple).Enabled(false))

                          .ClientRowTemplate(Html.Partial("Something ").ToHtmlString())

                          .TableHtmlAttributes(new { @class = "table table-stripped" })

                          .Scrollable(scrollable => scrollable.Height(100).Enabled(true))

                          .Columns(columns =>

                          {

                              columns.Bound(h => h.IsSelected)

                                  .Sortable(false)

                                  .Filterable(false)

                                  .Title(string.Empty).Template(@<text></text>).HeaderTemplate("<input type='checkbox' id='Something' onchange=' Something (this)' />").Width(80).Hidden(true);

                              columns.Bound(h => h. Something).Title("Partner type").Width(120);

                              columns.Bound(h => h. Something).Title("Date").Width(120);

                              columns.Bound(h => h. Something).Title("Name");

                          })

                          .Events(e => e.DataBound("Something").Change("Something "))

                          )

                </div>

            </div>

     

    The resulting table is in file 1.

     

    When I click on the edit button, I show the column

    $(`#${grid}`).data("kendoGrid").showColumn(0);

     

    And then I had this html to each row

    <td><input type="checkbox" class="checkbox" id= " Something " onchange= " Something (this); SomethingElse(this)" /></td>

     

    And I get the grid on file 2.

    For some reason the, the HeaderTemplate is not shown.

    I have a grid elsewhere with the same column, except that it is not hidden on load and it works fine.

    This is the other grid

     

        @(Html.Kendo().Grid< Something >()

          .Name("Something ")

          .Deferred()

          .AutoBind(false)

          .ClientRowTemplate(Html.Partial("Something ").ToHtmlString())

          .TableHtmlAttributes(new { @class = "table table-stripped" })

          .Events(e => e.DataBound("Something "))

          .Resizable(res => res.Columns(true))

          .Columns(columns =>

          {

              columns.Bound(e => e.IsSelected)

                  .Sortable(false)

                  .Filterable(false)

                  .Title(string.Empty).Template(@<text></text>).HeaderTemplate("<input type='checkbox' id= Something onchange= Something (this)' />");

              columns.Bound(e => e. Something)

                  .Title("Bundle")

                  .Sortable(false)

                  .Filterable(false);

              columns.Bound(e => e.LastComment)

                  .Sortable(false);

          })

          .Filterable()

          .Sortable()

          .Selectable()

          .Pageable(x =>

          {

              x.ButtonCount(3);

              x.Enabled(true);

              x.PageSizes(new[] { "5", "10", "20", "30" });

              x.Refresh(true);

          })

        .DataSource(dataSource => dataSource

            .Ajax()

            .Read(read => read.Action("Something ", " Something ").Data("Something "))

            .ServerOperation(true)

                  )

        )


    This is the result html of the column in the grid where it works

    <th class="k-header" scope="col" data-title="" data-index="0" data-field="IsSelected"><input id=" Something " onchange=" Something (this)" type="checkbox"></th>

    And this is the other html

    <th class="k-header" id="97dafba3-0cf9-420b-9104-d51ab36d924b" role="columnheader" aria-haspopup="true" rowspan="1" scope="col" data-title="" data-index="0" data-field="IsSelected">IsSelected</th>

     

  2. Stefan
    Admin
    Stefan avatar
    3076 posts

    Posted 07 Aug 2017 Link to this post

    Hello Rui,

    Thank you for the provided code.

    After inspecting it I made an example based on it, but it is working as expected.

    I attached the example for reference.

    If additional assistance is needed, please provide a runnable example reproducing the issue as it may be caused by a factor which we are overlooking at this moment.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Rui
    Rui avatar
    17 posts
    Member since:
    Jun 2017

    Posted 07 Aug 2017 Link to this post

    HI.

    I took out this bit,

    .Selectable(builder => builder.Mode(GridSelectionMode.Multiple).Enabled(false))

    and it started working.

  4. Stefan
    Admin
    Stefan avatar
    3076 posts

    Posted 09 Aug 2017 Link to this post

    Hello Rui,

    I'm glad to hear that the application is working after removing the mentioned line. As that code is setting the selectable to false, removing it should not affect the Grid behaviour as it is set to false by default.

    Still, when I added that line to the provided example it was still working as expected, so I can assume that it was a combination of factors in the real application.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top