Limit characters in grid cell input

3 posts, 1 answers
  1. Mark
    Mark avatar
    12 posts
    Member since:
    Jan 2016

    Posted 09 Nov 2020 Link to this post

    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. Answer
    Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 11 Nov 2020 Link to this post

    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/.

  3. Mark
    Mark avatar
    12 posts
    Member since:
    Jan 2016

    Posted 12 Nov 2020 in reply to Stefan Link to this post

    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>

Back to Top