Hello,
Im using angular 16 and .net core 7 version. When i send request to back-end, i can handle. But i have a problem.
I had the same problem as the one that was opened in git:
https://github.com/telerik/kendo-angular/issues/889
Using the example that user "dtopalov" left
https://www.telerik.com/kendo-angular-ui/components/grid/selection/persisting/#toc-with-virtual-scrolling
The provided event (selectionChange) does not provide the rows that were deselected.
I changed the pagesize to 10 and when I select item 1, 3, 4 and 6 (all items using "ctrl") the event returns correctly, but if I scroll down and select an item by pressing "shift" the grid will deselect items 1, 3 and 4 and the event does not return items unchecked in the event.
And I need to get this information because I need to emit the rows that are not selected. How can I get the items that have been deselected?
I put a gif with the example:
https://cdn.discordapp.com/attachments/1215659099467808849/1275169938834849864/kendofu.gif?ex=66c4ea0c&is=66c3988c&hm=e1c9a362fe115d0e2e8eed242c6f7002f71e770729412d5e5eaaafa80ea9dbdd&
stackblitz:
https://stackblitz.com/run/?file=src%2Fapp%2Fapp.component.ts
Hey there,
I have a line chart with invisible markers.
The marker (and therefor the tooltip) should only appear when hovered or touched, which it does so far.
But for a touchscreen device the hitbox to trigger the tooltip on a marker that is not visible seems very small, so one has to be very exact in hitting the line, for me it usually takes 2 or 3 times to hit it correctly. Is there any possibility to increase the hitbox without showing and / or increasing the marker size? I found out increasing the marker size without showing the markers does not help either.
I tried various css modifications for k-marker something along these:
.k-marker {
margin: 20px !important;
background-color: yellow !important;
padding: 50px !important;
border: 2px solid red !important;
}
to get any visual representation or feedback, but nothing seems to work.
I am aware that I can increase line thickness, but visually this is not an option.
On a different note, once I hit one point, it seems easier to hit another point on that line. It seems somehow there is an "active" line, is it possible to preselect the "active" line to get a workaround?
Am I missing something?
Any help is appreciated.
Best regards,
Leo
Hi,
currently I'm evaluating/experimenting with the kendo grid. I have a question regarding grid editing. I read, that we can use the directive 'kendoGridInCellEditing' to simplify our code base and avoid bolierplate codes. But in this case if we click on a cell, the cell goes automatically in edit mode. Alternatively we can use the 'manual' mode and write all the boilerplate code. I found a feature request on this topic: https://feedback.telerik.com/kendo-angular-ui/1661188-provide-an-option-for-activating-in-cell-editing-on-double-click
I investigated the internal methods of the grid and did the following:
this.grid.cellClick.subscribe((cellClickEvent) => {
this.grid.closeCell();
});
With this piece of code, the grid won't go in edit mode. This is fine, but regardless of this, if we inspect f. e. the grid row element in the browser debug mode, then we see, that after clicking on a cell, the row element is updated. The question is, how we can prevent it, while having the 'kendoGridInCellEditing' still active?
In the meantime I discovered, that the updating of the row element occurs also in any other cases if the cell goes in edit mode. In the kendo source code there should be some logic, which updates the 'tr' element of the grid. I guess this is because an editor is showing in the grid. How can we avoid this update? The background of my question is, that I do some DOM manipulation inside the grid, and every time, if the grid goes in edit mode, this manipulations are gone, because the 'tr' element gets refreshed.
Hi,
I am trying to build angular 17 standalone component based on kendo ui menu for angular. Goal is to replace menu in old angularjs app built using kendo ui for jquery. I am trying to migrate little parts one by one.
I built component and added it to the old app, menu is rendered using default theme, but for some reason menu is dead - open or select events don't trigger. So i don't see submenus or cant select even anything on the root.
On the other side, if i put kendo ui button for angular in the same component, it works normally and triggers event on click.
Do you please have any ideas how to proceed next, because menu is one of crucial components I need for the further migration.
Thank you.
Regards,
Vedad
In Angular Grid Grouping, Do we have the ability to display a row with multiple columns instead of a specific field?
For Ex:
https://www.telerik.com/kendo-angular-ui/components/grid/grouping/basics/
Instead of adding a specific field that we group by, Could we add a row with multiple columns?
Additionally, is there a way to achieve a hierarchical view within the grid itself? Similar to the Master Detail functionality, we'd like to have sub-rows that share the same columns as the main row, but without treating them as separate components with distinct headers.
https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/#:~:text=To%20apply%20a%20hierarchical%20order%20to%20the%20desired,are%20filtered%20by%20the%20parent%20key%20field%20value.
<activity-overlay [activity]="portfolioDataLoader$" class="fade-out">
<kendo-grid [data]="buildings" [height]="500" [filterable]="true" >
<kendo-grid-column field="name" [title]="'GROUP_DETAILS.NAME' | translate" width="200" [filterable]="true" ></kendo-grid-column>
<kendo-grid-column field="description" [title]="'GROUP_DETAILS.DESCRIPTION' | translate" width="300" [filterable]="true"></kendo-grid-column>
<kendo-grid-column [title]="'PORTFOLIO.DETAILED_VIEW'| translate" [style.text-align]="'center'">
<ng-template kendoGridCellTemplate let-dataItem>
<i class="tk tk-arrow-r-o tk-3x font-weight-bold w-100 text-center" (click)="detailView(dataItem)"></i>
</ng-template>
</kendo-grid-column>
<kendo-grid-column [title]="'PORTFOLIO.ACTIONS' | translate">
<ng-template kendoGridCellTemplate let-dataItem>
<div class="d-flex gap-2 w-100 justify-content-center">
<i class="tk tk-pencil-o tk-3x font-weight-bold text-center edit" [hidden]="dataItem.isUpdating"
(click)="editGroup(dataItem)"></i>
<i class="tk tk-check-o tk-3x font-weight-bold text-center save"
[class]="isSavingInProgress ? 'k-icon k-i-loading' : ''" [hidden]="!dataItem.isUpdating"
(click)="saveChanges(dataItem)"></i>
<i class="tk tk-reset-o tk-3x font-weight-bold text-center reset" [hidden]="!dataItem.isUpdating"
(click)="resetGroup(dataItem)"></i>
</div>
</ng-template>
</kendo-grid-column>
<ng-template kendoGridDetailTemplate="" let-dataItem>
<kendo-grid class="inline-grid" [data]="buildingsGroupByNames[dataItem.name] ? buildingsGroupByNames[dataItem.name] : []" [scrollable]="'none'">
<kendo-grid-column field="groupName" [title]="'PORTFOLIO.GROUP_NAME' | translate"></kendo-grid-column>
<kendo-grid-column field="rearDoors" [title]="'PORTFOLIO.FLOORS' | translate">
<ng-template kendoGridCellTemplate let-dataItem>
<kendo-multiselect [clearButton]="false" [disabled]="true" [data]="groupStopsInfo[dataItem.groupDeviceId]"
textField="groupFloorLabel"
valueField="groupStopId" valuePrimitive="true"
[(ngModel)]="dataItem.groupFloorAccess">
<ng-template kendoMultiSelectHeaderTemplate let-dataItem>
<div class="content-box">
<p class="lead m-0">
{{'PORTFOLIO.SELECT_ALL' | translate}}
</p>
</div>
</ng-template>
</kendo-multiselect>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="isVipCallsAllowed" [title]="'PORTFOLIO.PERMISSIONS' | translate">
<ng-template kendoGridCellTemplate let-dataItem>
<kendo-multiselect [data]="elevatorFunctionalityLOV" [clearButton]="false"
[disabled]="!dataItem.isUpdating" [(ngModel)]="dataItem.permissions">
<ng-template kendoMultiSelectItemTemplate="" let-dataItem>
<ng-container [ngSwitch]="dataItem">
<ng-container *ngSwitchCase="'isVipCallsAllowed'">{{'PORTFOLIO.ALLOW_VIP_CALLS' |
translate}}</ng-container>
<ng-container *ngSwitchCase="'isHandicapCallsAllowed'">{{'PORTFOLIO.ALLOW_HANDICAP_CALLS' |
translate}}</ng-container>
</ng-container>
</ng-template>
<ng-template kendoMultiSelectTagTemplate let-dataItem>
<ng-container [ngSwitch]="dataItem">
<ng-container *ngSwitchCase="'isVipCallsAllowed'">{{'PORTFOLIO.ALLOW_VIP_CALLS' |
translate}}</ng-container>
<ng-container *ngSwitchCase="'isHandicapCallsAllowed'">{{'PORTFOLIO.ALLOW_HANDICAP_CALLS' |
translate}}</ng-container>
</ng-container>
</ng-template>
</kendo-multiselect>
</ng-template>
</kendo-grid-column>
</kendo-grid>
</ng-template>
</kendo-grid>
<ng-template #floorsTemplate let-floors>
<span>{{ floors.value === 'all' ? 'All floors' : floors.value.join(', ') }}</span>
</ng-template>
<button type="button" class="btn btn-primary d-flex gap-2 align-items-center mt-4" (click)="addGroup()">
<i class="tk tk-plus-o tk-2x"></i>
<span>{{'PORTFOLIO.CREATE_USER_GROUP' | translate}}</span>
</button>
</activity-overlay>
I added [filterable]-true property for Name and Description property filters are coming. But they are not working when I try to search
Below is the output :-
Hello,
the Timeline component displays a collection of events grouped by the year of the event.
Is there a way to group the events in a more granular way? E.g. by month?
Best regards,
Thomas