How to Implementing server-side pagination for a dropdown

1 Answer 40 Views

DropDownList Grid

1 Answer, 1 is accepted

Tejas

commented on 22 May 2024, 10:35 AM

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>

);

};

Konstantin Dikov

commented on 24 May 2024, 09:20 AM

Hi Tejas,

You will have to include the logic from the demo to the DropDownList in the form editor by handling the onPageChange as well. Also, it would be better to limit the data operations with the custom editor (since it is not a simple DropDownList and it will be difficult to control the "data" from the Form). Since you retrieve the data from an API, you can send the the query string to the form component, so that all requests can be made within it. This will allow you to re-use the code from our demo for filtering with remote data.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

How to Implementing server-side pagination for a dropdown

1 Answer, 1 is accepted