Refresh React MultiSelect based on another Categories/SubCategories

1 Answer 59 Views
MultiSelect
code777
Top achievements
Rank 1
code777 asked on 02 Feb 2023, 02:17 AM | edited on 02 Feb 2023, 10:02 AM

I have a simple react view with a form that has two Kendo MultiSelect dropdowns ^v5.9.0. One with category and the othe subcategory. 

CategoryDS: [{categoryId: 1, name: "Category-A"}, {categoryId: 2, name: "Category-B"}, {categoryId: 3, name: "Category-C"}], SubCategoryDS: [{SubCatId: 101, name: "CatA-SubCat1"}, {SubCatId: 102, name: "CatA-SubCat2"}, {SubCatId: 103, name: "CatB-SubCat1"}, {SubCatId: 104, name: "CatB-SubCat2"}, {SubCatId: 105, name: "CatC-SubCat1"}]
<MultiSelect
        data={subCategoryDS}
        value={subCategories}
        onChange={handleChange}
        style={{
          width: "300px",
        }}
        placeholder="Please select ..."
      />

In a scenario when selected category: Category-A, Category-B and in sub category MultiSelect: CatA-SubCat1, CatB-SubCat1, CatB-SubCat2. When we decide to remove Category-A from category MultiSelect we would like subcategory MultiSelect selection to also remove CatA-SubCat1 from selection to relect our action. How do we handle this to show our intention? For context sake we have onchange method of category MultiSelect to handle the assigning of our subcategory multiselct data like so: 

let subcategoryDropdownList = document.getElementById(`subcategory-multi-dropdown`).parentElement.parentElement as unknown as MultiSelect;
  subcategoryDropdownList.data = subCategories; //trying this according to docs
  subcategoryDropdownList.value = subCategories; //trying this hailmary and pray

However we're getting the object alright but assigning anything to it like so doesn't work. Neither does letting React work with data and state to follow convention like : 

const [subCategories, setSubCategories] = React.useState([]);
setSubCategories((pv) => ({
  ...pv,
  { options }
  }));

It would seems as if once the MultiSelect is touched and selection set it wouldn't respond to changes and it doesn't have MultiSelect.Refresh() void method like its jQuery equivalent. if anyone could please help would make my day as I'm loosing hair and going grey trying to solve this tough one. Many Thanks in advance

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 03 Feb 2023, 09:56 PM

Hello,

If you want to change the data and the value of the second MultiSelect you will have to use a state variable and change its value. I have prepared a simple example demonstrating such implementation:

I have hard-coded the logic for the Category-A and you will have to modify the logic that will filter the sub categories for all main categories that are selected. The main idea is that you need to provide the new data to the second MultiSelect by changing the state variable. Note that you will also have to clear the selected value if you remove any of the items that are selected in the second MultiSelect that are not available in the new "data".

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
MultiSelect
Asked by
code777
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or