ASP.NET

AutoCompleteExtender highlighted text truncation RSS

4 replies

Last post May 16, 2013 11:26 AM by mhbalti

‹ Previous Thread|Next Thread ›

- Reply
Nasko

None

0 Points

13 Posts
AutoCompleteExtender highlighted text truncation

Dec 16, 2012 10:26 AM|LINK
Hi,

I have a text box with autocomplete extender attached, showing the results in an associated panel. Here is the relevant code:
```
<asp:TextBox ID="st" runat="server" Wrap="False"></asp:TextBox>
<asp:Panel runat="server" ID="stPanel" Wrap="False" ScrollBars="Horizontal" />
<asp:AutoCompleteExtender ID="stex" runat="server" DelimiterCharacters="" Enabled="True"
         ServiceMethod="GetAlike" ServicePath="sbox.asmx" ClientIDMode="Static"
         TargetControlID="st" UseContextKey="True" MinimumPrefixLength="2"
         CompletionInterval="300" CompletionSetCount="20" CompletionListElementID="stPanel">
</asp:AutoCompleteExtender>
```
The problem is that when an item from the result list is selected with length bigger than panel’s width, and you scroll horizontally, the item’s text is truncated to the originally displayed portion, i.e. the hidden part is not shown:

I have tried to solve the problem with some CSS to “CompletionListHighlightedItemCssClass” property but without success.

Please, help with an advice or a solution, thanks!
- Reply
chetan.sarod...

All-Star

65619 Points

11118 Posts

Re: AutoCompleteExtender highlighted text truncation

Dec 17, 2012 02:25 AM|LINK

Refer this

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AutoComplete/AutoComplete.aspx and http://www.asp.net/ajaxlibrary/act_AutoComplete.ashx

Chetan Sarode
Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.
- Reply
RameshRajend...

Star

7983 Points

2099 Posts

Re: AutoCompleteExtender highlighted text truncation

Dec 17, 2012 03:27 AM|LINK

http://weblogs.asp.net/manojkdotnet/archive/2009/11/30/text-and-value-pairs-with-autocompleteextender-and-display-record-in-gridview.aspx
- Reply
Nasko

None

0 Points

13 Posts
Re: AutoCompleteExtender highlighted text truncation

Dec 17, 2012 05:39 PM|LINK
Thank you both, but,

Chetan, I know these links, but no one says there that:
1. If you want to modify extender’s styles you must define and associate all the three styles altogether: “CompletionListCssClass", “CompletionListItemCssClass", ”CompletionListHighlightedItemCssClass”. If you omit even one of them, exception error occurs “0x800a139e - Microsoft JScript runtime error: Sys.ArgumentNullException: Value cannot be null”. To avoid this, you may define and associate an empty class.
2. “CompletionListElementID” property is obsolete.

Ramesh, your link is useful but I have already implemented this solution of type key/value.

I have removed the “panel” element and after some playing with styles found that actually highlighted item’s text was not truncated, and truncation occurs only on background color. So, now, the question is how to mark as selected the entire no-wrapped item?

Styles are:
```
.autoList
        {
            background-color: #C0C0C0;
            border-style: solid;
            border-width: thin;
            margin: 0px;
            padding: 1px;
            text-align: left;
            overflow: auto;
            white-space: nowrap;
        }
        .autoItem
        {
        }
        .autoHighlighted
        {
            background-color: #336699;
            color: white;
        }
```
```
CompletionListCssClass="autoList"
CompletionListItemCssClass="autoItem"
CompletionListHighlightedItemCssClass="autoHighlighted"
```
- Reply
mhbalti

Member

611 Points

260 Posts

Re: AutoCompleteExtender highlighted text truncation

May 16, 2013 11:26 AM|LINK

http://deepasp.wordpress.com/2013/05/14/ajax-autocomplete-crossbrowser-compatiblity/

deepasp.wordpress.com
"A candle loses nothing by lighting another candle."