or
0 answers
225 views
Hi Team ,
In our use case we wanted a tabular view inside spanned columns cell value.
Example Structure Inside Spanned columns:
<kendo-grid-span-column [style]="{ 'padding': '0px'}">
<!-- CAPA NAME -->
<kendo-grid-column field="cName" title="CName" [width]="180">
</kendo-grid-column>
<kendo-grid-column field="cDescription" title="CDescription" [width]="180">
</kendo-grid-column>
<kendo-grid-column field="cCategory" title="CCategory" [width]="180">
</kendo-grid-column>
<kendo-grid-column field="pName" title="pName" [width]="180">
</kendo-grid-column>
<kendo-grid-column field="pValue" title="pValue" [width]="180">
</kendo-grid-column>
<ng-template kendoGridCellTemplate let-dataItem>
<tr style="height:200px"class="border-tr" *ngFor="let item of dataItem.capability">
<td class="border-td column-style-class" width=19.9%>
<p>{{ item?.cName }}</p>
</td>
<td class="border-td column-style-class" width=20.2%>
<p>{{ item?.cDescription }}</p>
</td>
<td class="border-td column-style-class" width=20%>{{ item?.cCategory }}
<span><button (click)="removeCapability(item)" kendoGridRemoveCommand>Remove</button></span>
</td>
<td style="padding:0px" >
<div style="height:300px !important;overflow-y:scroll;">
<tr *ngFor="let itemParam of item.parameters" >
<td width=50.1% class="border-td column-style-class">{{itemParam.pName}}</td>
<td [width]="460" class="border-td column-style-class">
<kendo-textbox *ngIf="itemParam.pName == 'Name' || itemParam.pName == 'InterfaceIndex' "
[style.width]="460" (change)="updateCapabilityParameters($event,itemParam,item)"
placeholder="Type your message here" [clearButton]="true" [value]=itemParam.pValue>
</kendo-textbox>
<kendo-dropdownlist [style.width]="460"
*ngIf="itemParam.pName == 'Ingress' || itemParam.pName == 'Egress'"
[data]="listItemsIngressEgress" [value]=itemParam.pValue> </kendo-dropdownlist>
<button kendoButton [style.width]="460" *ngIf="!openedDialog && itemParam.pName == 'Alias'"
(click)="open(itemParam.pName )">Details</button>
</td>
</tr>
</div>
</td>
</tr>
</ng-template>
</kendo-grid-span-column>
But with this customization we are not able to achieve proper stylings and filters provided by kendo-grid.
0 answers
147 views
<div class="container" style="min-height: 50px; margin-top: 0px;">
<div class="col-md-12">
<div class="statistics">
<div id="myRoleItemsAll" >
<button [ngClass]="{'selected' : totalMySupportVarianceSelected}" class="statistic-box statistic-box-3" (click)="displayTotalVarianceMyAwaitingSupport()">
<p class="countnumber countnumber-purple">{{totalMySupportVarianceCount}}</p>
<label>Total</label>
</button>
</div>
<div id="myRoleItemsActive" >
<button [ngClass]="{'selected' : pendingByMeVarianceSelected}" class="statistic-box statistic-box-3" (click)="displayPendingByMeVarianceMyAwaitingSupport()">
<p class="countnumber countnumber-green">{{pendingByMeVarianceCount}}</p>
<label>Pending on Me</label>
</button>
</div>
<div id="myRoleItemsExpired" >
<button [ngClass]="{'selected' : doneByMeVarianceSelected}" class="statistic-box statistic-box-3" (click)="displayDoneByMeVarianceMyAwaitingSupport()">
<p class="countnumber countnumber-red">{{doneByMeVarianceCount}}</p>
<label>Done by Me</label>
</button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="panelGridContainer">
<ng-template #template let-anchor>
<span>{{ anchor.nativeElement.innerText }}</span>
</ng-template>
<div kendoTooltip
showOn="none"
[tooltipTemplate]="template"
filter=".k-grid td"
(mouseover)="showTooltip($event)"
position="right"
>
<kendo-grid
[data]="viewMySupport"
[columnMenu]="false"
filterable='menu'
[filter]="gridState.filter"
[resizable]="true"
[sort]="gridState.sort"
[sortable]="true"
(filterChange)="filterChange($event)"
(dataStateChange)="onStateChange($event)"
[navigable]="true"
[style.height.%]="300"
>
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand icon="file-excel">
Export to Excel
</button>
</ng-template>
<kendo-grid-column
field="varianceID"
title=" Variance ID"
>
<ng-template kendoGridCellTemplate let-dataItem>
<a style="color:#337ab7" [routerLink]="['/variance/edit/'+dataItem.varianceID]">{{dataItem.varianceID}}</a>
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="varianceTitle"
title="Variance Title"
>
<ng-template kendoGridCellTemplate let-dataItem>
<span style="overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;"
>
{{ dataItem.varianceTitle }}
</span>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="expirationDate" title="Expiration Date"
format="MM/dd/yyyy"
filter="date"
>
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.expirationDate | date: 'MM/dd/yyyy'}}
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="status"
title="Status"
></kendo-grid-column>
<kendo-grid-excel fileName="VarianceAwaitingSupportList.xlsx"></kendo-grid-excel>
</kendo-grid>
</div>
import { Component, Inject, OnInit, ViewChild } from '@angular/core';
import { filter, map, Observable } from 'rxjs';
import { GridDataResult, DataStateChangeEvent, GridComponent } from "@progress/kendo-angular-grid";
import { State, process, FilterDescriptor, FilterOperator, CompositeFilterDescriptor, DataSourceRequestState } from "@progress/kendo-data-query";
import { TooltipDirective } from '@progress/kendo-angular-tooltip';
import { AuthService } from 'src/app/services/general-app-services/auth/auth.service';
import { AwaitingSupportDashboardDataService } from 'src/app/admin/services/awaiting-support-dashboard-data.service';
@Component({
selector: 'app-supportawaitingitems',
templateUrl: './supportawaitingitems.component.html',
styleUrls: ['./supportawaitingitems.component.css']
})
export class SupportawaitingitemsComponent implements OnInit {
@ViewChild(TooltipDirective) public tooltipDir: TooltipDirective;
currentUserId: string;
public viewMySupportData: Observable<GridDataResult> | any;
public viewMySupport: Observable<GridDataResult> | any;
public gridState: State = {
sort: [],
// // Initial filter descriptor
filter: {
logic: 'and',
filters: []
}
};
public totalMySupportVarianceCount: number | undefined;
public pendingByMeVarianceCount: number | undefined;
public doneByMeVarianceCount: number | undefined;
totalMySupportVarianceSelected: boolean | undefined = true;
pendingByMeVarianceSelected: boolean | undefined = false;
doneByMeVarianceSelected: boolean | undefined = false;
private awaitingSupportService: AwaitingSupportDashboardDataService;
pendingState: string = "ActionPending";
doneState: string = "ActionDone";
constructor(@Inject(AwaitingSupportDashboardDataService) AwaitingSupportDashboardDataServiceFactory: () => AwaitingSupportDashboardDataService,
private authService: AuthService) {
this.awaitingSupportService = AwaitingSupportDashboardDataServiceFactory();
this.currentUserId = authService.getUserId();
}
public ngOnInit() {
this.awaitingSupportService.fetchCountOfVarianceAwaitingSupport(this.currentUserId).subscribe((val: any) => {
this.totalMySupportVarianceCount = val[0].totalVarianceCountForSupporter;
this.pendingByMeVarianceCount = val[0].pendingSupporterAction;
this.doneByMeVarianceCount = val[0].completedSupporterAction;
});
this.viewMySupportData = this.awaitingSupportService.pipe(
map((data) => process(data, this.gridState))
);
this.viewMySupport = this.viewMySupportData.subscribe(val => {
this.viewMySupport = val;
});
this.awaitingSupportService.read(this.currentUserId);
}
public onStateChange(state: DataSourceRequestState): void {
this.gridState = state;
this.awaitingSupportService.read(this.currentUserId);
}
public displayTotalVarianceMyAwaitingSupport() {
this.totalMySupportVarianceSelected = true;
this.pendingByMeVarianceSelected = false;
this.doneByMeVarianceSelected = false;
this.loadVariaceByStatus('All',true);
}
public filterChange(filter: CompositeFilterDescriptor): void
{
this.gridState.filter = filter;
//this.logs = filterBy(sampleProducts, filter);
}
public displayPendingByMeVarianceMyAwaitingSupport() {
this.totalMySupportVarianceSelected = false;
this.pendingByMeVarianceSelected = true;
this.doneByMeVarianceSelected = false;
this.loadVariaceByStatus(this.pendingState,false);
}
public displayDoneByMeVarianceMyAwaitingSupport() {
this.totalMySupportVarianceSelected = false;
this.pendingByMeVarianceSelected = false;
this.doneByMeVarianceSelected = true;
this.loadVariaceByStatus(this.doneState,false);
}
loadVariaceByStatus(statusCall: string, isTotalCall: boolean) {
if (isTotalCall) {
this.viewMySupportData = this.awaitingSupportService.pipe(
map((data) => process(data, this.gridState))
);
this.viewMySupport = this.viewMySupportData.subscribe(val => {
this.viewMySupport = val;
});
} else {
this.viewMySupportData = this.awaitingSupportService.pipe(
map((data) => process(data.filter(x => x.state === statusCall), this.gridState))
);
this.viewMySupport = this.viewMySupportData.subscribe(val => {
this.viewMySupport = val;
});
}
this.awaitingSupportService.read(this.currentUserId);
}
public showTooltip(e: MouseEvent): void {
const element = e.target as HTMLElement;
if ((element.nodeName === 'TD' || element.nodeName === 'TH')
&& element.offsetWidth < element.scrollWidth) {
this.tooltipDir.toggle(element);
} else {
this.tooltipDir.hide();
}
}
}
1 answer
184 views
Hi team,
I am working on a simple UI where kendo combo-box is a column of a kendo tree-list. The problem is, the opening and closing of kendo combo-box also expands and collapses the kendo tree-list's row.
I think the event of kendo-combo-box is bubbled to treelist. Is this a bug or am I missing something? Here's my Stackblitz example for reproducing the issue (Link: https://stackblitz.com/edit/angular-18guak?file=src/app/app.component.ts)
Thanks,
Deepak
0 answers
125 views
The data is charged correctly, and the selected values are added correctly into the list.
It binds correctly when the values are already selected, but when you try to add more doesnt work. Like this:
The code is down below.
xabi
Top achievements
Rank 1
Rank 1
asked
on
18 Nov 2022
0 answers
178 views
I have used the kendo tree view component with multi select check boxes.
and when I check them it will return the position of the node tree item. like below image.
My problem is how can I get the text of the selected items instead of this checked keys.
Here is my code
<div class="example-config">Checked keys: {{ checkedKeys.join(",") }}</div>
<kendo-treeview
textField="moduleName"
[nodes]="nodes"
[children]="children"
[hasChildren]="hasChildren"
kendoTreeViewExpandable
kendoTreeViewCheckable
class="k-treeview"
[(checkedKeys)]="checkedKeys"
(checkedChange)="checked(checkedKeys)"
>
<ng-template kendoTreeViewNodeTemplate let-dataItem>
{{dataItem.moduleName || dataItem.featureName}}
</ng-template>
</kendo-treeview> public checkedKeys: any[] = [];
public nodes: any[] = [
{
moduleId: 1,
moduleName: 'Home',
features: [
{
featureId: 2,
featureName: 'Orgonization',
subFeatures: [
{
featureId: 4,
featureName: 'Group Activity Solution',
subFeatures: [
{
featureId: 10,
featureName: 'Test',
subFeatures: [{
featureId: 8,
featureName: '8888888888',
subFeatures: []
}]
},
{
featureId: 11,
featureName: 'New',
subFeatures: []
},
]
},
{
featureId: 4,
featureName: 'Office of the CIO',
subFeatures: []
},
]
},
{
featureId: 3,
featureName: 'Planing',
subFeatures: [
{
featureId: 4,
featureName: 'Group Activity Solution',
subFeatures: []
},
{
featureId: 4,
featureName: 'Office of the CIO',
subFeatures: []
},
]
},
],
},
];
/**
* A function that returns an observable instance which contains the
* [child nodes](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-children)
* for a given parent node.
*/
public children = (dataitem: any): Observable<any[]> =>
of(dataitem.features || dataitem.subFeatures);
/**
* A function that determines whether a given node
* [has children](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-haschildren).
*/
public hasChildren = (dataitem: any): boolean =>
!!dataitem.features || !!dataitem.subFeatures;
Nimni
Top achievements
Rank 1
Rank 1
asked
on
17 Nov 2022
0 answers
195 views
I have used the kendo tree view component with multi select check boxes.
and when I check them it will return the position of the node tree item. like below image.
My problem is how can I get the text of the selected items instead of this checked keys.
Here is my code
<div class="example-config">Checked keys: {{ checkedKeys.join(",") }}</div>
<kendo-treeview
textField="moduleName"
[nodes]="nodes"
[children]="children"
[hasChildren]="hasChildren"
kendoTreeViewExpandable
kendoTreeViewCheckable
class="k-treeview"
[(checkedKeys)]="checkedKeys"
(checkedChange)="checked(checkedKeys)"
>
<ng-template kendoTreeViewNodeTemplate let-dataItem>
{{dataItem.moduleName || dataItem.featureName}}
</ng-template>
</kendo-treeview> public checkedKeys: any[] = [];
public nodes: any[] = [
{
moduleId: 1,
moduleName: 'Home',
features: [
{
featureId: 2,
featureName: 'Orgonization',
subFeatures: [
{
featureId: 4,
featureName: 'Group Activity Solution',
subFeatures: [
{
featureId: 10,
featureName: 'Test',
subFeatures: [{
featureId: 8,
featureName: '8888888888',
subFeatures: []
}]
},
{
featureId: 11,
featureName: 'New',
subFeatures: []
},
]
},
{
featureId: 4,
featureName: 'Office of the CIO',
subFeatures: []
},
]
},
{
featureId: 3,
featureName: 'Planing',
subFeatures: [
{
featureId: 4,
featureName: 'Group Activity Solution',
subFeatures: []
},
{
featureId: 4,
featureName: 'Office of the CIO',
subFeatures: []
},
]
},
],
},
];
/**
* A function that returns an observable instance which contains the
* [child nodes](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-children)
* for a given parent node.
*/
public children = (dataitem: any): Observable<any[]> =>
of(dataitem.features || dataitem.subFeatures);
/**
* A function that determines whether a given node
* [has children](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-haschildren).
*/
public hasChildren = (dataitem: any): boolean =>
!!dataitem.features || !!dataitem.subFeatures;
Nimni
Top achievements
Rank 1
Rank 1
asked
on
17 Nov 2022
0 answers
178 views
I am using Kendo UI timeline view for scheduling events in a day.
I want to provide a feature where user can clone (create a copy of) existing events and edit them as required in order to minimize their work.
I found this concept in jQuery where they are cloning events using keyboard shortcuts(https://docs.telerik.com/kendo-ui/knowledge-base/clone-events-on-ctrl-and-click) but there is no way available to do the same in Angular.
Kindly help in achieving this feature as I am new to Telerik UI.
1 answer
464 views
My treeview is defined as follows:
<kendo-treeview
#treeView
kendoTreeViewExpandable
kendoTreeViewSelectable
(selectionChange)="edit($event)"
[(expandedKeys)]="expandedKeys"
textField="text"
[filter]="filterTerm"
[nodes]="keyValues$ | async"
[children]="fetchChildren"
[hasChildren]="hasChildren"
>
As the screen is opened I set the expandedKeys so that some of my nodes are by default opened, and the data is automatically loaded in.
However certain nodes have children which I would also like to load when their parent is opened, and to further complicate the matter, a different call to the server is required than the one defined in fetchChildren for fetching this data.
Is there any way I can independently load this data, not using fetchChildren and then programmatically insert it into the tree? It seems as though there isn't a way to perform a hybrid approach to data loading...
Martin Bechev
Telerik team
answered
on
16 Nov 2022
0 answers
289 views
Hello,
I'm using the Angular Hierarchical Drawer and I added a toggle button to expand/ collapse all items.
How can I expand/ collapse the items in the drawer using this toggle button?
Thanks
I'm using the Angular Hierarchical Drawer and I added a toggle button to expand/ collapse all items.
How can I expand/ collapse the items in the drawer using this toggle button?
Thanks
1 answer
518 views
I have a use case for this component where I don't wish the user to be able to create nested expressions. Is there any way to control the enabling / disabling of the Add Group button. Or show / hide it depending on nesting level?
Martin Bechev
Telerik team
answered
on
14 Nov 2022
