Hi ,
I am using the Kendo Grid to display some data with checkboxes , I am trying to checked the item checkbox if the item is already selected , the selected item id is store on a separate sql table .
The process is ; load items , load selected items , add selected items to selectedKeys.
for some reason the first time the page is loaded selectedKeys is empty , but if a navigate to another page and back to the page the selected items are checked.
I can only assume the selectedKeys are not populated on time for the grid to update the checkboxes , I have try NgOnInit , ngAfterViewInit.
Any Ideas ?
HTML
<kendo-grid [data]="gridData"
(dataStateChange)="dataStateChange($event)"
[filterable]="true"
[filter]="state.filter"
[sortable]="true"
[sort]="state.sort"
[pageSize]="20"
[pageable]="true"
kendoGridSelectBy="codeNumber"
[selectedKeys]="selectedCodes"
(selectionChange)="onSelect($event)"
[selectable]="selectableSettings">
<kendo-grid-column field="codeNumber" title="Code Number"> </kendo-grid-column>
<kendo-grid-checkbox-column title="Use on Project"></kendo-grid-checkbox-column>
</kendo-grid>
TS
export class PackageCodesMasterListComponent implements OnInit, AfterViewInit {
public gridData: GridDataResult;
packageCodes: PackageCode[] = [];
item: PackageCode;
packageCodeTypes: PackageCodeType[];
public selectedCodes: string[] = [];
projectPackageCodes: ProjectPackageCode[] = [];
public mode: SelectableMode = "multiple";
constructor(private store: Store<IPackageCodeState>, private coreStore: Store<AppState>, private router: Router) {
combineLatest(this.store.pipe(select(selectPackageCodes)), this.store.pipe(select(selectProjectPackageCodes)), this.store.pipe(select(selectPackageCodeTypes))).subscribe(([packageCodes, projectPackageCodes, packageCodeTypes]) => {
if (packageCodes && projectPackageCodes && packageCodeTypes) {
this.packageCodes = packageCodes;
this.projectPackageCodes = projectPackageCodes;
this.packageCodeTypes = packageCodeTypes;
if (this.projectPackageCodes.length > 0) {
this.findSelectedItems();
}
this.gridData = process(this.packageCodes, this.state);
}
})
}
ngOnInit(): void {
this.store.dispatch(getPackageCodes())
this.store.dispatch(getPackageCodeTypes())
this.store.dispatch(getProjectPackageCodes())
}
public ngAfterViewInit() {
//Custom logic could be added here, to be executed once the grid and the selection are loaded
this.findSelectedItems();
}
public state: State = {
sort: [{ field: "codeNumber", dir: "asc" }],
group: [],
filter: {
logic: "and",
filters: [],
},
};
public selectableSettings: SelectableSettings = {
enabled: true,
mode: this.mode
};
public dataStateChange(state: DataStateChangeEvent): void {
this.state = state;
this.gridData = process(this.packageCodes, this.state);
}
findSelectedItems() {
if (this.projectPackageCodes.length > 0) {
this.projectPackageCodes.forEach(item => {
let code = this.packageCodes.find(x => x.packageCodeId === item.packageCodeId)
let y = this.selectedCodes.includes(code.codeNumber)
if (y === false) {
this.selectedCodes.push(code.codeNumber);
console.log(this.selectedCodes.length)
}
})
}
}
https://www.telerik.com/kendo-angular-ui/components/charts/drill-down/
Error: src/app/dashboard/dashboard.component.html:20:23 - error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ "Company A": { product: string; sales: number; }[]; "Company B": { product: string; sales: number; }[]; }'.
I am using kendo Multiview calendar .I am expecting that when I click on any of the Weeknumber, complete week should be selected . Kindly help on this . Is there any click event available ?
I am using kendo Multiview calendar . Current implementation is the start day of the week is from Sunday.
I need to make start day of the week as Monday .Kindly help on this
My sample code :
I'm now finding a way to customize the appearance of TabStrip in our app.
As defined in Kendo default theme, the TabStrip was defined with a border roundness by default and this behavior affects both the border of the tabstrip and closable buttons. I concerned if there's a way to configure the TabStrip roundness which works as button's roundness: https://www.telerik.com/kendo-angular-ui/components/buttons/button/appearance/#toc-roundness
Thanks in advance.
<kendo-chart [categoryAxis]="{ categories: categories }">
<kendo-chart-series-defaults type="bar">
<kendo-chart-series-defaults-labels format="c">
</kendo-chart-series-defaults-labels>
</kendo-chart-series-defaults>
<kendo-chart-series>
<kendo-chart-series-item [data]="salesData"> </kendo-chart-series-item>
<kendo-chart-series-item [data]="purchaseData">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
I am using the kendo-drawer component at the left side of a page. When the drawer is collapsed, only the icons are visible. At this time I would like to show tooltips over the icons.
I am using the 'items' attribute of Drawer to specify the items. However I do not see any attribute for tooltips in the docs for https://www.telerik.com/kendo-angular-ui/components/layout/api/DrawerItem
Is there anyway this can be achieved?
https://stackblitz.com/edit/angular-rcnrso?file=src%2Fapp%2Fapp.component.ts
Slider should resize to fit the container.