Questions on KendoReact Forum

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?

DropDownList

asked on 26 Nov 2021

0 answers

1 view

FieldArray in a multi-step form with nested data

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"
                }
            }
        ]
    },
...
]

What I'd like to do is to use the first step of the form for the general data and use a second step with a Grid for the data that is nested under the channelData node. I have setup the multi-step form using your documentation and the first step works fine but I'm not sure how this would work with the nested node in a grid on the second step as I don't know how to reference the data of the node in the name parameter of the FieldArray component. Do you have an example for something like this? Any help would be greatly appreciated.

Grid

Stepper

asked on 26 Nov 2021

0 answers

3 views

Dropdown not updating after changing the value from the code

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}
                    /> 

DropDownList

asked on 26 Nov 2021

1 answer

4 views

Need help on Global filter reset

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

Filter

Grid

answered on 24 Nov 2021

1 answer

2 views

Dependent / cascading dropdown in React

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!

DropDownList

Grid

answered on 23 Nov 2021

1 answer

12 views

Multiselect autoclose property not working

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

Attached the full file also

MultiSelect

answered on 23 Nov 2021

1 answer

6 views

Warning when using TreeView

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" }
        ]
    }
]