Validation message is not displayed appropriately in inline-edit-mode when grid (datasource) is empty

[Laurin S]

Hi,

when adding the first record to a grid, in other words, when the datasource alias grid is empty, the validation messages are not shown appropriately. As you can see in the following screenshot, the row is too small for both the input fields and the validation message and therefore a scrollbar gets shown, but this is not very user-friendly (and not beautiful):

How can I solve that?

(One possibility might be to increase the z-index, so that the original inline edit row stays at its position...)

I've attached also a demo code that shows the error.

Attachment: reactw3ktwl_(1)_7f5059d8.zip

[Rajapandiyan Settu]

Hi Laurin,

Thanks for contacting Syncfusion support.

By setting height to the Grid component, you can avoid this problem.

Height: https://ej2.syncfusion.com/react/documentation/api/grid/#height

 

<GridComponent

        dataSource={[]}

        ref={(grid) => (this.gridInstance = grid)}

        toolbar={this.toolbarOptions}

        allowPaging={true}

        editSettings={this.editSettings}

        height="350"

      >

      </GridComponent>

 

Sample: https://stackblitz.com/edit/react-etpdph?file=index.js

Please let us know if you have any concerns.

Regards, 

Rajapandiyan S

[Laurin S]

Not really happy with this solution, since I don't want to have a fixed height (want to keep "auto")...

Also, because the empty grid with height=350 is not very "beautiful"...

(If we need to use the height property, at least whe should use the minHeight... is it possible to set this? but also only suboptimal)

Any other solution?

[Rajapandiyan Settu]

Hi Laurin,

Sorry for the inconvenience caused.

To resolve the reported behavior, we need to give height to Grid’s content. But you don’t want to have a fixed height for the Grid component.

So, you can achieve your requirement, by using the following code in the actionComplete event of Grid.

actionComplete: https://ej2.syncfusion.com/react/documentation/api/grid/#actioncomplete

  

actionComplete(args) {

    if (args.requestType == 'add' || args.requestType == 'beginEdit') {

      var gridContent = this.gridInstance.element.querySelector('.e-content');

      if (gridContent.offsetHeight < 74) {

        gridContent.style.height = '74px';

      } else {

        gridContent.style.height = 'auto';

      }

    }

    if (args.requestType == 'save' || args.requestType == 'cancel') {

      this.gridInstance.element.querySelector('.e-content').style.height = 'auto';

    }

  }

 

Sample: https://stackblitz.com/edit/react-etpdph-ydfgtu?file=index.js

Please let us know if you have any concerns.

Regards, 

Rajapandiyan S