Wednesday, March 12, 2014

How to pop up the whole page using Telerik RadWindow

When we use the single page pattern, we have to use Modal Dialog or popup to accept the user input or to display the context information. Here I use the Telerik RadWindow to pop up the whole .aspx page as Modal Dialog Box. RadWindow is a part of the Telerik UI for ASP.NET AJAX suite. It is a container that can display content from the same page (when used as controls container) or it can display a content page, different from the parent one. In the second case, the control uses an IFRAME and behaves like one. This post is related with the second solution.I used the Telerik trial version here and added "Telerik.Web.UI.dll" to my project solution as References.
Dialog box using Telerik RadWindow
First, we need to add the following httpHandler for RadScriptManager to operate properly to web.config as below:
<system.web>        
    ----
    <httpHandlers>   
        ---
        <add path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource, Telerik.Web.UI" validate="false" />        
    </httpHandlers>    
</system.web> 
Second, we create "TelerikWindow.aspx" page and add the following code to <head> tage:
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        function openWindow(url) {
            var manager = $find('<%= RadWindowManager1.ClientID %>');
            manager.open(url);
            return false;
        }
        function refreshPage(arg) {
            var ajax = $find('<%= RadAjaxManager.GetCurrent(Page).ClientID %>');
            ajax.ajaxRequest(arg);
        }
    </script> 
</telerik:RadScriptBlock>
Next, add the following code snippet to <form> tage as shown below:
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <table>
                <tr>
                    <td>
                        <b>Customer ID:</b>
                    </td>
                    <td>
                        <asp:Label runat="server" ID="lblCustomerID" Text="C00001" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Company Name:</b>
                    </td>
                    <td>
                        <asp:Label runat="server" ID="lblCompanyName" Text="Eastern Connection" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Contact Name:</b>
                    </td>
                    <td>
                        <asp:Label runat="server" ID="lblContactName" Text="Ann Devon" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Country:</b>
                    </td>
                    <td>
                        <asp:Label runat="server" ID="lblCountry" Text="Germany" />
                    </td>
                </tr>
            </table>
            <asp:Button runat="server" ID="btnEditText" Text="Edit text" onclick="btnEditText_Click" />
        </ContentTemplate>
     </asp:UpdatePanel>
</div>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Modal="true" ReloadOnShow="true" Width="400px"
    Height="300px" Behaviors="Close, Move">
</telerik:RadWindowManager>
</form> 
In code-behind, add the namespace "Telerik.Web.UI" and replace with the following code :
protected void Page_Load(object sender, EventArgs e)
{
    AjaxRequest();
}
private void AjaxRequest()
{
    RadAjaxManager manager = RadAjaxManager.GetCurrent(this.Page);
    manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(TheRadAjaxManager_AjaxRequest);
}
protected void TheRadAjaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    if (e.Argument.ToLower() == "popupclose")
    {
        lblCompanyName.Text = Session["CompanyName"].ToString();
        lblContactName.Text = Session["ContactName"].ToString();
        lblCountry.Text = Session["Country"].ToString();
        UpdatePanel1.Update();
    }
}
protected void btnEditText_Click(object sender, EventArgs e)
{
    Session["CustomerID"] = lblCustomerID.Text;
    Session["CompanyName"] = lblCompanyName.Text;
    Session["ContactName"] = lblContactName.Text;
    Session["Country"] = lblCountry.Text;

    string scriptStr = "openWindow('RadPopup.aspx');";
    ScriptManager.RegisterStartupScript(Page, GetType(), "popup", scriptStr, true);
}
Third, web create "RadPopup.aspx" and copy the following snippet to <head> tag as below:
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        function GetRadWindow() {
            var rWindow = null;
            if (window.radWindow)
                rWindow = window.radWindow;
            else if (window.frameElement.radWindow)
                rWindow = window.frameElement.radWindow; 
            return rWindow;
        }
        function Close() {
            GetRadWindow().Close();

        }
        function CloseAndRebind(args) {
            var win = GetRadWindow();
            win.BrowserWindow.refreshPage(args);
            win.Close();
        }
    </script> 
</telerik:RadScriptBlock>
Add the following code to <form> tag :
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"  EnablePageMethods="true">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>
     <asp:UpdatePanel runat="server" ID="ModalPanel1" RenderMode="Inline" UpdateMode="Conditional">
        <ContentTemplate>
            <table>
                <tr>
                    <td>
                        <b>Customer ID:</b>
                    </td>
                    <td>
                        <asp:Label runat="server" ID="editCustomerID" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Company Name:</b>
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="editTxtCompanyName" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Contact Name:</b>
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="editTxtContactName" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Country:</b>
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="editTxtCountry" />
                    </td>
                </tr>
            </table>
            <hr />
            <asp:Button ID="btnApply" runat="server" Text="Apply" OnClick="btnApply_Click" />
            <asp:Button ID="editBox_OK" runat="server" Text="OK" OnClick="editBox_OK_Click" />
            <asp:Button ID="editBox_Cancel" runat="server" Text="Cancel" OnClientClick="Close();"/>
        </ContentTemplate>
    </asp:UpdatePanel>
   </div>
</form>
In code-behind, add the namespace "Telerik.Web.UI" and replace the context with the following code snippet as below:
protected void InitDialog()
{
    editCustomerID.Text = Session["CustomerID"].ToString();
    editTxtCompanyName.Text = Session["CompanyName"].ToString();
    editTxtContactName.Text = Session["ContactName"].ToString();
    editTxtCountry.Text = Session["Country"].ToString(); 
    SetFocus("editTxtCompanyName");
}
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        InitDialog();
    }
}
protected void btnApply_Click(object sender, EventArgs e)
{
    if (editTxtCountry.Text == "Germany")
        editTxtCountry.Text = "Cuba";
    else
        editTxtCountry.Text = "USA";
}
protected void editBox_OK_Click(object sender, EventArgs e)
{
    // Save to the database
    // Refresh the UI
    Session["CompanyName"] = editTxtCompanyName.Text;
    Session["ContactName"] = editTxtContactName.Text;
    Session["Country"] = editTxtCountry.Text;

    ScriptManager.RegisterStartupScript(Page, GetType(), "closePopup", "CloseAndRebind('popupclose');", true);
}
Every .aspx page should have the following line directly after the page directive:
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
That's it. Whenever you click "Edit text" button, it pops up "RabPopup.asxp" page and then change the data and press "OK" button, it closes Popup page and then rebind the parent page and update the data to display.

1 comment:

  1. Trong xu thế hiện nay, nhu cầu mua sắm hàng nhập ngoài của người dân tăng cao. Kênh thương mại điện tử Amazon tại Nhật bản cũng đang được nhiều người tiêu dùng tại Việt Nam chú tâm đến. mua hàng trên amazon ship về việt nam đã và đang được rất nhiều người tiêu dùng Việt Nam sử dụng để mua những mặt hàng ở Mỹ, và Nhật.
    Hy vọng dịch vụ chuyển đồ từ nhật về việt nam sẽ mang lại nhiều sự hài lòng từ quý khách hàng.
    chuyển hàng từ nhật về hà nội nhanh chóng với hàng ở các tỉnh thàn lớn đặc biệt là Hà Nội.
    Các doanh nghiệp muốn nhập khẩu hàng hóa từ nhật bản hãy liên hệ ngay với chúng tôi để nhận được những ưu đãi tốt nhất.
    dịch vụ order hàng nhậtngày càng phát triển với những phương châm mang lại nhiều thuận lợi và tiện ích cho quý khách hàng sử dụng
    order hàng nhật uy tín đã và đang được nhiều khách hàng sử dụng

    ReplyDelete