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

[Cupcake]

Hi
I want to use the second method but i am not sure how that would work.
I want to create a new row and each field should have a different maxlength for user input. 

                                        

[Konstantin Dikov]

Hi Jonida,

The idea of the second approach is to use the "event.value" and check the length of the new value. If it is over 255, you can skip the call of the setElement which updates the data. This will keep the previous value within the editor.

Hope this helps.

[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>