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!
1 Answer, 1 is accepted
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:
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
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.