CODEWITHSUNDEEP
angularjskendo-grid
rc.adhikari
rc.adhikari

Reputation: 2222

Kendo Grid Angular 2 - Fix group columns don’t render (intermittent)

Used: Kendo Grid Angularjs 2 version to show the list of users.

Issue: Having rendering issue intermittently to show locked columns data as it only show the first locked row only.

Please see the screenshot below with issue highlighted: enter image description here

HTML template code:

<kendo-grid
        [scrollable]="'scrollable'"
        [data]="usersList | async"
        [pageSize]="pageSize"
        [skip]="skip"
        [sort]="sort"
        [filter]="filter"
        [sortable]="{
            allowUnsort: true,
            mode: multiple
            }"
        [pageable]="true"
        [filterable]="true"
        (dataStateChange)="dataStateChange($event)"
>
    <kendo-grid-column field="first_name" title="First Name" width="200" [locked]="true">
        <ng-template kendoGridCellTemplate let-dataItem>
            <button [routerLink]="['/users/edit/' + dataItem.id]" title="Edit" type="button" class="btn btn-outline btn-default"><i class="fa fa-edit"></i></button>
            {{dataItem.first_name}}
        </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="last_name" title="Last Name" width="125" [locked]="true">
        <ng-template kendoGridCellTemplate let-dataItem>{{dataItem.last_name}}</ng-template>
    </kendo-grid-column>

    <kendo-grid-column-group media="(min-width: 450px)" [locked]="false">

        <kendo-grid-column field="username" title="Username" width="200"></kendo-grid-column>
        <kendo-grid-column field="email" title="Email" width="350"></kendo-grid-column>
        <kendo-grid-column field="created_at" title="Created On" width="150" [headerStyle]="{'text-align': 'center'}" class="text-centre" [format]="'{0:dd/MM/y}'">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <kendo-grid-date-filter-cell [showOperators]="true" [column]="column" [filter]="filter"></kendo-grid-date-filter-cell>
            </ng-template>
            <ng-template kendoGridCellTemplate let-dataItem>{{ dataItem.created_at | date:'dd/MM/y' }}</ng-template>
        </kendo-grid-column>

    </kendo-grid-column-group>
</kendo-grid>

Upvotes: 2

Views: 292

Answers (1)

rc.adhikari
rc.adhikari

Reputation: 2222

Apparently I have resolved the issue by adding below class on css.

.k-grid-content-locked {
  height: calc(100% + 0px) !important;
}

Upvotes: 1

Related Questions