در این مقاله نشان می دهیم که چگونه یک popupBox در کنترل های Telerik ایجاد نمایید. تمامی کد های موردنیازتان را میتوانید در ادامه ی مطلب ببینید. با من همراه باشید …
PopupBox
در ادامه برخی از مراحل ایجاد popupBox در کنترل 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>[divider style=”solid” top=”20″ bottom=”20″]
پیشنهاد میکنم : دانلود کتاب فارسی اموزش کار با کامپوننت Telerik Reporting
[divider style=”solid” top=”20″ bottom=”20″]طراحی:
<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>
در رویداد کلیک دکمه:
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); }
موفق باشید !
هیچ دیدگاهی نوشته نشده است.