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.
Unfortunately, activation email could not send to your email. Please try again.

Is it possible to customize cells of a multicolumn autocomplete?

Thread ID:

Created:

Updated:

Platform:

Replies:

128053 Dec 28,2016 04:08 PM Jan 2,2017 10:59 AM JavaScript 1
loading
Tags: ejAutoCompleteTextBox
Thomas French
Asked On December 28, 2016 04:08 PM

I currently have an Angular1 autoComplete textbox with multi columns. I was wondering if it is possible to color or disable a row, to represent that it has already been selected previously.

For example..

I have a list of "selected" states, that starts with 0 items in it.
I have an autoComplete textbox that is populated with the states["New York" "Florida", "New Mexico"]

If I type into the textbox "New" I should get two results: "New York" and "New Mexico".
Lets say that I select the row "New York". I now place the element "New York" into my list of selected states.

If I reset my textbox back to empty string, and start again, then type in "New" again I should get the same results as before.
However, this time I would like to see the row with "New York" disabled (or colored differently) since it has already been selected and exists in my selected states list.

Is this possible to do?

Thank you

Rekha J [Syncfusion]
Replied On January 2, 2017 10:59 AM

Hi Thomas, 
Thanks for contacting Syncfusion support. 
Query: if it is possible to color or disable a row, to represent that it has already been selected previously. 
We have checked the query and we have achieved your requirement by using “select” and “open” events of ejAutocomplete. In select event, we can get the selected row item. In Open event, comparing selected row item with table data and finding the same data in suggestion list. We can add custom class for selected row of the autocomplete to differentiate the row is already selected. 
For your convenience, we have provided the below code snippet: 
 
$scope.select=function (args) { 
      var found = selectedEmployees.some(function (el) { 
                                return el.OrderID === args.item.OrderID; 
       }); 
                 if (!found) { selectedEmployees.push(args.item); } 
    } 
$scope.open=function(args){ 
      if(selectedEmployees.length>0)  
                      for(var i=0;i<selectedEmployees.length;i++) 
                                this.suggestionList.find("tr[id='"+selectedEmployees[i].OrderID+"']").addClass("selected"); 
    } 
 
  <style> 
tr.selected{ 
                                background-color:cyan !important; 
                                color: red; 
        font-family: fantasy; 
                } 
   </style> 
For your convenience, we have provided a simple sample and the sample is available in: 
we would be happy to assist you for further queries, 
Regards, 
Rekha. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;