Dropdown Template Header and Footer?

[Mbott]

Is the anything planned to allow for a header and footer in the drop down template? Or is there a way to implement such a feature with the current build?

[Ivana]

Hi Mike,

Actually we have not been contemplating on this subject for we wanted to keep the RadAutoCompleteBox as simple and yet as powerful as possible.

If you, however, need the templates, header and footer, you might consider using the RadComboBox instead of RadAutoCompleteBox.

I hope this is helpful.

Kind regards,
Ivana
the Telerik team

[Mike Steiner]

Hi Ivana,
I have "nearly" found a workaround.

In the client-side event RadAutoCompleteBox_OnClientRequested, I have succeeded in  adding a "header" as the first row in the dropdown list by adding a <li> tag at the beginning of the list:

 

var tempArgs = args.get_data().html;

 

tempArgs = tempArgs.replace(

'<table cellpadding="0" cellspacing="0" style="width: 100%;">',

 

 

'<table cellpadding="0" cellspacing="0" style="width: 100%;"><TR style="WIDTH: 100%; COLOR: inherit; background-color:#C8C8C8">'

 

+

'<TD style="WIDTH: 40%"><B>Header First column</B></TD>'

 

+

'<TD style="WIDTH:60%"><B>Header Second column</B></TD>'

 

+

'</tr>'

 

+

'</table>'

 

+

'</li><li class="racItem racTemplate">'

 

+

'<table cellpadding="0" cellspacing="0" style="width: 100%;">');
However, when the user clicks on an item in the dropdown list control, it "chooses the next" item in the list.
I guess I haven't fooled it well enough, and have confused its indexing?!?!

Can you think how to use this as a basis for a workaround, and get the control to create an entry for the right list item the user clicked?

Tnx,
Mike

 

[Kate]

Hello Mike,

In general the RadAutoCompleteBox control does not support Header and/or Footer templates therefore my colleague proposed that you used the RadComboBox control. Here is a demo of the control that demonstrates the desired appearance. 

Greetings,
Kate
the Telerik team

[Mark Kucera]

Is there a recommended way to create the display aspects of the RadComboBox with styled multicolum display with a header, but also have the tokenized aspect of the autocomplete textbox?  The auto complete textbox seems like it does almost everything that i need and i've created a custom template , which works great except that i can't put a header at the top.  I'm using a simple datatable from my database as the data source, but it would be very useful to put a single column header across the top of the list. it seems to me that this would be a very common use case scenario.  it would also be very useful from a formatting standpoint to be able to have a header where i can define a single <table>  and then an item template that is just a <tr> .. </tr>  so that like columns in each row will occupy the same amount of space.  Right now i can overcome that by using a fixed pixel width in each cell, but a % width is disasterous.  The RadComboBox seems to address that problem but it doesn't have the same tokenizer capability that the auto complete textbox has.  With the autocomplete textbox i can press the backspace or X and the whole item is removed.  in the RadComboBox as i hit backspace it just partially erases the text and i have to hope that my users will continue to erase the whole thing..

Additionally with either of these controls is there a way to prevent the user from selecting more than 1 item.  in most cases i want them to type text to find an item and select it, but not allow them to type and select more items.

Thanks!
-Mark

[Kate]

Hi Mark,

Unfortunately with the RadAutoCompleteBox you have the possibility of setting templates only to the entries as exemplified and explained in this demo and help article. I will, however, forward you request to our development team so they can review your request and include in the future improvements of the control. Regarding your last question, once you set the Text mode of the RadAutoCompleteBox control you can use its SelectionMode property as explained here. 

Kind regards,
Kate
the Telerik team

[Mark Kucera]

Thanks for the reply.  i'm attaching a simple example of what i would ideally like to accomplish with a template formatting, although i think its probably obvious to most. 

Regarding my last question your answer seem pretty straight forward so i'll give that a shot.  i hadn't noticed that setting, probably because it was nested property.

-Mark

[Mark Kucera]

Oh, i see why i missed the

<TextSettings SelectionMode="Single" />

option.  It's not in my version.  I need to upgrade. i'm currently using v2012.2.912.40 which I believe is the Q2 release.

-Mark