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
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.
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
If InActive is TRUE, the background color should turn RED; otherwise, a transparent color should be applied.
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.