RadComboBox DropDownList get stick to the bottom of page when clicked on Button in sharepoint environment.

[Priyanka]

Dear Telerik team I request you to please help me in resolving below issue as I am not much familiar with Telerik and Sharepoint environment. I posted my issue in other forums too but did not got any solution.

There is a "RadGrid" inside which there is a "RadComboBox" and a "asp:Button" next to it.
This RadGrid is NOT ​​inside "RadAjaxPanel" due to some reason.
When user key-in any text in RadComboBox and click on Button, only then the searching (related to key-in text) is started in RadComboBox and displayed in a DropDownList.

Now, when user type/key-in any text in RadComboBox and click on Button, then the related data binds to DropDownList of RadcomboBox but the DropDownList appears to stick at the bottom of the page and the whole page scroll shifts to half of the page.
and When I click outside of DropDownList then page becomes normal & DropDownList get closed. 

Please let me know why is this happening when I DONOT put RadGrid inside RadAjaxPanel ?

Below is the code I am using so far:

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

 

<script>
//disable opening of RadCombo dropdown when click on left image of dropdown
function OnClientDropDownOpening(sender, args) {
if (sender.get_items().get_count() == 0 || sender.get_text() == "") {
    args.set_cancel(true);
    }
}
//hide RadCombo dropdown If the text area is blank
function OnClientItemsRequested(sender, eventArgs) {
if (sender.get_items().get_count() < 1 || sender.get_text() == "")
    sender.hideDropDown();
}
</script>​

 

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 note that I am using Sharepoint in my application.

I tried all possible ways to solve this issue like: 

1.  MaintainScrollPositionOnPostback="true"

2. Setting the RadGrid scroll position in ClientSettings tag

3. used few javascript code 

but nothing worked in my scenario. Please somebody help me, I am facing this issue since long and I have to complete it at the soonest.

Thanks in advance.

 

 

​

[Priyanka]

The above issue happens in Chrome (Version 45.0.2454.99 m)

and In IE (version 9) browser, the whole page scroll DOES NOT shifts to half of the page but the DropDownList gets stick to the bottom of the page and when scrolling the page, dropdownlist remain stick at the bottom.

Below is the attached snapshot of the issue for IE (version 9).

Please let me know the reason and how to resolve it ? If needed more code then let me know.
Any help would be greatly appreciated.

[Priyanka]

Please somebody reply to my post. I tried all the solutions in the forum but no​ne of them worked in my case. Any help will be appreciated as I am running into deadline for this requirement. Please ​help.

[Priyanka]

Added back the RadAjaxPanel for RadGrid, and added the filtering logic in `StoredProcedure`, that I was doing before from code behind.<br/>
i.e., removed below line of code from .aspx.cs page:

//code related to search in RadComboBox
DataView dv = new DataView(dt);
dv.RowFilter = string.Format("AccountDescription LIKE '%{0}%'", txt);
//--other code

combo.DataBind();

and added this logic in StoredProcedure query. Due to RadAjaxPanel, DropDownList of RadComboBox is aligned to its proper position and all is working fine now.

Thank you