or
1 answer
67 views
I am trying to implement 2 cascading dropdown where one is dependent on the other. To populate the dropdownlist I am calling 2 apis. The first one is for the parent dropdown and the second one will return data based on data selected in the parent dropdown. But now due to async call of the 2nd api the onChange function is getting hit beforehand. How to solve this?
Filip
Telerik team
answered
on
30 Nov 2021
1 answer
76 views
Hello,
I have a simple dropdown and I update the value of the id in the code but the value is not reflected, the code is below, some help would be appreciated. (The dropdown I am trying ot update is regulation)
<DropDownList
disabled={modelDropDownDisable}
data={compModelData}
onChange={(e) => {
setCompModelText(e.target.value);
const compressorModelSelected = compressorsModelData.filter(function(elem) {
//return false for the element that matches both the name and the id
return (elem.fk_brand_id == compBrandId.id && elem.comp_model == e.target.value)
});
if(compressorModelSelected.length>0) {
debugger
setCompressorModelSelectedRegulation(compressorModelSelected[0].fk_comp_regulation_id);
}
}
}
value={compModelText}
/>
<DropDownList
value={compressorModelSelectedRegulation}
textField="text"
dataItemKey="id"
onChange={(e) => {
setCompressorModelSelectedRegulation(e.target.value);
}}
data={compRegulations}
/>
Filip
Telerik team
answered
on
30 Nov 2021
1 answer
85 views
I'd like to work with nested data in a multi-step form. The data structure looks like this:
[
{
"id": "5ca67a4b-cbcf-4851-8dcb-2bf5c8f5b5d5",
"createDate": "1621287160000",
"location": { "id": 12, "text": "City1" },
"symbol": "shadow",
"name": "Komfort",
"active": true,
"bcon": false,
"user": "cdunkersley0@pcworld.com",
"bas": "3DGIP0XJDNCJNRJKGS8XD6NHPBTNKTJ608S0UJ01X5P",
"description": "aliquam augue quam sollicitudin vitae consectetuer eget rutrum at lorem integer tincidunt ante",
"channelData": [
{
"channel": {
"id": "43e185d0-2f8c-4975-9e73-40412c03a1f1",
"name": "Lichtschalter"
},
"datapoint": {
"id": "f74ba945-b0e3-43f7-a17e-918623fd03b8",
"bas": "g60hm6owrhk4hcbtul6l2icuw1wlkeg",
"tag": "bdya|98e5lc|1wa8qv7u",
"type": "float",
"description": "id ornare imperdiet sapien urna pretium nisl ut volutpat"
}
},
{
"channel": {
"id": "9b369139-a0ef-404e-b7ec-2b9ca3f4471e",
"name": "Verdunkelungsregler"
},
"datapoint": {
"id": "b64b5e00-ccfc-489a-ac03-02f9491d8ad6",
"bas": "5zz7jkh4gyems6fppt9v5wqdqgoe92r",
"tag": "x3vj|ttqqz9|qo6pxmks",
"type": "float",
"description": "odio donec vitae nisi nam ultrices libero non mattis"
}
}
]
},
...
]1 answer
97 views
Hi.
This functionality from the docs not working -
I'm trying to style the filter column menu icon when the filter is on but nothing.
any help?
1 answer
36 views
HI,
I have implemented a button to clear all filters . On click i clear the filters object in data state and this does not clear the values entered in filter text box and clear filter button which is based on props.value .
Expected behavior : Once clear button is clicked - all filters should be reset with the filter textbox/ dropdown/Datepicker should be cleared and clear filter button in individual filter should be reset .
https://stackblitz.com/edit/react-aldgy2?file=src/app/main.js
https://react-aldgy2.stackblitz.io
Help me in achieving this
1 answer
549 views
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
Telerik team
answered
on
23 Nov 2021
1 answer
92 views
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
Stefan
Telerik team
answered
on
23 Nov 2021
1 answer
68 views
I use a TreeView in my app and whenever I click on one of the triangles to open another tree layer, I get the attached warning in the console. This also happens when I use a Tree in a dropdown. Is there anything I can do about this? Here is the data that I use with it:
[
{
"id": 1,
"text": "Hessen",
"items": [
{ "id": 2, "text": "Mannheim" },
{ "id": 3, "text": "Frankfurt" }
]
},
{
"id": 4,
"text": "Rheinland-Pfalz",
"items": [
{
"id": 5,
"text": "Mainz",
"items": [
{ "id": 50, "text": "Gebäude A" },
{ "id": 51, "text": "Gebäude B" },
{ "id": 52, "text": "Gebäude C" }
]
},
{ "id": 6, "text": "Kaiserslautern" },
{ "id": 7, "text": "Zweibrücken" }
]
},
{
"id": 8,
"text": "Bayern",
"items": [
{ "id": 9, "text": "München" },
{ "id": 10, "text": "Rosenheim" }
]
},
{
"id": 11,
"text": "Saarland",
"items": [
{ "Id": 12, "text": "Saarbrücken" },
{ "id": 13, "text": "Neunkirchen" }
]
}
]
Filip
Telerik team
answered
on
23 Nov 2021
1 answer
1.9K+ views
Hi forums,
I wonder is there any way for me to have a year-only datepicker. Without month or date. How can I customize the component to suit my need?
Thanks!
Konstantin Dikov
Telerik team
answered
on
18 Nov 2021
1 answer
136 views
Hi Telerik Team,
when using the simple example below, there few warnings/errors apear in console
can you check if this is an issue with Typescript definition or some bug ?
const items: DataModel[] = [
{
id: "home",
text: "Home",
iconClass: "k-i-home",
},
{
id: "profile",
text: "User Profile",
},
];
<Breadcrumb data={items}/>
Warning: Failed prop type: KendoReactBreadcrumb: prop type `breadcrumbOrderedList` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
react_devtools_backend.js:2540 Warning: Failed prop type: KendoReactBreadcrumb: prop type `breadcrumbListItem` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
Warning: Failed prop type: KendoReactBreadcrumb: prop type `breadcrumbDelimiter` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
react_devtools_backend.js:2540 Warning: Failed prop type: KendoReactBreadcrumb: prop type `breadcrumbLink` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.
Stefan
Telerik team
answered
on
17 Nov 2021
