Hi telerik team

I'm trying to implement the "add new row" function in a Grid >Editing >inline component.

I have followed the steps as you have in the documentation, but somehow, every time I trigger the "add" function it inserts new two rows with the same values and same id.

this is my code. Any ideas what I'm doing wrong? Thanks!

const GridComponent= () => {
    const editField = "inEdit";
    const [data, setData] = React.useState([]);
 
const functionToGetInfoInFromAPI{ setData(result.data)}
useEffect(()=>{
    functionToGetInfoInFromAPI()
}, [])
const generateId = (data) => {
    let highestId = 0;
    data.forEach((item) => {
        if(item.casystem_id > highestId) {
            highestId = item.casystem_id;
        }
    })
    return highestId+1;
}
 
const insertItem = (item) => {
   item.inEdit = false;
    item.casystem_id = generateId(data);
const newDataArray = [item, ...data];
return newDataArray;


};
const add = (dataItem) => {
dataItem.inEdit = true;
        const newData = insertItem(dataItem);
        setData(newData);

};
const itemChange = (event) => {
const field = event.field || "";
    const newData = data.map((item) =>
        item.casystem_id === event.dataItem.casystem_id
            ? { ...item, [field]: event.value }
            : item
    );
    setData(newData);
};

const addNew = () => {
const newDataItem = {
inEdit: true,
        Discontinued: false,
    };
    setData((oldData) => [newDataItem, ...oldData]);

};
 
export const MyCommandCell = props => {
    const {
        dataItem
    } = props;
    const inEdit = dataItem[props.editField];
    const isNewItem = dataItem.casystem_id === undefined;
    return inEdit ? <td className="k-command-cell">
        <button className="k-button k-grid-save-command" onClick={() => isNewItem ? props.add(dataItem) : props.update(dataItem)}>
            {isNewItem ? "Add" : "Update"}
        </button>
        <button className="k-button k-grid-cancel-command" onClick={() => isNewItem ? props.discard(dataItem) : props.cancel(dataItem)}>
            {isNewItem ? "Discard" : "Cancel"}
        </button>
    </td> : <td className="k-command-cell">
        <button className="k-primary k-button k-grid-edit-command" onClick={() => props.edit(dataItem)}>
            Edit
        </button>
        <button className="k-button k-grid-remove-command" onClick={() =>  window.confirm("Confirm deleting: " + dataItem.comp_nickname) && props.remove(dataItem)}>
            Remove
        </button>
    </td>;
};
                
<Grid
    data={data}
    onItemChange={itemChange}
    editField={editField}
    dataItemKey={"casystem_id"}
>
    <GridToolbar>
        <button title="Add new" className="k-button k-primary" onClick={addNew}>
            Add new
        </button>
    </GridToolbar>
    <Column field="casystem_id" title="id" editable={false}  />
    <Column field="nickname" title="Nickname"   />
    <Column cell={CommandCell} width="240px" />
</Grid>
 
 
 

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)

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

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?

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

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!

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

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

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!