سبد خرید (0)

آموزش ساخت DropDownList

آموزش ساخت DropDownList در Kendo UI

برخلاف فیلد های ComboBox که می توانید در آنها تایپ کنید در DropDownListها فقط می توانید یکی از آیتم های لیست کشوئی را انتخاب کند.


متد ()kendoDropDownList

با استفاده از متد ()kendoDropDownList در Kendo UI، می توانید یک DropDownList بسازید.

پیکربندی (Configuration)

نامتوضیحات
animation با استفاده از این خصوصیت می توانید، نحوه ی باز و بسته شدن پنجره ی گزینه های DropDownList را تغییر دهید. اگر آنرا با مقدار false تنظیم کنید، متحرک سازی لغو خواهد شد.

cascadeFrom با شناسه DropDownList والد تنظیم می شود.
change با نام یک تابع تنظیم می شود و زمانی که مقدار ابزار تغییر کرد صدا زده می شود.
dataSource با استفاده از این پارامتر می توانید منبع داده های DropDownList را مشخص نمایید.
dataTextField (default: "") باید با نام فیلدی که برای متن گزینه ها در dataSource درنظر گرفته ایم، تنظیم شود. (text)
dataValueField (default: "") باید با نام فیلدی که برای مقادیر گزینه ها در dataSource درنظر گرفته ایم، تنظیم شود. (value)
enable (default: true) فعال یا غیرفعال بودن ابزار را تعیین می کند.
height (default: 200) ارتفاع ابزار به پیکسل را تعیین می کند.
ignoreCase (default: true) زمان جستجو در آیتم های DropDownList، به حروف بزرگ و کوچک حساس باشد یا خیر.
index (default: 0) تنظیم مقدار (value) پیشفرض DropDownList، از صفر شروع می شود.
optionLabel با استفاده از این پارامتر می توانید یک متن پیشفرض مانند "انتخاب کنید ..." در DropDownList نمایش دهید.
template با استفاده از Template می توانید، آیتم های DropDownList را بصورت لیست درآورید.
text (default: "") زمانی که autoBind با مقدار false تنظیم شده باشد، متن (text) ابزار را تعیین می کند.
value (default: "") مقدار (value) ابزار را تعیین می کند.

 در مثال زیر، نحوه ساخت فیلد DropDownList با استفاده از متد ()kendoDropDownList و تنظیم پارامترهای مختلف آن نشان داده شده است.

مثال1

<!DOCTYPE html>
<html>
<head>
    <title>RTL support</title>
    <meta charset="utf-8">
    <link href="/../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="/../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="/../../../js/jquery.min.js"></script>
    <script src="/../../../js/kendo.web.min.js"></script>
    <script src="/../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>    
    
        <div id="example" class="k-content">            
            <div class="demo-section">            
                <div class="k-rtl">
                    <h2>RTL DropDownList</h2>
                    <input id="input"/>
                </div>
            </div>
            <script>
                $(document).ready(function() {
                    var data = [
                        {text: "Item1", value:"1"},
                        {text: "Item2", value:"2"},
                        {text: "Item3", value:"3"}
                    ];

                    $("#input").kendoDropDownList({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: data,
                        animation:{
                          open:{
                            effects:"slideIn:down fadeIn",
                            duration:1000,
                            show:true,
                            hide:false            
                          },
                          close:{
                            effects:"fadeOut",
                            duration:1000,
                            show:false,
                            hide:true
                          }                            
                        },                            
                        optionLabel: "-- select an item --",
                        index : 2,                
                        ignoreCase:false  
                    });
                });
            </script>          
          
        </div>   
            
</body>
</html>
اجرای مثال »

توجه: برای استفاده از ابزارهای Kendo UI در زبان های راست به چپ، علاوه براینکه باید فایل kendo.rtl.min.css را به صفحه لینک کنید، باید کلاس "k-rtl" را در تگ <div> مطابق مثال بالا تنظیم نمایید.


رویدادهای DropDownList

نامتوضیحات
change زمانی که مقدار تغییر کند، اتفاق می افتد.
close زمانی که پنجره ی گزینه ها بسته می شود، اتفاق می افتد.
open زمانی که پنجره ی گزینه ها باز می شود، اتفاق می افتد.
select زمانی که یکی از گزینه های DropDownList انتخاب شد، اتفاق می افتد.

در مثال زیر، هر تغییری که در DropDownList صورت گیرد، یک پیغام چاپ می شود:

مثال2

<!DOCTYPE html>
<html>
<head>
    <title>Events</title>
    <meta charset="utf-8">
    <link href="/../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="/../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="/../../../js/jquery.min.js"></script>
    <script src="/../../../js/kendo.web.min.js"></script>
    <script src="/../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>    
    
        <div id="example" class="k-content">
            <div class="demo-section">
                <h3 class="title">DropDownList</h3>
                <input id="dropdownlist"/>
            </div>
            <div class="demo-section">
                <h3 class="title">Console log</h3>
                <div class="console"></div>
            </div>
            <script>
                $(document).ready(function() {
                    function onOpen() {
                        kendoConsole.log("event: open");
                    };

                    function onClose() {
                        kendoConsole.log("event: close");
                    };

                    function onChange() {
                        kendoConsole.log("event: change");
                    };

                    function onSelect(e) {
                        if ("kendoConsole" in window) {
                            var dataItem = this.dataItem(e.item.index());
                            kendoConsole.log("event :: select (" + dataItem.text + " : " + dataItem.value + ")" );
                        }
                    };

                    var data = [
                        {text: "Item1", value:"1"},
                        {text: "Item2", value:"2"},
                        {text: "Item3", value:"3"}
                    ];

                    $("#dropdownlist").kendoDropDownList({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: data,
                        select: onSelect,
                        change: onChange,
                        close: onClose,
                        open: onOpen
                    });
                });
            </script>                      
        </div>    
            
</body>
</html>
 
اجرای مثال »

تنظیم رویداد change با استفاده از متد ()bind

در مثال زیر، با استفاده از متد ()bind رویداد change را به DropDownList اضافه کرده ایم. وظیفه این تابع این است که مقدار انتخاب شده را در عنصر <div> با شناسه "beyamooz" نمایش دهد:

<script>
          $(document).ready(function() {
                 var list = $('#dropdownlist').data('kendoDropDownList');     
                 list.bind("change",function(e) {
                     var text = list.text();
                     $('#beyamooz').text(text);
                     $('#beyamooz').css("background-color","yellow");
                });
           });
</script>                     

غیر فعال کردن DropDownList

<script>
          $(document).ready(function() {
                 var list = $('#dropdownlist').data('kendoDropDownList');
                 list.enable(false);
           });
 </script>                     

جستجو در آیتم های لیست و تنظیم DropDownList براساس نتیجه          

<script>
          $(document).ready(function() {
                 var list = $('#dropdownlist').data('kendoDropDownList');     
                 list.search("j");
           });
 </script>                     

برگرداندن گزینه انتخاب شده در DropDownList

<script>
          $(document).ready(function() {
                 var list = $('#dropdownlist').data('kendoDropDownList');        
                 var text = list.text();
                 if (text) alert(text);
           });
 </script>                     

دیدگاه‌ها  

+3 # نرگس 1393-03-12 11:00
خیلی خیلی خیلی خیلی عالی بود
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن