reactjskendo-uigridonchangemaxlength

Limit user input in a text field using Kendo UI grid and React


So I have a datagrid, with editable rows where the user can edit and add rows. I want the user to have a limit on each different row cell field. For example, smallNumber will have 3 and description will have 15. I am using Kendo UI and React v18.2.0

<Grid
   editField={editField}
   onItemChange={itemChange}
   data={dataField}
   key="keys"
   >
    <Column field="smallNumber " title="Small NR" />
    <Column field="stationDescription" title="DESCRIPTION" />
    
</Grid>

And itemChange func is like:

const itemChange = (event) => {
        const newData = dataField.map((item) =>
            item.dataFieldID === event.dataItem.dataFieldID
                ? { ...item, [event.field || ""]: event.value, changed: true }
                : item
        );
        setDataField(newData);
    };

If I add a maxLength={3} to the column for ex, it will give me a 500 server error. I want to use the onItemChange event, and check the value lenght for that field. If it is over 5, then the values in the state wont be updated, but i dont know how to do it. And also how to do it for different fields such as SmallNumber which needs less than 3 and Description that needs less than 15.


Solution

  • Found the solution: Initialized the max length for each column

    const itemsLength = {
            stationDescription: 225,
            stationNumber: 3
        }
    

    And then changed the newData funx like this

    const newData = stations.map((item) =>
       item.stationID === event.dataItem.stationID
         ? { ...item, [event.field || ""]: event.value.length <= itemsLength[event.field] ?  event.value : item[event.field], changed: true }
            : item
            );