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

Keep Pop UP EditForm within screen Boundary

4 Answers 177 Views

Grid

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

4 Answers, 1 is accepted

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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.