Hello, I am using a Kendo React DropDownList in a form, but I have an issue. I receive data in batches of 10 from the server-side due to pagination settings. How can I implement scrolling so that the dropdown can display the next 10 data entries when scrolled
1 Answer, 1 is accepted
0
Hello Tejas,
Please refer to the following example demonstrating how to use virtual scrolling with remote data:
Please note that if you have a relatively small number of items, it is recommend to load all items and bind them directly to the DropDownList.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Tejas
commented on 22 May 2024, 10:35 AM
Top achievements
Rank 2
Iron
Iron
Iron
Rank 2
Iron
Iron
Iron
I have used the Kendo Form for these types. Please suggest how to modify these code
const CustomDropDownList = (fieldRenderProps: FieldRenderProps) => {
const {
validationMessage,
touched,
label,
id,
valid,
disabled,
hint,
value,
modified,
wrapperStyle,
name,
onChange,
data,
formRenderProps,
dataItemKey,
...other
} = fieldRenderProps;
const [FilteredData, setFilteredData] = useState<Array<string | number>>([]);
useEffect(() => {
setFilteredData(data);
}, [data]);
const editorRef = useRef(null);
const showValidationMessage: string | false | null =
touched && validationMessage;
const showHint: boolean = !showValidationMessage && hint;
const hintId: string = showHint ? `${id}_hint` : '';
const errorId: string = showValidationMessage ? `${id}_error` : '';
const labelId: string = label ? `${id}_label` : '';
const onFilterChange = (event: DropDownListFilterChangeEvent) => {
setFilteredData(filterBy(data, event?.filter));
};
return (
<FieldWrapper style={wrapperStyle}>
<Label
className='input-labels'
id={labelId}
editorRef={editorRef}
editorId={id}
editorValid={valid}
>
{label}
</Label>
<DropDownList
ariaLabelledBy={labelId}
ariaDescribedBy={`${hintId} ${errorId}`}
id={id}
disabled={disabled}
onChange={onChange}
value={value}
onFilterChange={onFilterChange}
filterable={true}
data={FilteredData}
dataItemKey={dataItemKey}
{...other}
name={name}
/>
{showHint && <Hint id={hintId}>{hint}</Hint>}
{showValidationMessage && <Error id={errorId}>{validationMessage}</Error>}
</FieldWrapper>
);
};