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