RadGrid Popup not showing correctly with PopUpSettings-Modal="true"

[Neha]

<%@ Page Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true"
    Codebehind="ManageFAQsNew.aspx.cs" Inherits="TRAC.Connect.WebSite.ManageFAQsNew"
    Title="TRAC Connect :: Manage FAQs" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="Caption.ascx" TagName="Caption" TagPrefix="cap" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MasterContentPlaceHolder" runat="server">
    <asp:Panel ID="HeightAdjusterPanel" runat="server" Height="660" Width="98%">
        <cap:Caption ID="MyCaption" runat="server" CaptionText="Manage FAQs" />
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
        </telerik:RadWindowManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="radGridManageFAQs">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="radGridManageFAQs" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" InitialDelayTime="20"
            MinDisplayTime="20">
        </telerik:RadAjaxLoadingPanel>
          <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function PopUpShowing(sender, eventArgs) {
                                    var popUp = eventArgs.get_popUp();
                                    var popUppopUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
                                    var popUppopUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
                                    var windowHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
                                    var windowWidth = document.body.offsetWidth;
                                    if (popUppopUpHeight == "") popUppopUpHeight = 300; // if the height isn't set on the popup, default to 300px
                                    popUp.style.position = "fixed";
                                    popUp.style.left = (Math.floor((windowWidth - popUppopUpWidth) / 2)).toString() + "px";
                                    popUp.style.top = (Math.floor((windowHeight - popUppopUpHeight) / 2)).toString() + "px";
                }
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadGrid ID="radGridManageFAQs" runat="server" AutoGenerateColumns="False"
            PageSize="15" AllowSorting="True"  ShowStatusBar="True" AllowMultiRowEdit="true"
            OnNeedDataSource="radGridManageFAQs_DataSource">
            <MasterTableView CommandItemDisplay="TopAndBottom" TableLayout="Fixed" EditMode="PopUp"
                DataKeyNames="FaqId,FaqPosition,Category">
                <NoRecordsTemplate>
                    <div>
                        There are no records to display
                    </div>
                </NoRecordsTemplate>
                <GroupByExpressions>
                    <telerik:GridGroupByExpression>
                        <SelectFields>
                            <telerik:GridGroupByField FieldName="CategoryCode.Description" HeaderText="Category"
                                FieldAlias="CategoryCode.Description" />
                        </SelectFields>
                        <GroupByFields>
                            <telerik:GridGroupByField FieldName="CategoryCode.ResultPosition" FieldAlias="CategoryCode.ResultPosition" />
                            <telerik:GridGroupByField FieldName="CategoryCode.Description" FieldAlias="CategoryCode.Description" />
                        </GroupByFields>
                    </telerik:GridGroupByExpression>
                </GroupByExpressions>
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="ImageButton" FilterControlAltText="Filter EditCommandColumn column"
                        EditImageUrl="~/images/Edit.bmp">
                        <HeaderStyle Width="20px" />
                    </telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn DataField="FaqId" Display="False" HeaderText="Faq Id" UniqueName="FaqId"
                        FilterControlAltText="Filter FaqId column" />
                    <telerik:GridBoundColumn DataField="FaqPosition" Display="False" UniqueName="FaqPosition"
                        HeaderText="Faq Position" FilterControlAltText="Filter FaqPosition column" />
                    <telerik:GridBoundColumn DataField="CategoryCode.Description" Display="False" UniqueName="Desc"
                        HeaderText="Category Description" FilterControlAltText="Filter Desc column" />
                    <telerik:GridBoundColumn DataField="CategoryCode.ResultPosition" Display="False"
                        HeaderText="Category ResultPosition" UniqueName="ResPos" FilterControlAltText="Filter ResPos column" />
                    <telerik:GridBoundColumn DataField="Text" HeaderText="FAQ Text" UniqueName="Text"
                        FilterControlAltText="Filter Text column" Display="false">
                        <HeaderStyle Width="300px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Category" HeaderText="Category" Display="False"
                        UniqueName="Category" FilterControlAltText="Filter Category column" />
                    <telerik:GridBoundColumn DataField="Subject" HeaderText="Subject" UniqueName="Subject"
                        FilterControlAltText="Filter Subject column">
                        <HeaderStyle Width="600px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Author" HeaderText="Author" UniqueName="Author"
                        FilterControlAltText="Filter Author column">
                        <HeaderStyle Width="50px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="DateCreated" HeaderText="DateCreated" UniqueName="DateCreated"
                        Display="False" FilterControlAltText="Filter DateCreated column">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ExpirationDate" HeaderText="Expiration Date"
                        UniqueName="ExpirationDate" FilterControlAltText="Filter ExpirationDate column">
                    </telerik:GridBoundColumn>
                    <telerik:GridButtonColumn ConfirmText="Delete this user?" ConfirmDialogType="RadWindow"
                        ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
                        UniqueName="DeleteColumn" FilterControlAltText="Filter DeleteColumn column" ImageUrl="~/images/Delete.bmp">
                         <HeaderStyle Width="30px" />
                    </telerik:GridButtonColumn>
                </Columns>
                <EditFormSettings EditFormType="WebUserControl" UserControlName="FAQEditor.ascx"
                    PopUpSettings-Modal="true" PopUpSettings-Width="900" InsertCaption="Add New FAQ"
                    CaptionFormatString="Edit FAQ">
                    <EditColumn UniqueName="EditCommandColumn1">
                    </EditColumn>
                </EditFormSettings>
                <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                </ExpandCollapseColumn>
                <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                </RowIndicatorColumn>
                <CommandItemSettings ExportToPdfText="Export to Pdf" AddNewRecordText="Add New FAQ" />
            </MasterTableView>
            <FilterMenu EnableImageSprites="False">
            </FilterMenu>
            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
            </HeaderContextMenu>

        </telerik:RadGrid>
    </asp:Panel>
</asp:Content>

Attached sceenshots and code above.

If i remove Grid Client Settings. Popup Box shows correctly but i can't adjust scroll for my grid and grid grouping option.

Let me know what I am doing wrong.

Thanks,

[Maria Ilieva]

Hi Neha,

I'm not able to found any client setting in the provided Grid declaration. Could you please let me know what the Client settings you are trying to apply are and which forces the problematic behavior? 

Kind regards,
Maria Ilieva
the Telerik team

[Neha]

<ClientSettings AllowRowsDragDrop="True">
              <ClientEvents OnPopUpShowing="PopUpShowing" />
              <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="510px"/>
              <Selecting AllowRowSelect="True" EnableDragToSelectRows="False" />
          </ClientSettings>

Hi Maria,

 I applied above client settings PopUp edit box appear like FAQPopUpIssue.JPG. I also noticed if i removed <GroupByExpressions>. It works fine. So I suspect <GroupByExpressions> setting. 

Let me know if i need to change anything in this. 

Neha.

[Maria Ilieva]

Hello Neha,

The provided client-side settings does look correct to me and I'm not able to isolate obvious reason for the describe behavior in the provided code. Could you please open a regular support ticket and send us sample runnable application which demonstrates the problem. Thus we will be able to test it locally and advise you further.

Greetings,
Maria Ilieva
the Telerik team