Dependent / cascading dropdown in React

[Angshuman]

Hello,

I'm inserting multiple row to add values. my two cell of a grid is having cascading dropdown i.e. based on one dropdown's selected value other dropdown will be populated. As I'm adding multiple row hence I want to pass the props (i.e. selected value) so that I can populate the other dropdown within that particular row. But I don't see any option to pass props from the cell. Here is my grid code snippet

 return (
    <StudyListContext.Provider value={studyList}>
      <SelectedStudyList.Provider value={studyListValueContext}>
        <ExcelExport data={orderBy(filterBy(data, filter), sort)} ref={_export}>
          <Grid
            data={orderBy(filterBy(data, filter), sort)}
            onItemChange={itemChange}
            editField={editField}
            dataItemKey={'STUDYNAME'}
            filterable={true}
            filter={filter}
            onFilterChange={(e) => setFilter(e.filter)}
            sortable={true}
            sort={sort}
            onSortChange={(e) => {
              setSort(e.sort);
            }}
          >
            <GridToolbar>
              <button
                title="Add new"
                className="k-button k-primary"
                onClick={addNew}
              >
                Add new
              </button>
              {' | '}
              <button
                title="Export Excel"
                className="k-button k-primary"
                onClick={excelExport}
              >
                Export to Excel
              </button>
            </GridToolbar>
            {}
            <Column
              field="STUDYNAME"
              title="Study Name"
              width="200px"
              cell={StudyListDropdown}
            />
            <Column
              field="CRFVERSION"
              title="CRF Version"
              width="200px"
              filterable={false}
            />
            <Column
              field="VERSION_CNT"
              title="PUBLISHED VERSION"
              width="200px"
              filterable={false}
            />
            <Column cell={CommandCell} width="200px" filterable={false} />
          </Grid>
        </ExcelExport>
      </SelectedStudyList.Provider>
    </StudyListContext.Provider>
  );

I want to pass the the selected value within the row.. something like this :

            <Column
              field="STUDYNAME"
              title="Study Name"
              width="200px"
              cell={<component props={seleted_value}/>} 
            />

but this is not working. 

Is there a way to pass the selected value ? OR how to control / customize the cell / column ? 

Thanks!

 

[Konstantin Dikov]

Hello Angshuman,

Within the custom cell you have access to the data item for the current row, which can be used for getting reference to the selected value in the first DropDownList and filtering or changing the data shown in the second DropDownList. For your convenience, following is a very basic example demonstrating how to access the data item and filter the data in the second DropDownList based on the selected value in the first one:

• https://stackblitz.com/edit/react-jud7au?file=app%2Fmain.jsx

Additionally, you can disable the second drop down if there is no selected value in the first one (the field is null or undefined). You can also clear the value of the second field when the first field changes (if the scenario requires that).

More information and example on custom editors and the "cell" properties is available in the following help topics:

• https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-custom/
• https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-cell
• https://www.telerik.com/kendo-react-ui/components/grid/api/GridCellProps/

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik