Questions on Kendo UI for Angular Forum

2 questions

0 answers

18 views

Hi,

I'm using kendo grid in angular. I'm trying to hide/remove the total cell from the kendo grid using *ngIf, but only content inside the cell is hiding, empty cell is showing.

How to hide the total cell from the grid,

This is the code , I have used

<kendo-grid id="antibiotic-result-view" [data]="uniqAntibioticList" [resizable]="false">
    <kendo-grid-column field="Expansion" [width]="150">
        <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
            <div class="antibiotic-heading">{{"Antibiotic" | translate}}
                <mat-checkbox type="checkbox" [ngModel]="allCompleted" disabled="true"></mat-checkbox>
            </div>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
            <div *ngIf="dataItem.IsSuppressed">
                <span>{{ dataItem.Expansion }}</span>
                <mat-checkbox type="checkbox" [ngModel]="dataItem.IsSuppressed" disabled="true"></mat-checkbox>
            </div>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

I have been trying for past 2 days, could someone help me on this ?

Grid

GridLayout

Styling

asked on 22 Mar 2024

0 answers

48 views

Responsive column header with locked columns

Hello All,

We are using a kendo grid and which is having few locked columns and a few which are not locked. Since there is a constraint the width needs to be set for each column if there is a locked column, we are setting the width for each column, Which makes the grid header not look good in bigger displays. You can see in the below screenshot that after the last column, there is some empty space. In smaller screens, this won't occur since the width we set exceeds the viewport width. Is there a way we can make this responsive?