Вызов древовидного списка выпадающего списка Kendo вызывается перед тем, как выпадающий элемент задан из модели

Недавно я начал изучать KendoUI и придумал эту проблему. Я пытаюсь включить dropdownlist в сетку кендо с использованием подхода MVVM. Сетка имеет 3 столбца - флажок, текст и выпадающий список. Я хочу вручную установить значение dropdownlist в зависимости от того, установлен флажок или нет. В качестве примера здесь я пытаюсь установить класс как «класс 3», если флажок не установлен. Несмотря на то, что индекс установлен на 2, он возвращается к классу из модели в конце события dataBound. Кто-нибудь может мне с этим помочь? Мне нужно принудительно установить раскрывающийся индекс. Спасибо.

<script type="text/x-kendo-template" id="checkboxGrid">
    <input type="checkbox" data-bind="checked: IsChecked" />         
</script>

<script type="text/x-kendo-template" id="ddlGrid">
     <input data-role="dropdownlist"
        data-auto-bind="true"  
        data-text-field="name"
        data-value-field="id"
        data-auto-bind="true"
        data-bind="source: actionSource, value: class, events:{dataBound: dataBound }"/>
</script>

<div id="content" >
     <div id="my-grid"
          data-role="grid"
          data-sortable="true"
          data-selectable="true"
          data-columns='[
             {"field": "IsChecked", "title":" ", template: kendo.template($("#checkboxGrid").html())}, 
             {"field": "Name", "title":"Name" },
             {"field": "class", "title":"Class", template: kendo.template($("#ddlGrid").html())}
          ]'
          data-bind="source: dataSource">
     </div>
 </div>

 <script>
     $(document).ready(function() {

        var viewModel = new kendo.data.ObservableObject({
            dataSource: [
                {  IsChecked: true, Name: "Student 1", class: { name: "Class 1", id:"1" }},
                {  IsChecked: false, Name: "Student 2", class: { name: "-Please Select-", id:"999" } },
                {  IsChecked: false, Name: "Student 3", class: { name: "-Please Select-", id:"999" }},
                { IsChecked: true, Name: "Student 4", class: { name: "Class 3", id:"3" } }
            ],
            actionSource: [
                { name: "-Please Select-", id:"999"},
                { name: "Class 1", id:"1" },
                { name: "Class 2", id:"2" },
                { name: "Class 3", id:"3" }
            ],
            dataBound: function(e) {
                var ddl = e.sender;
                var gridRow = $(ddl.element).closest( "tr" );
                var checkbox = $(gridRow).find('input[type=checkbox]');
                debugger;
                if(checkbox.prop("checked") == false){
                  console.log("Checkbox checked : " + false);
                  //explicitly trying to set class to 'Class 3'
                  ddl.select(2);
                  debugger;
                }
                //Even though index is set to 2, it gets reverted back to the class from the model at the end of the event
            }
        });

        kendo.bind($('#my-grid'), viewModel);

      });
  </script>

javascript,jquery,kendo-ui,kendo-grid,kendo-dropdown,

1

Ответов: 0

Вызов древовидного списка выпадающего списка Kendo вызывается перед тем, как выпадающий элемент задан из модели

Недавно я начал изучать KendoUI и придумал эту проблему. Я пытаюсь включить dropdownlist в сетку кендо с использованием подхода MVVM. Сетка имеет 3 столбца - флажок, текст и выпадающий список. Я хочу вручную установить значение dropdownlist в зависимости от того, установлен флажок или нет. В качестве примера здесь я пытаюсь установить класс как «класс 3», если флажок не установлен. Несмотря на то, что индекс установлен на 2, он возвращается к классу из модели в конце события dataBound. Кто-нибудь может мне с этим помочь? Мне нужно принудительно установить раскрывающийся индекс. Спасибо.

<script type="text/x-kendo-template" id="checkboxGrid">
    <input type="checkbox" data-bind="checked: IsChecked" />         
</script>

<script type="text/x-kendo-template" id="ddlGrid">
     <input data-role="dropdownlist"
        data-auto-bind="true"  
        data-text-field="name"
        data-value-field="id"
        data-auto-bind="true"
        data-bind="source: actionSource, value: class, events:{dataBound: dataBound }"/>
</script>

<div id="content" >
     <div id="my-grid"
          data-role="grid"
          data-sortable="true"
          data-selectable="true"
          data-columns='[
             {"field": "IsChecked", "title":" ", template: kendo.template($("#checkboxGrid").html())}, 
             {"field": "Name", "title":"Name" },
             {"field": "class", "title":"Class", template: kendo.template($("#ddlGrid").html())}
          ]'
          data-bind="source: dataSource">
     </div>
 </div>

 <script>
     $(document).ready(function() {

        var viewModel = new kendo.data.ObservableObject({
            dataSource: [
                {  IsChecked: true, Name: "Student 1", class: { name: "Class 1", id:"1" }},
                {  IsChecked: false, Name: "Student 2", class: { name: "-Please Select-", id:"999" } },
                {  IsChecked: false, Name: "Student 3", class: { name: "-Please Select-", id:"999" }},
                { IsChecked: true, Name: "Student 4", class: { name: "Class 3", id:"3" } }
            ],
            actionSource: [
                { name: "-Please Select-", id:"999"},
                { name: "Class 1", id:"1" },
                { name: "Class 2", id:"2" },
                { name: "Class 3", id:"3" }
            ],
            dataBound: function(e) {
                var ddl = e.sender;
                var gridRow = $(ddl.element).closest( "tr" );
                var checkbox = $(gridRow).find('input[type=checkbox]');
                debugger;
                if(checkbox.prop("checked") == false){
                  console.log("Checkbox checked : " + false);
                  //explicitly trying to set class to 'Class 3'
                  ddl.select(2);
                  debugger;
                }
                //Even though index is set to 2, it gets reverted back to the class from the model at the end of the event
            }
        });

        kendo.bind($('#my-grid'), viewModel);

      });
  </script>
01JavaScript, JQuery, кендо-щ, кендо-сетка, кендо-выпадающий,
Похожие вопросы