Validation Tooltip Z-Index

Question

Hi support,if there is a grid with only one or two rows and a validation error occurs in edit mode 'Normal', the tooltip is only displayed partially.Is there any way to increase the z-index in order to see the full tooltip (above the header of the grid etc.) ?Or ist there another way to show the full tooltip?Regards,Stephan

Dineshnarasimman Muthu · Accepted Answer

Hi Stephan,We have
reviewed your query about the grid height to be auto and need to display the
validation message and need of min height property. In EJ2 Syncfusion Grid
doesn't have min-height property. We suggest to set customized grid height when
the number of record is less than one in the add action of the grid. When the
number of records is more than one while adding, the grid height is set to
auto. This process is implemented in the actionBegin event of the grid. The
grid height is changed based on the add request
from actionBegin event.The code
snippet of the implementation and sample have been attached for your reference.

function actionBegin(args) {
    if (args.requestType === 'add' || args.requestType === 'beginEdit') {
      if (grid.currentViewData.length <= 1) {
        grid.height = grid.getRowHeight() * 3;
      } else {
        grid.height = 'auto';
      }
    }
  }

Sample:  https://stackblitz.com/edit/4heqx2-njqf4i?file=index.js,index.htmlPlease let
us know if you need any further assistance.Regards,Dineshnarasimman
M

Aishwarya Rameshbabu · Answer

Hi
Stephan,Greetings from Syncfusion support.Upon
reviewing your query, we could see that you are facing an issue with showing
the validation message when the grid contains one or two rows. We have created
a similar sample and tried to replicate the issue reported but were
unsuccessful. The validation message was shown fully without displaying the
tooltip partially. Please refer to the below sample and video demonstration.Sample:
https://stackblitz.com/edit/4heqx2-y9xm2i?file=index.js,index.htmlIf you still
encounter an issue, please share the following details that would be helpful
for us to validate the issue further:-
Please specify the Syncfusion package version you are currently using.-
Share the type of data binding used in the Grid. Remote or Local data.-
If Remote data is being used, please share the adaptor details.-
Share the complete Grid rendering code along with any event handler functions
used.-
If possible, please share a simple issue replication sample or try to replicate
the issue with the sample provided.- Also please share a
video demonstration of issue replication.RegardsAishwarya
RAttachment: ValidationMessage_15c389b6.zip

Stephan Schrade · Answer

Hello Aishwarya,many thanks for your answer and the stackblitz example.With firefox, the row becomes scrollable and the focus is set to the tooltip message.With Safari it is the same behavior except that the focus is not set.With both browsers, the tooltip and the value is not visible at the same time.Is this the expected behavior?I thought, that both, the input field and the tooltip, is visible at the same time (with the tooltip layout above the header or the footer of the grid)Regards,Stephan

Aishwarya Rameshbabu · Answer

Hi Stephan,By default, in the Syncfusion Grid, the
validation message of the edited or newly added row will be displayed below the input field. When there is only one record is
present in the Grid and the height of the Grid is not specified, after editing
a record, to show the validation message a vertical scroller will be rendered
in the Grid to make the error message visible to the viewport. Using the
scroller, you can see both the value and the error message. If you want to
display both the value and the error message at the same time with one or two
records in the Grid, you can define a specific height for the Grid. This
will display both the value and error message without scrolling. Please refer
to the sample and screenshot for more information.Sample: https://stackblitz.com/edit/4heqx2-ikufti?file=index.js,index.htmlScreenshot: API Reference: HeightIf you need any further
assistance or have additional questions, please feel free to let us know.RegardsAishwarya
R

Stephan Schrade · Answer

Hi Aishwarya,many thanks for your suggestion.I already thought about that, but I would like to have the grid to expand if there are more rows inserted and not to have a very high grid right from the beginning.And I could not find a property for a minimum height. Is this possible to set a minimum height?Regards,Stephan

Stephan Schrade · Answer

Hi Dineshnarasimman,many thanks for your solution.This works now.Regards,Stephan

Aishwarya Rameshbabu · Answer

Hi Stephan,You are most welcome! Please get back to us if you need any other
assistance.RegardsAishwarya
R