Create A Popup Box In Telerik Controls

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

Telerik

CSS

<styletype="text/css">
.Main
{
width: 100%;
}
.HeadTitle
{
width: 100%;
height: 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
color: #333333;
margin: 0pxauto;
padding: 5px;
}
.TitleColor
{
width: 100%;
height: 32px;
background-color: #006699;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
color: #FFFFFF;
padding: 5px;
}
.Clear
{
clear: both;
}
.ControlDesign
{
width: 100%;
height: auto;
padding: 5px;
}
.auto-style1
{
height: 25px;
}
.auto-style2
{
width: 137px;
}
.auto-style3
{
width: 4px;
}
.auto-style4
{
height: 25px;
width: 170px;
}
.auto-style5
{
width: 170px;
}
.auto-style6
{
height: 25px;
width: 4px;
}
.auto-style7
{
height: 25px;
width: 137px;
}
.auto-style9
{
height: 25px;
width: 130px;
}
.auto-style10
{
width: 130px;
}
.auto-style11
{
height: 25px;
width: 33px;
}
.auto-style12
{
width: 33px;
}
.auto-style13
{
width: 4px;
}
.auto-style14
{
height: 25px;
width: 4px;
}
.auto-style15
{
width: 3px;
}
.auto-style16
{
width: 207px;
}
.auto-style17
{
width: 449px;
}
.TopRight
{
width: 235px;
float: right;
margin-bottom: 10px;
}
</style>

Design:

<telerik:RadWindowTitle="Job Line" ID="RadWindow1" runat="server" Height="500px" Width="950px">
<ContentTemplate>
<div class="TitleColor">
<asp:LabelID="Label6" runat="server" Text="Job Line Details"></asp:Label>
</div>
<div class="ControlDesign">
<table style="width: 100%;">
<tr>
<td class="auto-style5"> </td>
<td class="auto-style3"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style5">Skill Group</td>
<td class="auto-style3">:</td>
<td>
<telerik:RadDropDownListID="RadDropDownList4" runat="server" Width="200px">
</telerik:RadDropDownList>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style5"> </td>
<td class="auto-style3"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<tdc lass="auto-style5">Skill</td>
<td class="auto-style3">:</td>
<td>
<telerik:RadComboBoxID="RadComboBox2" runat="server" Width="200px">
</telerik:RadComboBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style5"> </td>
<td class="auto-style3"> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td class="auto-style5"> </td>
<td> </td>
<td class="auto-style16"> </td>
<td> </td>
<td class="btn"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style5">Requested Date of Hiring</td>
<td>:</td>
<td class="auto-style16">
<telerik:RadDatePickerID="RadDatePicker4" runat="server" Width="207px">
</telerik:RadDatePicker>
</td>
<td> </td>
<tdclass="btn">No of Position</td>
<td>:</td>
<td>
<telerik:RadTextBoxID="RadTextBox10" runat="server" Width="200px">
</telerik:RadTextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style5"> </td>
<td> </td>
<td class="auto-style16"> </td>
<td> </td>
<td class="btn"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style5">Notes</td>
<td>:</td>
<td colspan="5">
<telerik:RadTextBoxID="RadTextBox11" runat="server" Width="540px" Height="50px" TextMode="MultiLine">
</telerik:RadTextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style5"> </td>
<td> </td>
<td class="auto-style16"> </td>
<td> </td>
<td class="btn"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style5">Comments</td>
<td>:</td>
<td colspan="5">
<telerik:RadTextBoxID="RadTextBox12" runat="server" Width="540px" Height="50px" TextMode="MultiLine">
</telerik:RadTextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style5"> </td>
<td> </td>
<tdcolspan="5"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style5"> </td>
<td> </td>
<td colspan="5">
<telerik:RadButtonID="BtnCancel" runat="server" Text="Cancel" Width="100px">
</telerik:RadButton>
<telerik:RadButtonID="BtnReset" runat="server" Text="Reset" Width="100px">
</telerik:RadButton>
<telerik:RadButtonID="BtnSave" runat="server" BackColor="#0066FF" Text="Save" Width="100px">
</telerik:RadButton>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style5"> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style5"> </td>
<td> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
</table>
</div>
</ContentTemplate>
</telerik:RadWindow>

At the Button Click

protected void BtnAddJobLine_Click(object sender, EventArgs e)
{
string script = "function f(){$find(\"" + RadWindow1.ClientID + "\").show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
ScriptManager.RegisterStartupScript(this, this.GetType(), "key", script, true);
}
protected void BtnCancel_Click(object sender, EventArgs e)
{
string script = "function f(){$find(\"" + RadWindow1.ClientID + "\").close(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
ScriptManager.RegisterStartupScript(this, this.GetType(), "key", script, true);
}