This is a migrated thread and some comments may be shown as answers.

Strange behaviours of insert forms in different browsers

8 Answers 116 Views
Grid
This is a migrated thread and some comments may be shown as answers.
saravanan k
Top achievements
Rank 1
saravanan k asked on 23 Apr 2010, 06:42 AM
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

8 Answers, 1 is accepted

Sort by
0
Pavel
Telerik team
answered on 28 Apr 2010, 03:22 PM
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.
0
saravanan k
Top achievements
Rank 1
answered on 29 Apr 2010, 05:45 PM
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
0
Pavel
Telerik team
answered on 03 May 2010, 08:00 AM
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.
0
saravanan k
Top achievements
Rank 1
answered on 10 May 2010, 11:52 AM
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
0
saravanan k
Top achievements
Rank 1
answered on 08 Jun 2010, 01:45 PM
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
0
Pavel
Telerik team
answered on 10 Jun 2010, 08:49 AM
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.
0
saravanan k
Top achievements
Rank 1
answered on 23 Jun 2010, 11:42 AM
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.






0
Pavel
Telerik team
answered on 28 Jun 2010, 07:59 AM
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
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
Tags
Grid
Asked by
saravanan k
Top achievements
Rank 1
Answers by
Pavel
Telerik team
saravanan k
Top achievements
Rank 1
Share this question
or