How to tap in to the click event of the "+" expand "-" collapse click events. Clicking on the row triggers the "cellClickHandler($event)", I need it to be able to handle detail click as an event also.
<kendo-grid
[data]="mainData"
(cellClick)="cellClickHandler($event)"
>
<kendo-grid-column>
// column stuff
</kendo-grid-column>
<kendo-grid-column>
// more column stuff
</kendo-grid-column>
<ng-template kendoGridDetailTemplate>
<table> // stuff </table>
</ng-template>
</kendo-grid>
In trying to move the Master-Detail Grid example from the Telerik site [ https://www.telerik.com/kendo-angular-ui/components/grid/advanced-features/hierarchy/ ] to a VS Code solution, I am greeted by the following error when the solution is served;
"ERROR in src/app/category-details.component.ts(44,39): error TS2345: Argument of type 'Object' is not assignable to parameter of type '{ CategoryID: number; }'."
I have found some threads suggesting this may be due to a change in Angular 2.2.
Any thoughts as to why this solution still works as a Plunker, yet not as a VS Code solution; what am I missing here?
I've been using the InCellEditing and GridBinding directives with the KendoGrid in the way shown in your InCellEditing Example (https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-directives/#toc-the-in-cell-directive)
What I've needed to do recently is (ideally) subscribe to an Observable that would give me give me all the current data in the grid every time some data has been changed (added/updated/removed).
I went digging through the grid code base and saw that the Grid & InCellEditingDirective is injected with a LocalDataChangesService. I'd love to be able to access this service too so that I can consume a stream of change events.
Is there an easy way to achieve this?
Is it possible to render the legend marker as a line matching the dash types (i.e. dot, dash, solid).
In this plunker for instance, two line series have the same colour but differentiate on dash type and I want the legend to reflect that.
http://plnkr.co/edit/SRAahc7NN9LRDiq9EfLt?p=preview
Hi,
I am trying add a dropdown as filter in the column template. Using this I managed to do it but I doesn't apply the filter to the grid. The Plunker doesn't work due to 'Access-Control-Allow-Origin' problem so I can't see any live example. The dropbownlist is shown and the value returns correctly but nothing happens in the grid. I've added field parameter since the fieldName and valueField is not the same. I've recognized that the filter is always undefined.
My HTML:
<
kendo-grid-column
field
=
"sSY90Falttyp"
title
=
"Fälttyp"
width
=
"160px"
>
<
ng-template
kendoGridFilterCellTemplate let-filter>
<
my-dropdown-filter
[filter]="filter" [data]="fieldTypes"
textField
=
"text"
valueField
=
"value"
field
=
"sSY90Falttyp"
>
</
my-dropdown-filter
>
</
ng-template
>
<
ng-template
kendoGridCellTemplate let-dataItem>
{{getFieldTypeText(dataItem.sSY90Falttyp)}}
</
ng-template
>
</
kendo-grid-column
>
DropdownlistFilterComponent:
import { Component, OnInit, Input } from
'@angular/core'
;
import { CompositeFilterDescriptor, FilterDescriptor } from
'@progress/kendo-data-query'
;
import { FilterService, BaseFilterCellComponent } from
'@progress/kendo-angular-grid'
;
@Component({
selector:
'my-dropdown-filter'
,
templateUrl:
'./dropdownlist-filter.component.html'
,
styleUrls: [
'./dropdownlist-filter.component.scss'
]
})
export class DropdownlistFilterComponent extends BaseFilterCellComponent {
public get selectedValue(): any {
const filter =
this
.filterByField(
this
.field);
return
filter ? filter.value :
null
;
}
@Input() public filter = <CompositeFilterDescriptor>
null
;
@Input() public data: any[];
@Input() public textField: string;
@Input() public valueField: string;
@Input() public field: string;
public get defaultItem(): any {
return
{
[
this
.textField]:
"Select item..."
,
[
this
.valueField]:
null
};
}
constructor(filterService: FilterService) {
super
(filterService);
}
public onChange(value: any): void {
this
.applyFilter(
value ===
null
?
// value of the default item
this
.removeFilter(
this
.valueField) :
// remove the filter
this
.updateFilter({
// add a filter for the field with the value
field:
this
.field,
operator:
"eq"
,
value: value
})
);
// update the root filter
}
}
Hi,
Is it possible to use TreeView in Kendo UI Angular? We found that on JQuery but we couldn't find on Kendo UI Angular? Also, we found a npm package on https://www.npmjs.com/package/@progress/kendo-angular-treeview. Is it beta version? If you have treeview in angular, can you propose an example for it?
Best wishes.
Hi all,
I've implemented Virtual Scrolling with Custom Binding Directive.
Unfortunately, I have an issue when converting State to query string using toDataSourceRequestString:
if virtual scrolling requests to skip 49 records, with pageSize =100 it gets converted by toDataSourceRequestString to Page=1&pageSize=100
and incorrect results are returned.
Please suggest fix or workaround.
Thanks,
Yuriy
Hello,
I have tried the DropDownList using "valuePrimitive" like in one of your demos. But I think there is a little bug which only appears when the "valuePrimitive" is set to "true". You can reproduce this in your example: If you open the dropdown, and then leave it without choosing any of the options it is loosing the selected value.
This only happens after the initial loading of the control. If you first select a value and then open the control again, leaving it, it keeps the value correctly.
Best regards!