For Multiselect dropdown we have given the autoclose property to false , but the dropdown closes once we select a item
Below is the code used
<MultiSelect
id='ddlf4'
// className='k-dropdownstate'
data={result.result}
itemRender={itemRender}
autoClose={false}
value={selval} //{this.props.value || ""}
filterable={true}
onChange={onChange}
onFilterChange={onFilterChange}
clearButton={false}
textField='text'
dataItemKey='id'
//onBlur={this.onLeave}
tags={[]}
/>
Attached the full file also
1 Answer, 1 is accepted
Hello,
Thank you for the example.
I saw that this is in a Grid filter cell and I made the same test. The MultiSelect was not closed after selecting a value:
https://stackblitz.com/edit/react-bjlym3-iplgzs?file=app%2FdropdownFilterCell.js
This still may occur if the entire cell is re-mounted. Please check if the cell is re-mounting after filtering. If that is the case, this has to be resolved on the application level to ensure that the cell is not re-mounted each time the state is changed.
Regards,
Stefan
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/.
Rank 1
thanks Stefan,
Can you also try to use the itemrender to render a checkbox multiselect in this sample .
The below is the code how we implemented.
const itemRender = (li, itemProps) => {const itemChildren = (
<span
style={{
fontSize: "10px",
}}
>
<input
type='checkbox'
checked={itemProps.selected}
onChange={() => {}}
/>
{li.props.children}
</span>
)
return React.cloneElement(li, li.props, itemChildren)
}
Hello,
Adding the item render did not make a different in this case:
https://stackblitz.com/edit/react-bjlym3-5gegtz?file=app%2FdropdownFilterCell.js
I can suggest using this example as a starting point to iliustrate the issue and I will be happy to take a look at it after that.
Rank 1
hello ,
i have created this , didn't know how to edit the project you shared
https://react-svqw1q.stackblitz.io
https://stackblitz.com/edit/react-svqw1q?file=public/index.html
let me know how to make this work as required .
Thanks,
EJ
Hello, EJ,
Thank you for modifying the example.
As I assumed the issue occurs as the component is re-mounted each time. By default React will re-mount each component that is initialized inside render (with functional components everything is inside render). This is why we have to initialize the component outside of the main component. After I moved the component outside of the main component, the MultiSelect was not closing:
https://stackblitz.com/edit/react-cfc177?file=src%2Fapp%2Fmain.js
If you need to pass extra props to components from the main component, then React recommends using React.Context to pass props between components:
https://reactjs.org/docs/context.html
Rank 1
hello stefan,
The data for multiselect is from the api call of grid and is set in useEffect. Can you please update this sample with how to pass data from main to multiselect component .
Thanks,
EJ
Hello, EJ,
This has to be done on the application level with React.Context.
If there are any issues using React.Context please update the example to replicate the issue and I will take a look and apply the required modifications.
Also, I can suggest checking this demo as in it we show how to use React.Contex to pass extra information to custom components:
https://www.telerik.com/kendo-react-ui/components/grid/rows/row-reordering/ (check the hooks version)
The example is for a different case, but the approach for the React.Context is the same.