The drawer is working fine when I click to select items, but there are cases where I want to select an item programmatically instead of a mouse click.
My drawer's items come from an array of DrawerItem objects:
[items]="drawerItems"
In the .ts file, I've tried both of these ways to change the selected item:
drawerItems[index].selected = true;drawer.items[index].selected = true;I can see from console.log statements that both are adding a "selected = true" property to the correct DrawerItem, but it has no effect in the template. Is there a better way to achieve this?
It seems setting the .selected property is in fact the correct way to programmatically select a drawer item. I believe my problem was the template didn't know I had changed the drawerItems array.
Updating the array like this seems to have resolved my issue.
Hi,
Thank you very much for the details provided.
Indeed, you are correct that the selected property is the way to go when it comes to programmatically selecting an item inside the Kendo UI for Angular Drawer component.
In general, the developer could utilize the selected option of the DrawerItem, modify the data so that the desired item is selected, and change the reference of the items of the Drawer component to the new modified data using the spread operator:
this.items = [...this.items]The use of the spread operator is required in order to trigger change detection and thus display the modified data in the component.
I hope the provided information sheds some light on the matter. Please, let me know if I can further assist you with this case.
Regards,Georgi
Progress Telerik