ListSearchExtender - Inside HTML Table - Prompt position is above table

I've seen forum questions regarding this issue from several months ago.

Has a solution been found?

I am putting al dropdownlist inside an html table using a listsearchextender.

I have not modified the css, so it is using the sample that comes with the toolkit.

When I click on the dropdownlist, the search prompt displays above the table.

I also added several additional dropdownlists with extenders and they all put the search prompt above the table

Is there a work around to get the search prompt to display directly above the position of the dropdownlist regardless of what row it on in a table ?

Thanks.

Hi,

I tried what you described on the sample web site, but can't reproduce the issue. Here is the code I used:

<table>
<tr>
<td>
</td>
<td style="width: 103px">
aa</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td style="width: 103px">
bb</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td style="width: 103px">
<asp:DropDownList ID="DropDownList1" runat="server" Width="100px" /></td>
<td>
</td>
</tr>
</table>
<br />
<p>
<ajaxToolkit:ListSearchExtender ID="ListSearchExtender2" runat="server"
TargetControlID="DropDownList1" PromptCssClass="ListSearchExtenderPrompt">
</ajaxToolkit:ListSearchExtender>
</p>

ListSearchExtender - prompt position problem

I started by adding one ListSearchExtender linked to a first DropDownList (SystemID) and everything was working fine, the prompt was appearing on top of my DropDownList. Then I added a second ListSearchExtender for a second DropDownList (Country) and now the prompt position appears way at the top of my table. I removed the fist ListSearchExtender and test with the second ListSearchExtender only and I still have my problem. Both ListSearchExtender are located in their own update panel with the DropDownList and ValidatorCalloutExtender.

Anyone has a suggestion on this one?

Thanks

Hi Freedom,

Did you set the TargetControlID of the two ListSearchExtenders to the same control? I made a sample by following your description but failed to reproduce your issue. So would you please provide a simple sample here?Thanks

Best regards,

Jonathan

Did you set the updatemode on th updatepanels to conditional. This will avoid all the panels from refreshing.

ListSearchExtender - possible to disable the Prompt text?

The ListSearchExtender is a great new control, and works really well, however the prompt text that accompanies is rather superfluous for my needs. Is there a way to disable it?

Not setting the Prompt properties doesnt work as that just defaults to showing the prompt, and setting the prompt text to "" still causes a slight area to be reserved for the text (and overlaps another of my controls). I just dont want any prompts at all...

Possible?

Just to say that I've also tried setting the CSS style of the Prompt to be "display:none", and also position: absolute, top: -500000px etc... but to no avail :(

It would be nice to use this control but I can't if its going to have this text displayed.

Hello there,

I'll see if I can find a way to disable it for you, but in any event I'll make sure that for the next release there is an option to disable it. This is something that came up in the code review as a suggestion, but I didn't have time to implement it before the release.

Regards,

Damian (ListSearch contributor).

Thanks Damian... and thanks for creating the ListSearch too!

If I set the promptCssClass to 'list_search_message' and define 'list_search_message' like this:

.list_search_message
{
display:none;
}

Then I don't see the prompt message ... could you let me now if you don't experience the same thing? I'm using IE7

dmehers:

If I set the promptCssClass to 'list_search_message' and define 'list_search_message' like this:

.list_search_message
{
display:none;
}

Then I don't see the prompt message ... could you let me now if you don't experience the same thing? I'm using IE7

Well dont I feel like a right idiot Worked a treat, thank you. No dea why it didnt work for me before. Obviously I made some kind of mistake!

Thank you...

ListSearchExtender prompt position

Would it be possible to add two new positions for the prompt: Left and Right? When using a DropdownList control inside of an HTML table the prompt cannot display correctly when positioned at the top of the control because it overwrites the list and it becomes unreadable. When inside of an HTML table it would be nice to be able to position the prompt either to the left or right of the control. Also, it would be good to have a prompt enable/disable feature because blanking the prompt text does not resolve the problem. I tried the workaround of setting the CSS class .list_search_method display:none; but that doesn't seem to work in some cases.

You could change the ListSearchExtender code easily to have it adapt to your scenario. Although, you shouldopen a work item to have us fix this.

You will need to add additional values to the ListSearchPromptPosition enum and modify the Behavior as well.

1 In the js file...
2
3 // Hook up a PopupBehavior to the promptDiv
4 this._popupBehavior = $create(AjaxControlToolkit.PopupBehavior, { parentElement : element }, {}, {},this._promptDiv);
5 if (this._promptPosition &&this._promptPosition == AjaxControlToolkit.ListSearchPromptPosition.Bottom) {
6 this._popupBehavior.set_positioningMode(AjaxControlToolkit.PositioningMode.BottomLeft);
7 }else if (this._promptPosition &&this._promptPosition == AjaxControlToolkit.ListSearchPromptPosition.Top) {
8 this._popupBehavior.set_positioningMode(AjaxControlToolkit.PositioningMode.TopLeft);
9 }else {
10 this._popupBehavior.set_x(getLeftOffset());// compute those offset values based on whether left or right was passed for the prompt position
11 this._popupBehavior.set_y(getTopOffset());// see popup control behavior on how it does that
12 }

Modify theenum...1516AjaxControlToolkit.ListSearchPromptPosition.prototype = {17 Top: 0,18 Bottom: 1,19 Left: 2,20 Right: 321}22AjaxControlToolkit.ListSearchPromptPosition.registerEnum('AjaxControlToolkit.ListSearchPromptPosition');In the cs file...26public enum ListSearchPromptPosition27 {28 Top = 0,29 Bottom=1,30 Left=2,31 Right=3,3233 }34

would you be able to advise your HTML that isn't working? Simply doing this:

 <table style="border: 2px solid black;"> <tr> <td><asp:ListBox ID="ListBox1" runat="server" Width="100px" /></td> </tr> </table> <ajaxToolkit:ListSearchExtender ID="ListSearchExtender1" runat="server" TargetControlID="ListBox1" PromptCssClass="ListSearchExtenderPrompt"> </ajaxToolkit:ListSearchExtender> works fine.

well, what it is overwriting is the top of the table and the border.

Basically to work around this, the behavior would have to create a span located above the textbox in its parent container.

I don't see that it overwrites the text of the list itself, though.

Thanks for the suggestion. I experimented a bit more based on your suggestion and found that by adding a row on top of the ListBox row allows the prompt to be displayed without clobbering anything around it. But if you need to place some text above the ListBox, then this workaround is not the best.

<table style="border: 2px solid black;">

<tr><td> </td></tr>

<tr>
<td><asp:ListBox ID="ListBox1" runat="server" Width="100px" /></td>
</tr>
</table>
<ajaxToolkit:ListSearchExtender ID="ListSearchExtender1" runat="server"
TargetControlID="ListBox1" PromptCssClass="ListSearchExtenderPrompt">
</ajaxToolkit:ListSearchExtender>

Thanks, I will open a work request as suggested. I had started to play with the source code last week and figured out the enum and prototype additions for Left and Right. I tried also to add code to check for ListSearchPromptPosition.Left and ListSearchPromptPosition.Right and was hoping that AjaxControlToolkit.PositioningMode.Left and AjaxControlToolkit.PositionMode.Right was already supported. I gave up at that point.

Here is what I tried to do:

3 // Hook up a PopupBehavior to the promptDiv
4 this._popupBehavior = $create(AjaxControlToolkit.PopupBehavior, { parentElement : element }, {}, {}, this._promptDiv);
5 if (this._promptPosition && this._promptPosition == AjaxControlToolkit.ListSearchPromptPosition.Bottom) {
6 this._popupBehavior.set_positioningMode(AjaxControlToolkit.PositioningMode.BottomLeft);
7 } else if (this._promptPosition && this._promptPosition == AjaxControlToolkit.ListSearchPromptPosition.Top) {
8 this._popupBehavior.set_positioningMode(AjaxControlToolkit.PositioningMode.TopLeft);
7 } else if (this._promptPosition && this._promptPosition == AjaxControlToolkit.ListSearchPromptPosition.Left) {
8 this._popupBehavior.set_positioningMode(AjaxControlToolkit.PositioningMode.Left);
7 } else if (this._promptPosition && this._promptPosition == AjaxControlToolkit.ListSearchPromptPosition.Right) {
8 this._popupBehavior.set_positioningMode(AjaxControlToolkit.PositioningMode.Right);
9 }

If I have time I will try to work out the code as suggested.

thanks!

Hi,

Was there ever a work item opened for this? Ability to position the prompt text more precisely would be helpful. Also, sometimes the dropdown opens down and sometimes it opens up. Then the prompt is covered up. Making the prompt position dynamic would be even better.