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.

11 comments:

  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
  2. Looking for English to Spanish Translators? We provide professional Translation Services at highly competitive rates without compromising the quality.
    translation services spanish to english

    ReplyDelete
  3. we are best calgary roofing companies & Best roofing contractors calgary. Contact us for transparent quotes. roofing calgary & roofing services calgary Roofing Company in Calgary

    ReplyDelete
  4. We are serving as the best SEO expert in India in the online community from a decade and trust and reputation we received from our past and current clients will maintain our moto best SEO Expert In India.

    ReplyDelete
  5. Despite the fact that Adderall is viewed as a physician recommended tranquilize and most patients
    buy adderall online,Buy Adderall Uk & USA on the web or purchase Adderall 30mg from an online drug store, a few patients will in general get dependent on the medication.can you buy adderal online? When it comes to buying fine research chemicals online, quality is the key. buychemstore research chemicals for sale ,LSD for sale,constantly strives at providing you with the continuing evaluation, innovation . We assure you the highest degree of confidence in all of our products not limited to but including cocaine for sale, LSD for sale, heroin for sale, pain medications for sale etc. Here at buychemstore, we pride ourselves on safety.
    buy research chemicals online
    We are a one-stop-shop for the purchase of anabolic steroids.what is anabolic steroids, We are here to make sure you don’t bother about where to buy anabolic steroids from craigslist, eBay, or any other online forums. We are in contract with a large network of pharmacies in North America, Europe and Asia. With our years of experience in the distribution of anabolic-androgenic steroids, we provide top quality services to our clients that cannot be matched by our competitors.This is te best place to Buy legal steroids online, anabolic steroids for sale
    buy Apetamin vitamin syrup that’s marketed as a weight gain supplement. It was developed by TIL Healthcare PVT, a pharmaceutical company based in India.According to manufacturing labels, 1 teaspoon (5 ml) of Apetamin syrup contains.Apetamin in store,where to buy Apetamin,Is Apetamin syrup Effective in weight gain,buy Apetamin syrup online
    Welcom to our vyvanse online shop where you can buy vyvanse online,Buy vyvanse Uk & USA,learn about vyvanse side effects and have
    vyvanse coupon,vyvanse for sale.
    Buy atorvastatin, sold under the trade name Lipitor among others, is a statin medication used to prevent cardiovascular disease in those at high risk and treat abnormal lipid levels. For the prevention of cardiovascular disease, statins are a first-line treatment. It is taken by mouth.Learn How to use Lipitor, you are free to read about atorvastatin side effects,Buy lipitor UK ,atorvastatin side effects ,
    lipitor for sale. You can also buy juul

    ReplyDelete
  6. dank vapes are the best brand of vape cartridges in the market. These dank vapes cartridges have however suffered a backlash in the recent weeks with multiple reports on how these dank vapes carts cause cancer and other related lung disease.
    dank vapes cart however remain one of the best cartridges. dank vapes are sold in multiple states over the USA. dank vapes cart compost one of the black markets finest vape products. But this backlash has caused a fall in the consumption of the vape by adults.The 710 Kingpen brand is also on the rise in market demands as well as skywalker OG products.
    Recently juul pods also faced a similar backlash. juul starter kits have also fallen in market demand. mango juul pods are refillable juul pods and can be gotten as juul pods bulk. juul skins and juul accessories all come with the juul kits.
    buy juul online at cheap prices buy cocaine online
    buy Keytruda online and other cancer medications such as buy avastin online , buy Herceptin online

    ReplyDelete
  7. dank vapes are the best brand of vape cartridges in the market. These dank vapes cartridges have however suffered a backlash in the recent weeks with multiple reports on how these dank vapes carts cause cancer and other related lung disease.
    dank vapes cart however remain one of the best cartridges. dank vapes are sold in multiple states over the USA. dank vapes cart compost one of the black markets finest vape products. But this backlash has caused a fall in the consumption of the vape by adults.The 710 Kingpen brand is also on the rise in market demands as well as skywalker OG products.
    Recently juul pods also faced a similar backlash. juul starter kits have also fallen in market demand. mango juul pods are refillable juul pods and can be gotten as juul pods bulk. juul skins and juul accessories all come with the juul kits.
    buy juul online at cheap prices buy cocaine online
    buy Keytruda online and other cancer medications such as buy avastin online , buy Herceptin online

    ReplyDelete