Telerik Forums
KendoReact Forum
0 answers
1 view
Hello! is it possible to use custom icons in the form of inline svg (to control color via css) in drawer item?
Anton
Top achievements
Rank 1
 asked on 29 Nov 2021
0 answers
1 view

Hi.

This functionality from the docs not working  -

https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu/#toc-styling-the-column-menu-icon

I'm trying to style the filter column menu icon when the filter is on but nothing.

any help?

Daniel
Top achievements
Rank 1
 asked on 28 Nov 2021
0 answers
1 view
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?
MITHUN
Top achievements
Rank 1
 asked on 26 Nov 2021
0 answers
1 view

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.
Bernd
Top achievements
Rank 2
Iron
Iron
 asked on 26 Nov 2021
0 answers
3 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}
                    /> 
 
Daniela
Top achievements
Rank 1
Iron
Iron
Iron
 asked on 26 Nov 2021
1 answer
4 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

Konstantin Dikov
Telerik team
 answered on 24 Nov 2021
1 answer
2 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
12 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
6 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
4 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
Top users last month
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Dominic
Top achievements
Rank 2
Iron
Iron
Vincent
Top achievements
Rank 2
Iron
Iron
Keith
Top achievements
Rank 1
seenu
Top achievements
Rank 1
Iron