Strange behaviours of insert forms in different browsers

[saravanan k]

Hi All,

    I am using a radgird with static headers, modal popup edit mode and different userccontrols for insert and edit. Things are perfectly working in IE 8. But i am facing lot of strange issues when accessed in ie 6 and firefox 3.5 and above,

In IE 6,

1.  The popup is not coming below the modal background and the page is unusable.

In Mozilla Firefox 3.5.2,

1.  The popup for edit mode works fine while using only the buttons with commandnames. (1 edit commandname button and 1 cancel commandname button). But when i close the popup using the close button in the top, and try to click the edit or Add buttons of the grid the popup is not appearing again.
2. The popup for insert mode is even worser, it appears only for the first time, validations are working, but the insert commanname button and the cancel commandname buttons are not working.

I didnt tried in safari and other browsers. Please help me since it is an important requirement to make the application to be compatible with all these browsers.

Find below the code in item_command handler.

protected void grid1_ItemCommand(object source, Telerik.Web.UI.GridCommandEventArgs e)
        {
            if (e.CommandName == RadGrid.EditCommandName)
            {
                //Edit mode
                e.Item.OwnerTableView.EditFormSettings.UserControlName = "ModifyControl.ascx";

                e.Item.OwnerTableView.EditFormSettings.PopUpSettings.Height = System.Web.UI.WebControls.Unit.Pixel(400);
                e.Item.OwnerTableView.EditFormSettings.PopUpSettings.Width = System.Web.UI.WebControls.Unit.Pixel(400);
                e.Item.OwnerTableView.EditFormSettings.PopUpSettings.ScrollBars = System.Web.UI.WebControls.ScrollBars.Vertical;
                e.Item.OwnerTableView.EditFormSettings.PopUpSettings.Modal = true;
            }
            else if (e.CommandName == RadGrid.InitInsertCommandName)
            {
                //Insert mode
                e.Item.OwnerTableView.EditFormSettings.UserControlName = "AddControl.ascx";

                e.Item.OwnerTableView.EditFormSettings.PopUpSettings.Height = System.Web.UI.WebControls.Unit.Pixel(400);
                e.Item.OwnerTableView.EditFormSettings.PopUpSettings.Width = System.Web.UI.WebControls.Unit.Pixel(400);
                e.Item.OwnerTableView.EditFormSettings.PopUpSettings.ScrollBars = System.Web.UI.WebControls.ScrollBars.Vertical;
                e.Item.OwnerTableView.EditFormSettings.PopUpSettings.Modal = true;
            }
        }

Find below the code of grid.

<telerik:RadGrid ID="grid1" runat="server" AllowFilteringByColumn="True"
                AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" GridLines="None"
                OnNeedDataSource="grid1_NeedDataSource" Skin="Office2007" OnItemCommand="grid1_ItemCommand"
                OnInsertCommand="grid1_InsertCommand" EnableLinqExpressions="False"
                OnDeleteCommand="grid1_DeleteCommand" OnUpdateCommand="grid1_UpdateCommand" PagerStyle-AlwaysVisible="true">
                <MasterTableView CommandItemDisplay="Top" EditMode="PopUp">
                    <RowIndicatorColumn>
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn>
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderText="Edit" UniqueName="colEdit">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="10%" />
                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        </telerik:GridEditCommandColumn>
                        <telerik:GridBoundColumn DataField="field1" HeaderText="Field1" UniqueName="col1">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="Field2" UniqueName="col2" DataField="Field2">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Field3" HeaderText="Field3" UniqueName="col3"
                            Visible="False">
                        </telerik:GridBoundColumn>
                        <telerik:GridButtonColumn ButtonType="ImageButton" HeaderText="Remove" ImageUrl="~/Images/cancel.gif"
                            UniqueName="colDelete" CommandName="Delete">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="12%" />
                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        </telerik:GridButtonColumn>
                    </Columns>
                    <EditFormSettings CaptionFormatString="Edit" InsertCaption="Add"
                        EditFormType="WebUserControl">
                        <EditColumn UniqueName="EditCommandColumn" ButtonType="ImageButton" ItemStyle-HorizontalAlign="Right">
                            <ItemStyle HorizontalAlign="Right" />
                        </EditColumn>
                    </EditFormSettings>
                </MasterTableView>
                <ClientSettings>
                    <ClientEvents OnPopUpShowing="PopUpCentered" />
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                </ClientSettings>
            </telerik:RadGrid>

Find below the script i have used to center the popup screen,

<script type="text/javascript">
        function PopUpCentered(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 = (typeof window.innerWidth != 'undefined' ? window.innerWidth : document.body.offsetWidth); ;
            //alert(windowHeight + "##" + windowWidth);
            //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>

I am not sure which is causing this problem. Please help.

Regards,
Saravanan K

[Pavel]

Hi Saravanan,

The behavior in IE6 is caused by this line in your script:

popUp.style.position = "fixed";

If you remove it, the popup appears as expected.

As for the other problems i cannot reproduce them at all. I am attaching a simple sample which is working with the specified version of Firefox. Try it out and let me know what you think.

Sincerely yours,
Pavel
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[saravanan k]

hi Pavel,

Thanks a lot for the solution. It solved the problem with IE 6.

But, if we use the grid with rad ajax loading panel, or even inside asp update panel the problems mentioned in the first post crops up in firefox, safari. i removed them temporarily , but  the entire page  refreshes even if u click a sorting functionality of the grid.  

Can u help me in sorting out this problem. Please find the code of rad ajax loading panel i used.

<telerik:RadAjaxLoadingPanel ID="someLoadingPanel" runat="server" Skin="Default">
            Loading...
        </telerik:RadAjaxLoadingPanel>
       <telerik:RadAjaxManager ID="ajaxManager" runat="server" DefaultLoadingPanelID="someLoadingPanel">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="gridM">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="gridM" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

Thanks
Saravanan

[Pavel]

Hello Saravanan,

I still cannot reproduce the problems under Firefox after adding a RadAjaxManager to the page and ajaxifying the Grid. Can you confirm you can replicate the issue with the previously sent sample just by adding a AjaxSettings for the Grid?

Greetings,
Pavel
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[saravanan k]

Hi Pavel,

               Thanks for the help. The issue is due to an open div tag in the master page. Though this seems a silly mistake, it took lot of effort to find out the problem.

Hope it will help a few who face these kind of strange issues.

Regards,
Saravanan K

[saravanan k]

Hi,

        I am having one more problem. I use the same script as above to center the popup. It works well in all browsers, but not ie7. The problem is in these lines,

var windowHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
var windowWidth = (typeof window.innerWidth != 'undefined' ? window.innerWidth : document.body.offsetWidth);

ie 7 is not returning the heights properly. I tried changing them to document.documentElement.offsetHeight. I am able to center the popup but in the page the grid is displayed out of the footer.

Please help me with the right snippet for all browsers.

Regards,
Saravanan K

[Pavel]

Hello Saravanan,

The sample attached previously seems to be working with document.documentElement.offsetHeight in all browsers. Could you let me know how to alter it in order to reproduce your problem?

All the best,
Pavel
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[saravanan k]

Hi Pavel,

           Thanks for ur replies. I will explain the scenario,
         
1) I am using a radgrid with static headers and modal popup edit forms.

<telerik:RadGrid ID="grid" runat="server" AllowFilteringByColumn="True" AllowPaging="True"
                AllowSorting="True" AutoGenerateColumns="False" GridLines="None" EnableLinqExpressions="False"
                Skin="Office2007"
                PagerStyle-AlwaysVisible="true">
                <pagerstyle alwaysvisible="True"></pagerstyle>
                <groupingsettings casesensitive="false" />
                <mastertableview commanditemdisplay="Top" editmode="PopUp">
                    <RowIndicatorColumn>
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn>
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <Columns>

                    </Columns>
                    <EditFormSettings CaptionFormatString="Edit Employee" EditFormType="WebUserControl" InsertCaption="Add New Employee">
                        <EditColumn UniqueName="EditCommandColumn" ButtonType="ImageButton" ItemStyle-HorizontalAlign="Right">
                            <ItemStyle HorizontalAlign="Right" />
                        </EditColumn>
                    </EditFormSettings>
                </mastertableview>
                <clientsettings>
                    <ClientEvents OnPopUpShowing="PopUpCentered" />
                    <ClientEvents OnFilterMenuShowing="filterMenuShowing" />
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                </clientsettings>
                <filtermenu onclientshown="MenuShowing" />
            </telerik:RadGrid>

I am using a javascript to center the popup edit forms,

<script type="text/javascript">

function PopUpCentered(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 = (typeof window.innerWidth != 'undefined' ? window.innerWidth : document.body.offsetWidth); ;

popUp.style.left = (Math.floor((windowWidth - popUppopUpWidth) / 2)).toString() + "px";

popUp.style.top = (Math.floor((windowHeight - popUppopUpHeight) / 2)).toString() + "px";

}

</script>

and I have used Rad Ajax manager to ajaxify the grid,

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

Loading...

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="grid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grid" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

My problem is occurring only in IE 7 that too only while accessing the page after publishing in IIS. The problem is when the modal popup appears the page footer is misaligned. (comes immediately next to the header) and the controls in the page is rendered outside the content place holder. Please refer to the attached screen shots. Due to this misalignement my popup center scripts gives undesirable results (scr3.jpg).

i tried in ie6, ie8, firefox 3.5, safari. I dont observe this in any other browser except ie 7.
Please help.

[Pavel]

Hi Saravanan,

Please modify the previously attached sample so that the problem becomes evident with it as well. This will allow me to investigate it and advise you accordingly.

Best wishes,
Pavel
the Telerik team