Hello,
I have a kendo grid with many columns and virtualcolumns set to true. I would like to know how to have the horizzontal scroll working while selecting cells with drag enable in order to select cells that are outside of the portion of grid visible in the screen. I've noticed that if I set drag to false the scroll works but then I'm not able to select multiple cells with the mouse. Thanks
Is it possible to do nested grouping in a grid? And I don't mean a column grouping. Like handling a case where the grid can do a
file1 file2 folder1 file3 folder2 folder3 folder4 file4 file5
And do we have some sample code if this is possible?
Thanks!
J
I have an angular project that has a kendo grid that needs to be exported into PDF. Kendo grid has an expanded details per specific items when conditions met.
As can see below, I need to make the parent row to be together with its expanded detail when the page breaks. How can I achieve it?
Appreciate the response about my inquiry.
Thank you!
Hello!
I have a grid filter is specified as "menu" ([filterable]="'menu'")
Some the grid columns are created dynamically like this:
<kendo-grid-column *ngFor="let c of myColumnsObjects"
field="{{ c.name }}"
title="{{ c.title }}"
>
<ng-template
kendoGridFilterMenuTemplate
let-column="column"
let-filter="filter"
let-filterService="filterService"
>
<app-mycolumn-filter
[field]="column.field"
[filterService]="filterService"
[currentFilter]="filter"
[distinctData1]="getDistinctData1(column.field)"
[distinctData2]="getDistinctData2(column.field)"
[distinctData3]="getDistinctData3(column.field)"
></app-mycolumn-filter>
</ng-template>
<ng-template
kendoGridCellTemplate
let-dataItem >
<ng-container *ngIf="getObjectByColumnName(c.name, dataItem) as myItem">
<div class="{{getClassByObject(myItem)}}">
<div>{{myItem.dataOfField1}}</div>
<div>{{myItem.dataOfField2}}</div>
<div>{{myItem.dataOfField3}}</div>
</div>
</ng-container>
</ng-template>
</kendo-grid-column>
Where
myColumnsObjects is
interface IMyDynamicallyColumn {
name: string;
title: string;
}
dataItems is array of
interface IMyData {
id: number;
name: string;
somecomlexobject: any;
....
myItems: IMyItem[];
otheItems: IOtherItem[];
}
myItem is:
interface IMyItem {
id: number;
dataOfField1: string;
dataOfField2: number;
dataOfField3: EMyItemState;
}
const enum EMyItemState {
State1 = 'state1',
State2 = 'state2',
...
State<N> = 'state<n>'
}
Input data distinctData1, distinctData2 and distinctData3 used in angular's component of app-mycontrol-filter.
In this case, the standard filter does not work.
How can I organize a filter on an objects (type is IMyItem) associated with a column using all the properties of the object?
Hello,
For the Kendo UI Grid component, we were having some confusion re: the standard `<kendo-grid-colum>` vs. the one with a nested `<ng-template>` within it.
Specifically how you are binding the fields to the `save` event here:
saveTopic({ sender, rowIndex, isNew, dataItem }: SaveEvent): void {
In other words, once the user EDITS a row and then SAVES - the `field`attributes of <kendo-grid-column> were binding to the `dataItem` param - however the ng-template items were NOT.
So in the end, we managed to add a `[formGroup]` on the <kendo-grid> markup, and added a few `formControlName` atrributes within the ng-templates - i.e. we have some material checkboxes and selects.
And now we are able to read the entirely modified grid row by accessing the formGroup in the SAVE function, as follows:
However, at first we did NOT have the [formGroup] binding. So the updated values within ng-template were NOT binding on SAVE.
<kendo-grid [data]="topics" (add)="addTopic($event)" (edit)="editTopic($event)" (remove)="disableTopic($event)"
(cancel)="cancelHandler($event)" (save)="saveTopic($event)"
[formGroup]="formGroup"
>
<ng-template kendoGridToolbarTemplate>
<h3>Topics</h3>
<button id="refreshButton" mat-flat-button (click)="getTopics()" >
<mat-icon class="hover" svgIcon="refresh"></mat-icon>
</button>
<button id="addButton" kendoGridAddCommand>
<mat-icon class="hover" svgIcon="add"></mat-icon>
</button>
</ng-template>
<kendo-grid-column [width]="500" field="Name" title="Topic" ></kendo-grid-column>
<kendo-grid-column [width]="350" field="Description" title="Description""></kendo-grid-column>
<kendo-grid-column [width]="50" field="IsEnabled" editor="boolean" title="Enabled">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<mat-checkbox kendoCheckBox formControlName="IsEnabled" name="IsEnabled">
</mat-checkbox>
</ng-template>
</kendo-grid-column>
<kendo-grid-column [width]="50" field="Retained" editor="boolean" title="Retained" >
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<mat-checkbox kendoCheckBox formControlName="Retained" name="Retained">
</mat-checkbox>
</ng-template>
</kendo-grid-column>
<kendo-grid-column [width]="200" field="HostName" title="HostName">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<mat-select placeholder="Select Host" formControlName="HostID">
<mat-option value="">None</mat-option>
<mat-option *ngFor="let host of hosts" [(value)]="host.HostID">
{{ host.HostName }}
</mat-option>
</mat-select>
</ng-template>
</kendo-grid-column>
<kendo-grid-command-column *ngIf="!isLoading">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button kendoGridEditCommand [primary]="true"><mat-icon svgIcon="edit" title="Edit" i18n-title="@@editOption"></mat-icon></button>
<button kendoGridSaveCommand>{{ isNew ? 'Add' : Update }}</button>
<button kendoGridCancelCommand>{{ isNew ? 'Discard changes' 'Cancel' }}</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
So the above solution is working; but again, the formControlName has been added only to those ng-template sections. And now the binding works on all fields - that is, the user-modified values are successfully read via formGroup.value.
But if you can clarify best practices in this case, it would be appreciated and helpful.
Thanks,
Bob
I would like to prevent the grid cells from wrapping and increasing the row height.
Instead I just want the text to be cut off and ending with ellipsis. I tried styling with column classes "white-space: nowrap", but that does not work.
Is that possible?
Thank you!
Hello!
I'm working with a grid that contains several Kendo dropdown lists. The data for these dropdowns relies on certain values within the grid, which can vary for each row. Currently, the dataset from the last row is being applied to all dropdowns in previous rows. How can I ensure that each dropdown in a row uses its own unique dataset based on the values specific to that row?
Thanks,
Balazs
UPDATE:
The functionality is operating correctly as intended. The issue only occurred on my end.Hi Team,
I am trying to implement cell selection aggregates in my grids, similar to examples shown here :https://www.telerik.com/kendo-angular-ui/components/grid/selection/aggregates/
Looks like the aggregates does not get calculated correctly when grouping is done on the grid. Is this a limitation or am I missing something.
Appreciate your help.
Kaustubh
Hi!
I implemented a filter over all columns to implement a search like the example in the Overview-section for the Grid component.
I would like to highlight all text in the columns yellow that match the entered search text.
Is that easily possible?
Best regards,
Gerald