ورود / ثبت نام
0
0

ایجاد PopupBox در کنترل های Telerik

281 بازدید
PopupBox

PopupBox

در این مقاله نشان می دهیم که چگونه یک popupBox در کنترل های Telerik ایجاد نمایید. تمامی کد های موردنیازتان را میتوانید در ادامه ی مطلب ببینید. با من همراه باشید …

PopupBox

در ادامه برخی از مراحل ایجاد popupBox در کنترل telerik نشان داده شده است:

PopupBox

فایل 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);  
}

موفق باشید !

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=18199
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
فاطمه زکایی
فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد ایجاد PopupBox در کنترل های Telerik

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.