Hello, there is an example how to close the popup on document click (https://www.telerik.com/kendo-angular-ui/components/popup/closing/#toc-on-document-click-or-escape), but the source doest'n loading.I need a best practice solution without triggering the change detection for the whole application.
Regards
Hi
Im noticing some behaviors I was not expecting when using the treeview with checkboxes and expandable nodes.
Some of it could be my understanding of expectations.
My sample code is here, it's a hierarchy of users with expandable nodes and checkboxes and it shows what keys have been checked, what keys have been expanded and includes buttons for collapsing and expanding and a search.
https://stackblitz.com/edit/angular-cnzlah?file=app/app.component.ts
1. Open the sample, The treeview loads collapsed,
if i check "User 1", i see it in my list of checked keys (1),
if i open the "User 1" node using the chevron, i then see more checked keys(1,2,4). Is this expected behavior ?
I would expect after checking "user 1" to see all the keys checked (1,2,3,4) since checkChildren = true.
If I expand all then check "User 1" then i do see all the nodes checked (1.2.3.4)
2. Refresh the sample,
Check "user 1",
expand the "User 1" node,
expand the "User 2" node.
Uncheck user 1",
collapse the "User 1" node,
Check user 1",
expand the "User 1" node,
*** now the child nodes are not being checked
3. Refresh the sample,
Check "user 1",
Click "Expand All" button ...
*** now the child nodes are not being checked ....
Hello. Is it possible to hide scroll on grid if data list is short and show when it's big? For example when we filter data list.
I found only this solution:
<
input
type
=
"text"
#filterInput
placeholder
=
"Search"
(keyup)="itemsFilter(filterInput.value)" />
<
kendo-grid
class
=
"grid-customized-border"
[style.height.px]="300"
scrollable
=
"scrollable"
[data]="gridView"
[sortable]="{
allowUnsort: allowUnsort,
mode: 'single'
}"
[sort]="sort"
(sortChange)="sortChange($event)"
[selectable]="true"
[kendoGridSelectBy]="'id'"
[selectedKeys]="selectedRows"
#grid
>
itemsFilter(value) {
if (value) {
this.gridView.data = this.gridView.data(item => {
return item.title.toLowerCase().indexOf(value.toLowerCase()) === 0
});
}
setTimeout(() => this.toggleScroll());
}
public toggleScroll() {
if (this.grid) {
let el = this.grid.nativeElement,
content = el.querySelectorAll('.k-grid-content')[0],
table = el.querySelectorAll('.k-grid-table-wrap')[0],
header = el.querySelectorAll('.k-grid-header')[0];
if (table && content) {
if (table.offsetHeight < content.offsetHeight) {
content.style.cssText = 'overflow-y: auto';
header.style.cssText = 'padding: 0';
} else {
header.style.cssText = 'padding: 0 16px 0 0';
}
}
}
}
I do not want to display Section/Group name on each row. As in this example:
Type Name : Lifecycle
So, instead of Type Name : Lifecycle, I just want to display Lifecycle.
Please help. I am using Angular 8 so prefer not to use jquery if possible.
Hello,
I'm following your stackblitz example:
https://stackblitz.com/run/?file=app%2Fapp.component.ts
of a stepper form but when I click the next button it is saying my stepper is undefined, why is this?
public next(): void {
if (this.currentGroup.valid && this.currentStep !== this.steps.length) {
this.currentStep += 1;
return;
}
this.currentGroup.markAllAsTouched();
this.stepper.validateSteps(); //this showing as undefined
}
Thanks
Sinead
Using the built in date filter is not serializing properly.
When the API receives the request I get a 500 error.
Looking at the serialized filter I think the format is wrong:
?page=1&pageSize=10&filter=creationTime~gte~datetime%272020-12-01T19-00-00-05-0%27
this is how I build the query string:
const queryStr = `${toDataSourceRequestString(state)}`;
hi
i I have added a menu to the kendo grid headerTemplate that displays a Popup. When I click on the inside popup, the column is sorted
How can I disable this?
I am using the kendo-chart to display charts in my application. I need to format the values on the chart to currency. I have tried to use the format option on the kendo-chart-series-item but that did not work.
<kendo-chart [title]="{ text: selectedCommentDriver?.driverTypeText + ' Chart' }" *ngIf="selectedCommentDriver?.driverType === 1">
<kendo-chart-series >
<kendo-chart-series-item type="column" [data]="(ChartData$ | async) ?.acuityChartData" field="nprImpact" categoryField="chartLabelText" [labels]="seriesLabels" >
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item>
<kendo-chart-category-axis-item-labels [position]="'end'"></kendo-chart-category-axis-item-labels>
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
</kendo-chart>
Here is a sample of the bar chart with sample data of 100000. I would like these values to be $100,000.00
Thank you for the help,
Jimmy
Hi
I was checking this https://www.telerik.com/kendo-angular-ui/components/data-query/api/FilterDescriptor/#toc-ignorecase and tried to use the gte on my filters like in the following example:
public onFilter(inputValue: string): void {
this.gridView = process(this.gridData, {
filter: {
logic: 'or',
filters: [
{
field: 'mainDate',
operator: 'gte',
value: inputValue
},
{
field: 'otherDate',
operator: 'gte',
value: inputValue
}
],
}
}).data;
My dates are all formatted in the European date format using a pipe like this in the template:
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem[col.field] | date:'dd/MM/yyyy'}}
</ng-template>
but when I am trying to search for a date ex: 21/05/2010 the data are not filtered on mainDate and otherDate dates greater than 21/05/2010. I am not getting any kind of JS error, but the grid is getting empty, like it doesn't find anything mathcing the filter.
If it's not clear, I could try to make an example on stackblitz.