آموزش ساخت ComboBox

چاپ

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

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

متد ()kendoComboBox

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

پیکربندی (Configuration)

پارامترتوضیح
dataTextField

باید با نام فیلدی که برای متن گزینه ها در dataSource درنظر گرفته ایم، تنظیم شود. (text)
dataValueField

باید با نام فیلدی که برای مقادیر گزینه ها در dataSource درنظر گرفته ایم، تنظیم شود. (value)
dataSource

با استفاده از این پارامتر می توانید منبع داده های ComboBox را مشخص نمایید، در مثال بالا، از یک لیست استاتیک استفاده شده است.
animation

با استفاده از این پارامتر می توانید، نحوه ی نمایش لیست گزینه های ComboBox را تغییر دهید.
index

تنظیم گزینه پیشفرض ComboBox، از صفر شروع می شود.
filter

نحوه ی فیلترینگ گزینه های ComboBox را مشخص می کند، زمانی که کاربر کاراکتری را تایپ می کند، براساس این کاراکتر در گزینه های ComboBox جستجو می کند و آنهایی که با آن کاراکتر شروع می شوند(startswith) یا شامل آن کاراکتر هستند (contains) را نمایش می دهد.
ignoreCase

زمان فیلترینگ، به حروف بزرگ و کوچک حساس باشد یا خیر.
minLength

حداقل چند کاراکتر تایپ شود، تا فیلترینگ عمل کند.
placeholder

با استفاده از این پارامتر می توانید یک متن پیشفرض مانند "انتخاب کنید ..." در ComboBox نمایش دهید.
suggest

آیا سیستم پیشنهاد دهی فعال باشد یا نه، زمانی که کاربر، کاراکتری را تایپ می کند، براساس آن کاراکتر در کادر ComboBox یکی از گزینه های ComboBox نمایش داده می شود.
select

با نام یک تابع تنظیم می شود و زمانی که یکی از گزینه های ComboBox انتخاب شد، صدا زده می شود.
change

با نام یک تابع تنظیم می شود و زمانی که مقدار ComboBox تغییر کرد، صدا زده می شود.
close

با نام یک تابع تنظیم می شود و زمانی که لیست ComboBox پنهان شود، صدا زده می شود.
open

با نام یک تابع تنظیم می شود و زمانی که لیست ComboBox ظاهر شود، صدا زده می شود.

در مثال زیر، نحوه ساخت فیلد ComboBox با استفاده از متد ()kendoComboBox و تنظیم پارامترهای مختلف آن نشان داده شده است. همچنین در انتهای مثال با استفاده از متد ()bind رویداد change را به ComboBox اضافه کرده ایم. وظیفه این تابع این است که مقدار انتخاب شده را در عنصر <div> با شناسه "info" نمایش دهد:

مثال (آموزش ساخت ComboBox)

<!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 ComboBox</h2>
                    <input id="combobox" />
                </div>
            </div>
            <script>
                $(document).ready(function() {
                    var data = [
                        { text: "Item 1", value:"1" },
                        { text: "Item 2", value:"2" },
                        { text: "Item 3", value:"3" }
                    ];

                    $("#combobox").kendoComboBox({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: data
                        //animation:{
                        //    open:{
                        //        effects:"fadeIn",
                        //        duration:1000,
                        //        show:true,
                        //        hide:false            
                        //    },
                        //    close:{
                        //        effects:"fadeOut",
                        //        duration:1000,
                        //        show:false,
                        //        hide:true
                        //    }                            
                        //},
                        //index : 2,
                        //filter:'startswith'//'contains',
                        //ignoreCase:0,
                        //minLength:1,
                        //placeholder:'choose an item',
                        //suggest:true
                    });
                });
            </script>           
         
        </div>   
            
</body>
</html>

اجرای مثال »

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

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

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

<script>        
        $(document).ready(function(){         
               var combobox = $('#combobox').data('kendoComboBox');             
               combobox.bind("change",function(e) {
                    var result = combobox.text();
                    $('#info').text(result);
                    $('#info').css("background-color","yellow");
               });
        });
 </script>                 

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

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

قرار دادن ComboBox برروی گزینه دوم

<script>        
        $(document).ready(function(){         
               var combobox = $('#combobox').data('kendoComboBox');          
               combobox.select(1);                    
        });
 </script>                 
نوشته شده توسط امیر پهلوان صادق
بازدید: 20880