Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Lance Tressler
605
Show toast closely associated with cell it applies to
posted

We are trying to mimic the behavior of the jQuery grid where a toast is shown pointing at a cell when a validation error occurs:

We wanted to use the toast component since that seemed ideal, but were disappointed to learn that it only supports very basic positioning.

It is important to let the user know when this automatic correction occurs and if the toast appears at the bottom or top of the page, it might go unnoticed by the end user.

Are there are options for positioning the toast near the cell it applies to?

Parents
  • 2660
    Verified Answer
    Offline posted
    Hello Lance,

     

    Thank you for posting to Infragistics Community.

     

    I have been looking into your question and prepared a sample application with an IgxGrid, where cell validation messages are shown, similar to your requirement.

     

    To achieve this, my suggestion is to use the IgxTooltip, instead of the IgxToast. The tooltip can be created as an ordinary div element, for instance, and referenced in the component in order to be programmatically opened or closed. Moreover, it can accept an OverlaySettings object as a parameter of its open method. With its help, the tooltip can be positioned according to the edited cell and using position or scroll strategies of our choice.

    This solution contains some custom logic, such that on every keystroke within the “UnitPrice” field, after delay of 500 ms a conditional check would be executed and depending on its output the tooltip will be shown if the current cell value does not pass the validation.

     

    You can find the sample here. Please, it on your side and if you require any further assistance on the matter, please let me know.

     

    Sincerely,
    Bozhidara Pachilova
    Associate Software Developer
Reply Children
No Data