MultiSelectTree - as an editor in kendo Grid

1 Answer 152 Views
Grid MultiSelect
Vedad
Top achievements
Rank 3
Bronze
Bronze
Iron
Vedad asked on 28 Feb 2023, 06:52 PM | edited on 28 Feb 2023, 07:09 PM

Hi, 

I am trying to implement specific feature using kendo ui grid and MultiSelect Tree as editor template.

I tried making example within stackblitz, but unfortunately problem is that I don't have adequate data structure to make an example.

My use case is following:
I have kendo grid with multiple columns. One of these columns can have multiple elements with appropriate quantities. 
For example, column name is Furniture, and user can select multiple types of furniture but also can provide quantity of selected furniture. 

I have made kendo multiselectTree as an editor template for this column, and at the same time I used kendoMultiselectTreeNodeTemplate to add textbox to the all items in the tree. When I open editor first time and select, for example, Chairs with textbox value 4, and Tables with textbox value 1, it is perfectly fine displayed in the list. This part works fine. (multiselect shows: Chairs 4, Tables 1)

But, if I refresh page, I have no way of retrieving reference and when I open list again, I can't bind back values from tags to the textboxes in the list. Chairs and Tables are checked, but textbox remains empty.

Each row in my table is object with structure like this:
{

id: number, 
orderId: string, 
date: date,
orderedItems: [ ],
orderStatus: number

}

For example:
{
id: 24021,
orderId: 'PC-322',
date: new Date(),
orderedItems: [{itemId: 22, description: "Chair", nr: 4}, {itemId: 14, description: "Table", nr: 1}],
orderStatus: 3
}

Can you please suggest approach.

Thank you very much

1 Answer, 1 is accepted

Sort by
0
Slavena
Telerik team
answered on 03 Mar 2023, 02:12 PM

Hello Vedad,

Thank you for the provided details regarding this case.

If I understood the requirement correctly, it seems that the desired behavior is keeping the value of the TextBox in the template of each item after the MultiSelectTree has been toggled. Please correct me if I am wrong.

If that is indeed the case, what I can suggest is binding each item's quantity to the value of the respective TextBox:

<kendo-textbox
     [style.width.px]="50"
     [(value)]="dataItem.quantity">
</kendo-textbox>

The following example demonstrates this approach:

https://stackblitz.com/edit/angular-5dbt2m-ajzatr?file=src%2Fapp%2Fcustom-component.ts 

I hope this steers you in the right direction. In case I have misunderstood something, please provide us with some additional details and ideally a runnable example (feel free to update the one above) that demonstrates the described discrepancy. Thank you for your cooperation in advance.

Regards,
Slavena
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid MultiSelect
Asked by
Vedad
Top achievements
Rank 3
Bronze
Bronze
Iron
Answers by
Slavena
Telerik team
Share this question
or