RadComboBox DropDownList is dittached from its place - radgrid

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. Please refer the attached issue snapshot.
I tried to set ExpandDirection="Down" property but did not worked.
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" />
</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)
{
}
}
Please let me know how to resolve the 2 issues. Please reply.
Thanks in advance.

Answer 1

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" />
</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

Answer 2

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.