This is a migrated thread and some comments may be shown as answers.

Limit characters in grid cell input

2 Answers 120 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 09 Nov 2020, 02:43 PM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 11 Nov 2020, 10:37 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Mark
Top achievements
Rank 1
answered on 12 Nov 2020, 02:31 PM

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>

Tags
General Discussions
Asked by
Mark
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Mark
Top achievements
Rank 1
Share this question
or