آموزش ساخت 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>
$(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>
$(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>
$(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>
$(document).ready(function() {
var list = $('#dropdownlist').data('kendoDropDownList');
var text = list.text();
if (text) alert(text);
});
</script>
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 12787
دیدگاه‌ها
خیلی خیلی خیلی خیلی عالی بود