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

Keep Pop UP EditForm within screen Boundary

4 Answers 127 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Prava kafle
Top achievements
Rank 1
Prava kafle asked on 20 Jan 2012, 11:01 PM
Hi,

How can I keep PopUp editForm within screen Boundary?

Thanks,
Prava

4 Answers, 1 is accepted

Sort by
0
Kaushal
Top achievements
Rank 1
answered on 21 Jan 2012, 08:15 AM
Hi Prava kafle,

You can do this as per below code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <style type="text/css">
 
html
{
    overflow:auto;
}
 
html,
body,
 
#<%= RadGrid1PanelClientID %>
{
    margin:0;
    height:100%;
}
 
.p{margin:0;padding:20px;font:12px/1.8 verdana,sans-serif}
 
</style>
    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
        <script type="text/javascript">
            function ShowEditForm(id, rowIndex) {
                var grid = $find("<%= RadGrid1.ClientID %>");
 
                var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
                grid.get_masterTableView().selectItem(rowControl, true);
 
                window.radopen("Default.aspx?EmployeeID=" + id, "UserListDialog");
                return false;
            }
            function ShowInsertForm() {
                window.radopen("Default.aspx", "UserListDialog");
                return false;
            }
            function refreshGrid(arg) {
                if (!arg) {
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
                }
                else {
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RebindAndNavigate");
                }
            }
            function RowDblClick(sender, eventArgs) {
                window.radopen("Default.aspx?EmployeeID=" + eventArgs.getDataKeyValue("DepartmentID"), "UserListDialog");
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile="~/App_Data/XML/XmlDataSourceExampleTemp.xml">
    </asp:XmlDataSource>
    <telerik:RadGrid ID="RadGrid1" Skin="Vista" runat="server"
        AllowPaging="True" DataSourceID="XmlDataSource2" AllowSorting="true" EnableEmbeddedBaseStylesheet="true"
        EnableEmbeddedSkins="true" EnableTheming="true" AutoGenerateColumns="false">
        <MasterTableView CommandItemDisplay="Top" DataKeyNames="DepartmentID">
            <Columns>
                <telerik:GridTemplateColumn UniqueName="TemplateEditColumn">
                    <ItemTemplate>
                        <asp:HyperLink ID="EditLink" runat="server" Text="Edit"></asp:HyperLink>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="Name" HeaderText="Name" SortExpression="Name"
                    UniqueName="Name">
                </telerik:GridBoundColumn>
            </Columns>
            <CommandItemTemplate>
                <a href="#" onclick="return ShowInsertForm();">Add New Record</a>
            </CommandItemTemplate>
        </MasterTableView>
    </telerik:RadGrid>
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
        <Windows>
            <telerik:RadWindow ID="UserListDialog" runat="server" Title="Editing record" Height="320px"
                Width="310px" Left="150px" ReloadOnShow="true" ShowContentDuringLoad="false"
                KeepInScreenBounds="true" RestrictionZoneID="RadGrid1" Modal="true" />
        </Windows>
    </telerik:RadWindowManager>
    </form>
</body>
</html>

Hope this may helps you.

Thanks & Regards,

Kaushal Jani
0
Prava kafle
Top achievements
Rank 1
answered on 23 Jan 2012, 03:22 PM
Hi Kaushal,

Thank you very much for your quick response.  However, I am not using  Radwindow to display  edit/insert  templates. I am using   RadGrid.MasterTableView.EditFormSettings.PopUpSettings to display pop up form and I woul;d like to keep this within screen boundary.

Thanks,
Prava
0
Prava kafle
Top achievements
Rank 1
answered on 12 Feb 2013, 02:01 AM
Hi,
Has there been any progress on this issue,. I see exact same behaviour on this  demo site.
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/popupeditform/defaultcs.aspx

Open pop up edit form, move  vertically outside browser, when its outside browser, you cannot close it/ move it back to screen boundary
.

Thanks,
Prava
0
Eyup
Telerik team
answered on 14 Feb 2013, 03:00 PM
Hello Prava,

Currently, RadGrid does not provide a screen boundary detection for the edit mode pop-up. You will need to implement it using your custom logic according to your specific requirements. You can use the following event to access the client object of the pop-up:
http://www.telerik.com/help/aspnet-ajax/grid-center-popup-edit-form.html

I hope this helps.

All the best,
Eyup
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Prava kafle
Top achievements
Rank 1
Answers by
Kaushal
Top achievements
Rank 1
Prava kafle
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or