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

Limit characters in grid cell input

2 Answers 1164 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Iron
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/.

Cupcake
Top achievements
Rank 1
commented on 13 Jan 2023, 09:17 AM | edited

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
Telerik team
commented on 17 Jan 2023, 08:58 AM

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.

0
Mark
Top achievements
Rank 1
Iron
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
Iron
Answers by
Stefan
Telerik team
Mark
Top achievements
Rank 1
Iron
Share this question
or