We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ejs-AutoCompelte Conditional Background Color for Rows

Just wondering if there is a way to add conditional background color to rows in AutoComplete like DataGrid. In DataGrid, we can use rowDataBound event but can't find a way to do in A


3 Replies

SP Sureshkumar P Syncfusion Team December 27, 2022 10:15 AM UTC

Hi Abaid-ur-Rehman,

You can achieve your requirement by using the autocomplete component open event.

Find the code example here:

 

@{

    var data = new string[] { "American Football", "Badminton", "Basketball", "Cricket", "Football", "Golf", "Hockey", "Rugby", "Snooker", "Tennis" };

}

 

<ejs-autocomplete id="games" dataSource="@data" open="ComponentOpen" placeholder="e.g. Basketball">

</ejs-autocomplete>

 

<script>

    function ComponentOpen() {

        setTimeout(() => {

            if (document.querySelector('[data-value=Badminton]') != null){

                document.querySelector('[data-value=Badminton]').classList.add("e-green");

            }

            else if (document.querySelector('[data-value=Cricket]') != null){

                document.querySelector('[data-value=Cricket]').classList.add("e-blue");

            }

        },50)

    }

</script>

 

<style>

 

    .e-dropdownbase .e-list-item.e-green {

        background-color: green;

    }

 

    .e-dropdownbase .e-list-item.e-blue {

        background-color: blue;

    }

 

</style>

 


Regards,

Sureshkumar P.



AZ Abaid-ur-Rehman Zulfi December 29, 2022 05:58 AM UTC

Thanks for your reply; however, I couldn't make it work as you explicitly declared a one-dimensional array. In my case, I am using DataManager with AutoComplete to mimic live search. The data returned by API contains the following data elements

  1. EmployeeId
  2. Name
  3. Department
  4. InActive


If InActive is TRUE, the background color should turn RED; otherwise, a transparent color should be applied.





SP Sureshkumar P Syncfusion Team December 30, 2022 10:57 AM UTC

Hi Abaid-ur-Rehman,

You can achieve your requirement by using the autocomplete component open event.

Find the code example here:

 

@{

    var data = new string[] { "American Football", "Badminton", "Basketball", "Cricket", "Football", "Golf", "Hockey", "Rugby", "Snooker", "Tennis" };

}

 

<ejs-autocomplete id="games" dataSource="@data" open="ComponentOpen" placeholder="e.g. Basketball">

</ejs-autocomplete>

 

<script>

    function ComponentOpen() {

        setTimeout(() => {

            if (document.querySelector('[data-value=Badminton]') != null){

                document.querySelector('[data-value=Badminton]').classList.add("e-green");

            }

            else if (document.querySelector('[data-value=Cricket]') != null){

                document.querySelector('[data-value=Cricket]').classList.add("e-blue");

            }

        },50)

    }

</script>

 

<style>

 

    .e-dropdownbase .e-list-item.e-green {

        background-color: green;

    }

 

    .e-dropdownbase .e-list-item.e-blue {

        background-color: blue;

    }

 

</style>

 


Regards,

Sureshkumar P.


Loader.
Up arrow icon