I have a nested, selectable grid. When I click on the check that are below the scope of the window it causes the grid to auto scroll all the way back to the top. Selecting by clicking on the cells does not cause this to happen. Only when I click on the checkbox itself.
<kendo-grid class="kendo-grid" [data]="gridView" filterable="menu" (dataStateChange)="dataStateChange($event)" [pageable]="{ pageSizes: [10, 25, 50], previousNext: true, buttonCount: 5, info: true }" [pageSize]="state.take" [skip]="state.skip" (pageChange)="pageChange($event)" [resizable]="true" [sortable]="{ allowUnsort: true, mode: 'multiple' }" [sort]="state.sort" [selectable]="selectableSettings" [kendoGridSelectBy]="'id'" [selectedKeys]="selections" (selectedKeysChange)="onSelectedKeysChange($event)" (cellClick)="transactionSelected($event)" [rowClass]="rowCallback"> <kendo-grid-checkbox-column [hidden]="group?.groupId !== 1" width="50"></kendo-grid-checkbox-column> <kendo-grid-column field="transactionId" title="ID" width="90"> <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService"> <kendo-grid-numeric-filter-menu [column]="column" [filter]="filter" [filterService]="filterService"> </kendo-grid-numeric-filter-menu> </ng-template> </kendo-grid-column> <kendo-grid-column field="effectiveDate" title="Date" width="100" format="MM/dd/yyyy"> <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService"> <kendo-grid-date-filter-menu [column]="column" [filter]="filter" [filterService]="filterService"> </kendo-grid-date-filter-menu> </ng-template> </kendo-grid-column> <kendo-grid-column field="amount" title="Amount" width="110" [format]="{ style: 'currency' }"> <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService"> <kendo-grid-numeric-filter-menu [column]="column" [filter]="filter" [filterService]="filterService"> </kendo-grid-numeric-filter-menu> </ng-template> <ng-template kendoGridCellTemplate let-dataItem> <span *ngIf="dataItem.debitCredit == 'DR'">-</span>{{ dataItem.amount | currency: 'USD' }} </ng-template> </kendo-grid-column> <kendo-grid-column field="transactionTypeVerbose" title="Type" width="120"> <ng-template kendoGridFilterMenuTemplate let-column="column" let-filter="filter" let-filterService="filterService"> <multicheck-filter [isPrimitive]="true" [field]="column.field" [filterService]="filterService" [currentFilter]="filter" [data]="distinctPrimitive(column.field)" > </multicheck-filter> </ng-template> </kendo-grid-column> <kendo-grid-column field="source" title="Source" width="120"> <ng-template kendoGridFilterMenuTemplate let-column="column" let-filter="filter" let-filterService="filterService"> <multicheck-filter [isPrimitive]="true" [field]="column.field" [filterService]="filterService" [currentFilter]="filter" [data]="distinctPrimitive(column.field)" > </multicheck-filter> </ng-template> </kendo-grid-column> <kendo-grid-column field="details" title="Details"> </kendo-grid-column> <kendo-grid-column field="transactionCommentFirst" title="Comment"> </kendo-grid-column> <kendo-grid-column data-filterable="false" width="140"> <ng-template kendoGridCellTemplate let-dataItem> <i *ngIf="!dataItem.isRemoving && user.canWrite" (click)="openMoveToPendingModal(dataItem)" class="fa fa-2x fa-share cursor-pointer text-success mr-2" aria-hidden="true" placement="top" ngbTooltip="Move Transaction to Pending Resolution" container="body" ></i> <app-nori-comments [dataItem]="dataItem" [user]="user"></app-nori-comments> <i *ngIf="dataItem.isRemoving && user.canWrite" class="fa fa-2x fa-circle-o-notch fa-spin fa-fw text-primary cursor-pointer mr-2" aria-hidden="true" ></i> <app-audit-history [dataItem]="dataItem"></app-audit-history> <i *ngIf="!dataItem.isRemoving && dataItem.transactionGroup.groupName !== 'Ungrouped' && user.canWrite" (click)="removeFromGroup(dataItem)" class="fa fa-2x fa-minus-circle text-danger cursor-pointer" aria-hidden="true" placement="top" ngbTooltip="Remove from Group" container="body" ></i> </ng-template> </kendo-grid-column></kendo-grid>
Hi.
I'm using donut chart, and I would like to know if there is any way to add a tooltip with the full name of the legend when hovering over it. I needed it because there is a scenario where I add ellipsis when the name is too big. As in the image below:
I'm adding ellipsis changing the legend content:
public legendItemContent = (elements: any): string => {
if (elements.text.length > 30) {
elements.text = elements.text.substring(0, 30);
return elements.text.concat('...');
}
return elements.text;
};I tried several solutions but none were successful. I found out this answer, which was the closest approach, but it's not exactly what I wanted.
If it helps in any way, I'm using this stackblitz project to perform my tests.
Thank you beforehand.
Hello Kendo UI community,
I am going to develop a good-looking UI form with multiple components: input, textboxes, comboboxes, dropdownlists, etc. I am currently doing a research on interesting custom themes built for bootstrap. My question is can we apply those custom themes to the bootstrap that we have for Kendo UI? If yes, what would be the process like? Thanks.
Hi,
Which type replace morning in scheduler ? https://angular-kqsgvs.stackblitz.io
I have following error message "and 'type' does not exist in type 'SchedulerEvent'. type: 'morning'"
Regards
Hello,
I want to place ```kendo-datepicker``` into my website, which I want to be responsive also for mobile devices, i.e. width cca 350 px.
I reduced the font and overall size of all controls (also buttons and comboboxes from bootstrap library) in the view, even the datepicker textbox. I managed also to reduce the size of datepicker popup by scaling it (I found this tip somewhere here in forum), but it's wrongly placed - because the textbox and button on ribbon above are not centered, the popup is not centered as well and is off the left edge.
Screens of popup in original and scaled size are attached.
Is there any straightforward way to reduce it's size (except changing font-size which does not work for me and scaling which I described above) so it would fit into screen?
Thanks for any advice.
Frimlik
Hi
I tried your schedule sample https://stackblitz.com/edit/angular-wttnac-9ednxl
but i have folloing error message
Error: src/app/app.component.ts:18:48 - error TS2339: Property 'slotClass' does not exist on type 'AppComponent'.
Could you help me thanks
Hi
Could i have calender of week and scheduler with day detail visible simultaneously ?
like outlook.
Regards
What to I need to do in onDragEnd() in this sample, it should work?
https://stackblitz.com/edit/angular-jadbh4?file=app%2Fapp.component.ts

Hi,
In a definition like below I get the same Object in the 'dataItem' parameter as in the 'formGroup' parameter. This leads to me not being able to access the dataItem in my template.
<ng-template kendoGridEditTemplate let-dataItem let-formGroup="formGroup">
<!-- Usage of both dataItem and formGroup -->
</ng-template>
I am trying to have dynamic data in a kendo grid which is determined at runtime. The structure of data is an array of arrays of objects. Visually, I would like to have dynamically generated column groups that contain two columns, and the columns have as many rows as objects within the array of arrays. I've been struggling how to make this happen, due to various issues. One issue is that the column indexes add even if they are being dynamically generated (but instead should be reset upon a new column group, but just increases with the next columngroup). I also noticed that the row size is always the same as the column size, because when adjusting the number of inner arrays, both the row size and column size are exactly the same, that is, the number of inner arrays, and the rowsize does not depend on the amount of objects within a given inner array (as it normally does were all the objects in the outer array, and that is the behavior I would want).
Here is a link that shows an example of what I'm talking about, with a normal html table on top that is in the style I'm looking for, and on the bottom the kendo grid that isn't styling like I want it to:
https://stackblitz.com/edit/angular-u9unhk?file=app/app.component.ts
(I've tried many different ways to mimic the top behavior but I have so far failed to do it. )
Any help would be greatly appreciated!