Post
Ask Question

Create A Popup Box In Telerik Controls

Here are some steps to create a popup box in Telerik Controls.

Telerik

CSS

  1. <styletype="text/css">  
  2. .Main  
  3. {  
  4.     width: 100%;  
  5. }  
  6.   
  7. .HeadTitle   
  8. {  
  9.     width: 100%;  
  10.     height: 40px;  
  11.     font-family: Arial, Helvetica, sans-serif;  
  12.     font-size: 16px;  
  13.     font-weight: normal;  
  14.     font-style: normal;  
  15.     font-variant: normal;  
  16.     text-transform: capitalize;  
  17.     color: #333333;  
  18.     margin: 0pxauto;  
  19.     padding: 5px;  
  20. }  
  21.   
  22. .TitleColor   
  23. {  
  24.     width: 100%;  
  25.     height: 32px;  
  26.     background-color: #006699;  
  27.     font-family: Arial, Helvetica, sans-serif;  
  28.     font-size: 14px;  
  29.     font-weight: bold;  
  30.     font-style: normal;  
  31.     font-variant: normal;  
  32.     text-transform: capitalize;  
  33.     color: #FFFFFF;  
  34.     padding: 5px;  
  35. }  
  36.   
  37. .Clear   
  38. {  
  39.     clear: both;  
  40. }  
  41.   
  42. .ControlDesign   
  43. {  
  44.     width: 100%;  
  45.     height: auto;  
  46.     padding: 5px;  
  47. }  
  48.   
  49. .auto-style1   
  50. {  
  51.     height: 25px;  
  52. }  
  53.   
  54. .auto-style2   
  55. {  
  56.     width: 137px;  
  57. }  
  58.   
  59. .auto-style3   
  60. {  
  61.     width: 4px;  
  62. }  
  63.   
  64. .auto-style4   
  65. {  
  66.     height: 25px;  
  67.     width: 170px;  
  68. }  
  69.   
  70. .auto-style5  
  71. {  
  72.     width: 170px;  
  73. }  
  74.   
  75. .auto-style6   
  76. {  
  77.     height: 25px;  
  78.     width: 4px;  
  79. }  
  80.   
  81. .auto-style7   
  82. {  
  83.     height: 25px;  
  84.     width: 137px;  
  85. }  
  86.   
  87. .auto-style9   
  88. {  
  89.     height: 25px;  
  90.     width: 130px;  
  91. }  
  92.   
  93. .auto-style10   
  94. {  
  95.     width: 130px;  
  96. }  
  97.   
  98. .auto-style11   
  99. {  
  100.     height: 25px;  
  101.     width: 33px;  
  102. }  
  103.   
  104. .auto-style12   
  105. {  
  106.     width: 33px;  
  107. }  
  108.   
  109. .auto-style13   
  110. {  
  111.     width: 4px;  
  112. }  
  113.   
  114. .auto-style14   
  115. {  
  116.     height: 25px;  
  117.     width: 4px;  
  118. }  
  119.   
  120. .auto-style15   
  121. {  
  122.     width: 3px;  
  123. }  
  124.   
  125. .auto-style16   
  126. {  
  127.     width: 207px;  
  128. }  
  129.   
  130. .auto-style17   
  131. {  
  132.     width: 449px;  
  133. }  
  134. .TopRight   
  135. {  
  136.     width: 235px;  
  137.     float: right;  
  138.     margin-bottom: 10px;  
  139. }  
  140. </style>  
Design:
  1. <telerik:RadWindowTitle="Job Line" ID="RadWindow1" runat="server" Height="500px" Width="950px">  
  2.     <ContentTemplate>  
  3.         <div class="TitleColor">  
  4.             <asp:LabelID="Label6" runat="server" Text="Job Line Details"></asp:Label>  
  5.                 </div>  
  6.                 <div class="ControlDesign">  
  7.                     <table style="width: 100%;">  
  8.                         <tr>  
  9.                             <td class="auto-style5"> </td>  
  10.                                 <td class="auto-style3"> </td>  
  11.                                     <td> </td>  
  12.                                     <td> </td>  
  13.                         </tr>  
  14.                         <tr>  
  15.                             <td class="auto-style5">Skill Group</td>  
  16.                                 <td class="auto-style3">:</td>  
  17.                                     <td>  
  18.                                         <telerik:RadDropDownListID="RadDropDownList4" runat="server" Width="200px">  
  19.                                             </telerik:RadDropDownList>  
  20.                                     </td>  
  21.                                     <td> </td>  
  22.                         </tr>  
  23.                         <tr>  
  24.                             <td class="auto-style5"> </td>  
  25.                                 <td class="auto-style3"> </td>  
  26.                                     <td> </td>  
  27.                                     <td> </td>  
  28.                         </tr>  
  29.                         <tr>  
  30.                             <tdc lass="auto-style5">Skill</td>  
  31.                                 <td class="auto-style3">:</td>  
  32.                                     <td>  
  33.                                         <telerik:RadComboBoxID="RadComboBox2" runat="server" Width="200px">  
  34.                                             </telerik:RadComboBox>  
  35.                                     </td>  
  36.                                     <td> </td>  
  37.                         </tr>  
  38.                         <tr>  
  39.                             <td class="auto-style5"> </td>  
  40.                                 <td class="auto-style3"> </td>  
  41.                                     <td> </td>  
  42.                                     <td> </td>  
  43.                         </tr>  
  44.                         </table>  
  45.                         <table style="width: 100%;">  
  46.                             <tr>  
  47.                                 <td class="auto-style5"> </td>  
  48.                                     <td> </td>  
  49.                                     <td class="auto-style16"> </td>  
  50.                                         <td> </td>  
  51.                                         <td class="btn"> </td>  
  52.                                             <td> </td>  
  53.                                             <td> </td>  
  54.                                             <td> </td>  
  55.                             </tr>  
  56.                             <tr>  
  57.                                 <td class="auto-style5">Requested Date of Hiring</td>  
  58.                                     <td>:</td>  
  59.                                     <td class="auto-style16">  
  60.                                         <telerik:RadDatePickerID="RadDatePicker4" runat="server" Width="207px">  
  61.                                             </telerik:RadDatePicker>  
  62.                                             </td>  
  63.                                             <td> </td>  
  64.                                             <tdclass="btn">No of Position</td>  
  65.                                                 <td>:</td>  
  66.                                                 <td>  
  67.                                                     <telerik:RadTextBoxID="RadTextBox10" runat="server" Width="200px">  
  68.                                                         </telerik:RadTextBox>  
  69.                                                 </td>  
  70.                                                 <td> </td>  
  71.                             </tr>  
  72.                             <tr>  
  73.                                 <td class="auto-style5"> </td>  
  74.                                     <td> </td>  
  75.                                     <td class="auto-style16"> </td>  
  76.                                         <td> </td>  
  77.                                         <td class="btn"> </td>  
  78.                                             <td> </td>  
  79.                                             <td> </td>  
  80.                                             <td> </td>  
  81.                             </tr>  
  82.                             <tr>  
  83.                                 <td class="auto-style5">Notes</td>  
  84.                                     <td>:</td>  
  85.                                     <td colspan="5">  
  86.                                         <telerik:RadTextBoxID="RadTextBox11" runat="server" Width="540px" Height="50px" TextMode="MultiLine">  
  87.                                             </telerik:RadTextBox>  
  88.                                             </td>  
  89.                                             <td> </td>  
  90.                             </tr>  
  91.                             <tr>  
  92.                                 <td class="auto-style5"> </td>  
  93.                                     <td> </td>  
  94.                                     <td class="auto-style16"> </td>  
  95.                                         <td> </td>  
  96.                                         <td class="btn"> </td>  
  97.                                             <td> </td>  
  98.                                             <td> </td>  
  99.                                             <td> </td>  
  100.                             </tr>  
  101.                             <tr>  
  102.                                 <td class="auto-style5">Comments</td>  
  103.                                     <td>:</td>  
  104.                                     <td colspan="5">  
  105.                                         <telerik:RadTextBoxID="RadTextBox12" runat="server" Width="540px" Height="50px" TextMode="MultiLine">  
  106.                                             </telerik:RadTextBox>  
  107.                                             </td>  
  108.                                             <td> </td>  
  109.                             </tr>  
  110.                             <tr>  
  111.                                 <td class="auto-style5"> </td>  
  112.                                     <td> </td>  
  113.                                     <tdcolspan="5"> </td>  
  114.                                         <td> </td>  
  115.                             </tr>  
  116.                             <tr>  
  117.                                 <td class="auto-style5"> </td>  
  118.                                     <td> </td>  
  119.                                     <td colspan="5">  
  120.                                         <telerik:RadButtonID="BtnCancel" runat="server" Text="Cancel" Width="100px">  
  121.                                             </telerik:RadButton>  
  122.                                             <telerik:RadButtonID="BtnReset" runat="server" Text="Reset" Width="100px">  
  123.                                                 </telerik:RadButton>  
  124.                                                 <telerik:RadButtonID="BtnSave" runat="server" BackColor="#0066FF" Text="Save" Width="100px">  
  125.                                                     </telerik:RadButton>  
  126.                                                     </td>  
  127.                                                     <td> </td>  
  128.                             </tr>  
  129.                             <tr>  
  130.                                 <td class="auto-style5"> </td>  
  131.                                     <td> </td>  
  132.                                     <td colspan="5"> </td>  
  133.                                         <td> </td>  
  134.                             </tr>  
  135.                             <tr>  
  136.                                 <td class="auto-style5"> </td>  
  137.                                     <td> </td>  
  138.                                     <td colspan="5"> </td>  
  139.                                         <td> </td>  
  140.                             </tr>  
  141.                             </table>  
  142.                             </div>  
  143.     </ContentTemplate>  
  144.     </telerik:RadWindow>  
At the Button Click
  1. protected void BtnAddJobLine_Click(object sender, EventArgs e)  
  2. {  
  3.     string script = "function f(){$find(\"" + RadWindow1.ClientID + "\").show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";  
  4.     ScriptManager.RegisterStartupScript(this, this.GetType(), "key", script, true);  
  5. }  
  6.   
  7. protected void BtnCancel_Click(object sender, EventArgs e)   
  8. {  
  9.     string script = "function f(){$find(\"" + RadWindow1.ClientID + "\").close(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";  
  10.     ScriptManager.RegisterStartupScript(this, this.GetType(), "key", script, true);  
  11. } 
Next Recommended Reading How To Close Popup Window And Redirect To Parent Window