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

HeaderTemplate is not shown

3 Answers 431 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rui
Top achievements
Rank 1
Rui asked on 03 Aug 2017, 02:06 PM

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>

 

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 07 Aug 2017, 06:47 AM
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.
0
Rui
Top achievements
Rank 1
answered on 07 Aug 2017, 07:06 AM

HI.

I took out this bit,

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

and it started working.

0
Stefan
Telerik team
answered on 09 Aug 2017, 05:56 AM
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.
Tags
Grid
Asked by
Rui
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Rui
Top achievements
Rank 1
Share this question
or