Hide No Records Template

[Satheesh Kumar]

Hi

I am using react AutoCompleteComponent in which i want to hide no record found message. I used noRecordsTemplate which returns null, but I'm getting a blank space like this 

Please refer the link https://stackblitz.com/edit/react-yy8xve?file=index.js

How to hide this empty bar also?

Thanks

[Kokila Poovendran]

Hi Satheesh Kumar,

To address your requirement of hiding the "No Records Found" message and the empty bar, we have made some adjustments to the sample code. Here's the modified code snippet:

  const actionCompletehanlder = (args) => {

    const popupContentElement = autoRef.current.popupContentElement;

    if (args.result.length === 0) {

      isLenght = true;

      popupContentElement &&

        (popupContentElement.style.display = 'none') &&

        (popupContentElement.parentElement.style.border = 'none');

    } else {

      popupContentElement && (popupContentElement.style.display = 'block');

    }

  };

  const openHanlder = (args) => {

    if (isLenght) {

      args.popup.element.querySelector('.e-nodata').style.display = 'none';

      args.popup.element.style.border = 'none';

      isLenght = false;

    }

  };


<AutoCompleteComponent

                ref={autoRef}

                id="country"

                dataSource={countries}

                fields={localFields}

                popupHeight="250px"

                placeholder="e.g. Australia"

                filterType="StartsWith"

                noRecordsTemplate={noRecordsTemplate}

                actionComplete={actionCompletehanlder}

                open={openHanlder}

              />

 

 

In this modification, we are targeting the .e-nodata element directly and setting its display to 'none' to hide the "No Records Found" message. Additionally, adjustments have been made in the openHandler to hide the empty bar.

You can check the updated sample here: https://stackblitz.com/edit/react-g7b4zg-e1yirb?file=index.js

Please let us know if this resolves your issue or if you have any further questions. We are here to assist you.