Set RadComboBox to full height after search

[Tim Ammons]

I am using the following RadComboBox to allow the user to lookup names from a long list.  Here is the sequence of events that describes the problem:

1. User types part of the name (Bob)
2. Combo filters values accordingly (let's say there are 2 Bob's)
3. User clicks on a value
4. The Combo dropdown is hidden
5. User decides to change what they typed from Bob to Tom
6. As the user begins typing Tom, the dropdown extends down, but not to its full height.  Since there were only 2 Bob's in the list, the list now shows 2 lines, not the full height of the dropdown.  And if there are 10 Tom's in the list, you can only see 2 of them unless you scroll down.
7. What I need is for the dropdown to once again extend to its full height, so it can show potentially 10 or even more values.

<telerik:RadComboBox ID="cboPatientList" runat="server" AllowCustomText="true" Filter="Contains" Width="100%" Height="400px" MaxHeight="400px" HighlightTemplatedItems="false" 
                ShowDropDownOnTextboxClick="true" ChangeTextOnKeyBoardNavigation="true" DropDownHeight="400px" EnableItemCaching="true" OnClientSelectedIndexChanged="PatientSelected"
                 >      
                <ItemTemplate>
                    <table style="width:90%" cellspacing="1" cellpadding="1">
                        <tr>
                            <td>
                                <%# sEncodedValue(Eval("FullName")) %>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </telerik:RadComboBox>     
            <asp:Button ID="btnResetPatientList" Text="Reset" runat="server" OnClientClick="ResetPatientList" UseSubmitBehavior="false"  />
            </div>
        </ContentTemplate>
    </telerik:RadWindow>

[Ivana]

Hi Tim,

I have just answered to the support ticket you have sent on this matter. Here is my answer for community reference:
"I have tested the described scenario locally and have managed to replicate the issue you experience at your end. I have discovered that the problem comes from the MaxHeight property being set. If you remove this property the issue is not visible any more.

The MaxHeight property, however, should not impact the Filter functionality like that. I will forward this situation to our development team and we will do our best to fix it."

It would be a lot better, however, if we continue our conversation in one thread as this way we will be able to avoid any possible misunderstanding.

Thank you!

All the best,
Ivana
the Telerik team

[Martin Roussel]

Ivana, any update on this?

Ive noticed the same issue with one of my RadComboBox and dont have the MaxHeight set. It happens when I use the filter, select an item and open back the dropdown. It doesnt seem to be occuring when AutoPostBack="true" though. Im using Q3 2012. Can you please post your working sample?

<telerik:RadComboBox ID="cboPaneSelectorTop" runat="server" meta:resourcekey="labShortcut" Skin="WebBlue" MarkFirstMatch="true" CssClass="cboPaneSelectorTop" AllowCustomText="true" Filter="Contains" HighlightTemplatedItems="True" NoWrap="true" AutoPostBack="false" OnClientSelectedIndexChanged="cboPaneSelector_OnClientSelectedIndexChanged" OnClientDropDownOpened="ShowEmptyMessage">
</telerik:RadComboBox>

Also, did you entered the issue in the PITS? If yes, please post the link so we can vote on it.

TIA

[Tim Ammons]

TIA,

It has been a while since I worked on this.  I fixed the problem but I'm not exactly sure how.  I think it was the pl.showDropDown() line , but I'm not sure.  I'm going to post some code here that I hope will help you.

            function DropDownPatientList(sender, eventArgs)             
{                 var pl = $find("<%= cboPatientList.ClientID %>");
                 pl.get_inputDomElement().value = '';
                 pl.get_inputDomElement().focus();
                 pl.requestItems('', false);
                 pl.showDropDown();
} 
<telerik:RadComboBox ID="cboPatientList" runat="server" AllowCustomText="true" 
Filter="Contains" Width="100%" Height="405px" HighlightTemplatedItems="true"                         
ShowDropDownOnTextboxClick="true" ChangeTextOnKeyBoardNavigation="true" DropDownHeight="400px" 
EnableItemCaching="false" OnClientSelectedIndexChanged="PatientSelected"                         
MinFilterLength="1" EnableLoadOnDemand="true" OnItemsRequested="cboPatientList_ItemsRequested" 
LoadingMessage="Loading..."                          
ShowMoreResultsBox="true" EnableVirtualScrolling="true" ItemsPerRequest="20" ItemRequestTimeout="200" >
                           <HeaderTemplate>  ...

- Tim

[Martin Roussel]

thanks for the reply Tim,

Can you show where you call that function. I cant see it in the RadComboBox definition you provided. I tried adding "sender.showDropDown();" at the end of my OnClientDropDownOpened event, without success.
TIA


Martin

[Tim Ammons]

Martin,

Sorry about that - I call it from RadWindow.  I think the formatting might get messed up here, but here you go:

<telerik:RadWindow ID="rwinPatientSearch" VisibleOnPageLoad="false" runat="server" VisibleTitlebar="true" VisibleStatusbar="false" Width="500" Height="595"             Title="Patient Search" CssClass="PatientSearch" Behaviors="Close,Move" Modal="true" KeepInScreenBounds="true" RestrictionZoneID="MainForm"             OnClientShow="DropDownPatientList" ReloadOnShow="true" OnClientClose="OnClientClose" OnClientDragStart="OnClientClose" OnClientDragEnd="ResetPatientList" >             <ContentTemplate>                 <div>                     <telerik:RadComboBox ID="cboPatientList" runat="server" AllowCustomText="true" Filter="Contains" Width="100%" Height="405px" HighlightTemplatedItems="true"                         ShowDropDownOnTextboxClick="true" ChangeTextOnKeyBoardNavigation="true" DropDownHeight="400px" EnableItemCaching="false" OnClientSelectedIndexChanged="PatientSelected"                         MinFilterLength="1" EnableLoadOnDemand="true" OnItemsRequested="cboPatientList_ItemsRequested" LoadingMessage="Loading..."                          ShowMoreResultsBox="true" EnableVirtualScrolling="true" ItemsPerRequest="20" ItemRequestTimeout="200" >

[Martin Roussel]

Tim, thanks to you, ive I found the workaround. Finally, it is the "requestItems" that seems to refresh the control after it is opened.

function RefreshHeight(sender, eventArgs) {
    sender.requestItems('', false);
}

<telerik:RadComboBox ID="cboPaneSelectorTop" runat="server" meta:resourcekey="labShortcut" Skin="WebBlue" MarkFirstMatch="true" CssClass="cboPaneSelectorTop" AllowCustomText="true" Filter="Contains" HighlightTemplatedItems="True" NoWrap="true" AutoPostBack="false" OnClientSelectedIndexChanged="cboPaneSelector_OnClientSelectedIndexChanged" OnClientDropDownOpened="ShowEmptyMessage" OnClientDropDownOpening="RefreshHeight">
</telerik:RadComboBox>

Thanks again


Martin

[Tim Ammons]

Martin,

Excellent!  And I just documented it in my program so I will know going forward!

- Tim