RadComboBox DropDownList is dittached from its place

Question

There is a RadGrid which contains RadcomboBox along with button next to it. When user key-in something and click on button, data bind in RadComboBox related to key-in text and display in DropdownList.

but this DropdownList appear far below from RadcomboBox, which disturbs the look & feel of the page. See the attached issue snapshot:

I tried to set ExpandDirection="Down" property but this did not work. Also I tried to set EnableScreenBoundaryDetection="false", this sticks the Dropdownlist at the bottom of page, so when I scroll the page, DropDown always stick at bottom & it also scrolls with the page.

Also, I set the HighlightTemplatedItems="true" but it is not working at all.

Edit

HTML code:

 <telerik:RadMultiPage ID="RadMultiPage6" runat="server" SelectedIndex="0" Width="100%">
    <telerik:RadPageView ID="RadPageView5" runat="server" Width="100%">                                                                             
    <%--<telerik:RadAjaxPanel ID="RadAjaxPanel5" runat="server">--%>
        <telerik:RadGrid ID="RGGSTAcCode" runat="server" AutoGenerateColumns="false"  
           ShowFooter="True" GroupingEnabled="False" ShowStatusBar="true"         
           AllowAutomaticInserts="False" AllowAutomaticUpdates="False" AllowAutomaticDeletes="true"
           OnNeedDataSource= "rggstAcCode_NeedDataSource" OnItemDataBound="rggstAcCode_ItemDataBound"                    
           OnInsertCommand="rggstAcCode_InsertCommand" OnDeleteCommand="rggstAcCode_DeleteCommand"
           OnUpdateCommand="rggstAcCode_UpdateCommand" EnableEmbeddedSkins="true" Skin="Outlook">
    
        <mastertableview commanditemdisplay="Top" autogeneratecolumns="false" datakeynames="AccountCodeID" 
           insertitempageindexaction="ShowItemOnCurrentPage" ShowFooter="True" ShowHeadersWhenNoRecords="true">
    
           <CommandItemSettings AddNewRecordText="New" />
             <Columns>
                <telerik:GridEditCommandColumn UniqueName="imagebutton1" ButtonType="ImageButton"></telerik:GridEditCommandColumn>
    
                <telerik:GridTemplateColumn UniqueName="AccountCode" HeaderText="Account Code">
                  <ItemTemplate>
                     <asp:Label ID="lblAcCode" Text='<%# Eval("AccountCode") %>' runat="server"></asp:Label>
                  </ItemTemplate>
                  <EditItemTemplate>
                     <asp:Label ID="lblAcCode2" runat="server" Text='<%# Eval("AccountCode") + " - " + Eval("AccountDescription")%>' Visible="false"></asp:Label>
                                                                     
                     <telerik:RadComboBox ID="ddlAccountCode" runat="server" Height="200" Width="260" DropDownWidth="310"       
                       EnableLoadOnDemand="True" OnItemsRequested="ddlAccountCode_ItemsRequested" EnableItemCaching="true"  
                       ShowMoreResultsBox="True" EnableVirtualScrolling="true" AllowCustomText="true" MarkFirstMatch="true"
                       Filter="Contains" HighlightTemplatedItems="true" CausesValidation="true" AppendDataBoundItems="true" 
                       DataTextField="AccountDescription" DataValueField="AccountCodeID"
                       ShowDropDownOnTextboxClick="false"
                       OnClientDropDownOpening="OnClientDropDownOpening" OnClientItemsRequested="OnClientItemsRequested">                                    
                     </telerik:RadComboBox>              
                                                                                    
                     <asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" OnClientClick="ButtonClicked()" UseSubmitBehavior="true" />&nbsp; 
                  </EditItemTemplate>
                </telerik:GridTemplateColumn>
                //Other columns
             </Columns>
    
             <EditFormSettings>
                <EditColumn ButtonType="ImageButton" />
             </EditFormSettings>
             <PagerStyle AlwaysVisible="True" PageSizeControlType="RadComboBox" />
        </mastertableview>
        </telerik:RadGrid>
    <%--</telerik:RadAjaxPanel>--%>
    </telerik:RadPageView>                                                                         
    </telerik:RadMultiPage>

C# code:

protected void ddlAccountCode_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
    {
        Session["Text"] = e.Text;
        Session["NumberOfItems"] = e.NumberOfItems;

        RadComboBox combo = (RadComboBox)sender;
        combo.ShowDropDownOnTextboxClick = false;
        combo.Items.Clear();
        combo.HighlightTemplatedItems = true;
    }

    protected void btnSearch_Click(object sender, EventArgs e)
    {
        try
        {
            GridEditableItem editedItem = (sender as Button).NamingContainer as GridEditableItem;

            RadComboBox combo = (RadComboBox)editedItem.FindControl("ddlAccountCode");
            //clear the previous items on every new search
            combo.Items.Clear();
            combo.OpenDropDownOnLoad = true; // opens dropdown of RadComboBox on button click
            combo.HighlightTemplatedItems = true; // to highlight the searched text

            //Code related to search in RadComboBox
            combo.DataBind();
        }
        catch (Exception ex)
        {
        }
    }

Answer 1

I removed the RadAjaxPanel and used the asp.net UpdatePanel and the issue resolved as of now as the page will not post back on button click and above behavior will never happen. But I dont know why it is creating issue when I do not put RadGrid in RadAjaxPanel or UpdatePanel.

Answer 2

Sorry i can't replicate your problem in my environment....

Here is my code using
.aspx

<telerik:RadGrid ID="RGGSTAcCode" runat="server" AutoGenerateColumns="false"  
     ShowFooter="True" GroupingEnabled="False" ShowStatusBar="true"         
     AllowAutomaticInserts="False" AllowAutomaticUpdates="False" AllowAutomaticDeletes="true"
     OnNeedDataSource="rggstAcCode_NeedDataSource">
        <MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="false"
         InsertItemPageIndexAction="ShowItemOnCurrentPage" ShowFooter="True" ShowHeadersWhenNoRecords="true">
            <CommandItemSettings AddNewRecordText="New" />
            <Columns>
                <telerik:GridEditCommandColumn UniqueName="imagebutton1" ButtonType="ImageButton"></telerik:GridEditCommandColumn>
                <telerik:GridTemplateColumn UniqueName="AccountCode" HeaderText="Account Code">
                    <ItemTemplate>
                        <asp:Label ID="lblAcCode" runat="server" Text='<%# Eval("AccountCode") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:Label ID="lblAcCode2" runat="server" Text='<%# Eval("AccountCode") + " - " + Eval("AccountDescription")%>' Visible="false"></asp:Label>
                        <telerik:RadComboBox ID="ddlAccountCode" runat="server" Height="200" Width="260" DropDownWidth="310"       
                         EnableItemCaching="true" ShowMoreResultsBox="True" EnableVirtualScrolling="true" AllowCustomText="true" 
                         MarkFirstMatch="true" Filter="Contains" HighlightTemplatedItems="true" CausesValidation="true" 
                         AppendDataBoundItems="true" ShowDropDownOnTextboxClick="false" OnItemsRequested="ddlAccountCode_ItemsRequested">
                        </telerik:RadComboBox>
                        <asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" />&nbsp; 
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>            
            </Columns>
        <EditFormSettings>
            <EditColumn ButtonType="ImageButton" />
        </EditFormSettings>
        <PagerStyle AlwaysVisible="True" PageSizeControlType="RadComboBox" />
    </MasterTableView>
</telerik:RadGrid>

.cs

protected void Page_Load(object sender, EventArgs e)
{
    // Check
    if (!IsPostBack)
    {
        // Variable
        DataTable dt = new DataTable();
        dt.Columns.Add("AccountCode");
        dt.Columns.Add("AccountDescription");

        for (int i = 0; i < 10; i++) dt.Rows.Add("AccountCode" + i, "AccountDescription" + i);

        ViewState["data"] = dt;

        // Bind
        RGGSTAcCode.DataSource = dt;
        RGGSTAcCode.DataBind();

        // Dispose
        dt.Dispose();
    }
}

protected void rggstAcCode_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    RGGSTAcCode.DataSource = ViewState["data"] as DataTable;
}

protected void ddlAccountCode_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
{
    Session["Text"] = e.Text;
    Session["NumberOfItems"] = e.NumberOfItems;

    RadComboBox combo = (RadComboBox)sender;
    combo.ShowDropDownOnTextboxClick = false;
    combo.Items.Clear();
    combo.HighlightTemplatedItems = true;
}

protected void btnSearch_Click(object sender, EventArgs e)
{
    try
    {
        GridEditableItem editedItem = (sender as Button).NamingContainer as GridEditableItem;

        RadComboBox combo = (RadComboBox)editedItem.FindControl("ddlAccountCode");
        //clear the previous items on every new search
        combo.Items.Clear();
        combo.OpenDropDownOnLoad = true; // opens dropdown of RadComboBox on button click
        combo.HighlightTemplatedItems = true; // to highlight the searched text

        //Code related to search in RadComboBox
        combo.DataSource = ViewState["data"] as DataTable;
        combo.DataTextField = "AccountCode";
        combo.DataValueField = "AccountCode";
        combo.DataBind();
    }
    catch (Exception ex)
    {
    }
}

Result as below