Limit characters in grid cell input

[Mark]

I would like to limit a grid text field to 255 characters.  I've looked over events and don't see anything that would help with this.  Has anyone accomplished this with the Kendo React Grid?  Thank you

[Stefan]

Hello, Mark,

This can be achieved in two ways:

1) Use a custom cell with a custom Input component and set its maxlength attribute to 255. This will allow the user to type only 255 characters:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#cell

https://www.w3schools.com/tags/att_input_maxlength.asp

2) Use the onItemChange event, and check the value lenght for that field. If it is over 255, to not update the value in the state:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#onitemchange

I hope one of the options proves helpful.

Regards,
Stefan
Progress Telerik

[Mark]

Thank you for the reply.  I went with a custom cell as follows:

export function ObjectiveDescriptionCell({ objectiveDescriptionEditField }) {
  return class extends GridCell {
    handleChange = (e) => {
      this.props.onChange({
          dataItem: this.props.dataItem,
          field: this.props.field,
          syntheticEvent: e.syntheticEvent,
          value: e.target.value
      });
    }
    public render() {
      const { dataItem } = this.props;
      const inEdit = dataItem[objectiveDescriptionEditField];
      const isNewItem = dataItem.ID === 0;
      return inEdit ? (
          <td>
            <input className="k-textbox" maxLength={ 255 } onChange={ this.handleChange } style={{ width: "100%" }} value={ dataItem.Description } />
          </td>
        ) : (
          <td className="k-command-cell">{ dataItem.Description }</td>
      );
    }
  };
}

 

Then I add it into the grid:

<GridColumn cell={ this.ObjectiveDescriptionCell } field="Description" title="Description"></GridColumn>