выпадающий список kendo с флажком

#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 /

http://jsfiddle.net/MG89G/331/

Комментарии:

1. отлично смотрится в jsfiddle

2. @Vivek-код в jsfiddle работает. моя проблема в моем проекте. данные поступают из базы данных sql. выбранные данные не отображаются после выбора.