Our blazing fast Grid component built with pure JavaScript


Post by ashwini.pagar »

Hello, We need to add custom add button in BryntumGrid cell (Please refer screenshot). For that we have added rendered in columns like this ->

{
  type: 'tree',
  text: 'Group/Task',
  cls: 'name-header-grid',
  minWidth: '600px',
  field: 'name',
  autoHeight: true,
  touchConfig: { editor: false },
  htmlEncode: false
  renderer: (props: any) => {
    if (props.record?.data?.parentId == null) {
      return (
        <div className="parent-div" style={{}}>
          <div className="child1-div">
            <span>{props.value}</span>
          </div>
          <div className="child2-div" style={{ marginTop: '-5px' }}>
            <button
              className="addTask-button"
              onClick={() => handleAddNewTask(props.record)}
            >
              +
            </button>
          </div>
        </div>
      );
    } else {
      return (
        <div className="edit-parent">
          <div>
            <span>{props.value}</span>
          </div>
          <div className="edit-wrap">
            <i
              className="b-fa b-fa-pencil"
              onClick={() => handleEdit(props.record)}
            ></i>
          </div>
        </div>
      );
    }
  };
}

After adding this we are getting error "Uncaught TypeError: Cannot read properties of undefined (reading 'onCellClick')"

Can you please help us, like how we can prevent this error?

tt.png
tt.png (196.24 KiB) Viewed 232 times

Post by marcio »

Hey ashwini.pagar,

Are you using the latest version of the Grid? I tried with your configuration (just added the editor: false, prop) and got it working without any errors. Please check the video attached.

Are you able to share a sample project with your configuration?? You can see our guidelines here viewtopic.php?f=1&t=772

Best regards,
Márcio


Post by ashwini.pagar »

Hey, we are using BryntumGrid version 5.3.1, and here is my code where I am using editor: true,

columns: [
      {
        text: '#',
        field: 'sequence',
        width: '3em',
        editor: false,
        align: 'center'
      },
      {
        type: 'tree',
        text: 'Group/Task',
        cls: 'name-header-grid',
        minWidth: '600px',
        field: 'name',
        autoHeight: true,
        editor: false,
        htmlEncode: false,
        renderer: ({ value, record, row }: any) =>
          nameCellEdit({ value, record })
      }]

Still, we are getting the same error.

Thank you!


Post by mats »

Could you please share a full test case so we can run it locally?


Post Reply