#jquery #asp.net-mvc-3 #checkbox #kendo-dropdown
#jquery #asp.net-mvc-3 #флажок #выпадающий список kendo
Вопрос:
добрый день,
у меня есть выпадающий список kendo с флажками. данные для выпадающего списка поступают из таблицы в базе данных sql. моя проблема в том, что когда я выбираю данные в выпадающем списке, они не отображаются в выпадающем списке (я хочу показать это как функцию множественного выбора). я не уверен, получаю ли я значение выбранного элемента при его выборе.
вот мой код:
HTML:
<input id="dropDownList" runat="server" />
<script type="text/x-kendo-template" id="CheckboxTemplate"> <li unselectable="on" class="k-item nowrap check-item">
<input type="checkbox" name="#= Day #" value="#= ID #" class="check-input" #= "" ? "checked" : "" # />
<span>#= Day #</span>
<br/>
<span>#= StartTime #-#= EndTime #</span>
</li>
</script>
Скрипты:
<script type="text/javascript">
$(document).ready(function () {
var clientCusId = $("#clientCusId").val();
var clientId = $("#clientId").val();
var clientCusPosId = $("#clientCusPosId").val();
var data = new kendo.data.DataSource({
transport: {
read: {
url: '/Customer/LoadCustomerPositionShiftList?clientCusId=' clientCusId 'amp;clientId=' clientId 'amp;clientCusPosId=' clientCusPosId,
dataType: "json",
type: "POST"
}
}
});
dropdown = $("#dropDownList").kendoDropDownList({
dataTextField: "Day",
dataValueField: "ID",
optionLabel: {
Day: "--Select All--",
StartTime: "",
EndTime:"",
ID: ""
},
template: $("#CheckboxTemplate").html(),
dataSource: data,
select: function (e) {
e.preventDefault();
}
}).data("kendoDropDownList");
//it doesn't go here
dropdown.list.find(".check-input,.check-item").bind("click", function (e) {
var $item = $(this);
var $input;
if ($item.hasClass("check-item")) {
// Text was clicked
$input = $item.children(".check-input");
$input.prop("checked", !$input.is(':checked'));
}
else
// Checkbox was clicked
$input = $item;
var val = $input.val();
//Check all clicked?
if (val == "")
dropdown.list.find(".check-input").prop("checked", $input.is(':checked'));
var ddl = $('#dropDownList').data().kendoDropDownList;
var model = ddl.dataItem($input.closest('.k-item').index());
alert(model.text);
updateDropDown()
e.stopImmediatePropagation();
});
updateDropDown()
});
function updateDropDown() {
var items = [];
dropdown.list.find(".check-input").each(function () {
var $input = $(this);
if ($input.val() != "" amp;amp; $input.is(':checked'))
items.push($input.next().text());
});
// Check the Check All if all the items are checked
$(dropdown.list.find(".check-input")[0]).prop("checked", items.length == dropdown.list.find(".check-input").length - 1);
dropdown.text(items.toString());
}
</script>
надеюсь, кто-нибудь сможет мне в этом помочь.
это моя ссылка: http://jsfiddle.net/gregmarkv/jNnD5 /
Комментарии:
1. отлично смотрится в jsfiddle
2. @Vivek-код в jsfiddle работает. моя проблема в моем проекте. данные поступают из базы данных sql. выбранные данные не отображаются после выбора.