Monday, March 26, 2012

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.

No comments:

Post a Comment