CODEWITHSUNDEEP
angularjskendo-uikendo-sortable
ps0604
ps0604

Reputation: 1071

KendoSortable in Angular doesn't enable input fields

In this plunk I have a UL list decorated with kendo-sortable and another list without the decoration. In the first case, the input fields are disabled (apparently disabled to allow dragging on the fields) while in the second list the input fields are enabled. How to make the fields enabled in the first list?

HTML:

<ul kendo-sortable="list">
      <li style="list-style-type:none" ng-repeat="c in conditions">
            {{$index}}
            <input ng-model="c.fieldA" style="width:60px" class="k-textbox"/> 
            <select kendo-drop-down-list style="width:60px" ng-model="c.oper">
              <option value="0">=</option>
              <option value="1">&gt;</option>
              <option value="2">&lt;</option>
            </select> 
            <input ng-model="c.fieldB" style="width:60px" class="k-textbox" /> 
      </li>
  </ul>

  Same list without sortable (fields enabled):
  <ul>
      <li style="list-style-type:none" ng-repeat="c in conditions">
            {{$index}}
            <input ng-model="c.fieldA" style="width:60px" class="k-textbox" /> 
            <select kendo-drop-down-list style="width:60px" ng-model="c.oper">
              <option value="0">=</option>
              <option value="1">&gt;</option>
              <option value="2">&lt;</option>
            </select> 
            <input ng-model="c.fieldB" style="width:60px" class="k-textbox" /> 
      </li>
  </ul>

Javascript:

var app = angular.module("app", [ "kendo.directives" ]);

function MyCtrl($scope) {

   $scope.conditions = [];

   var load = function() {

          var c = {
                  fieldA: '111',
                  oper: 0,
                  fieldB: '222'
            };

            $scope.conditions.push(c);


            var c1 = {
                  fieldA: '333',
                  oper: 0,
                  fieldB: '444'
            };

            $scope.conditions.push(c1);
   };


    $scope.$on("kendoWidgetCreated", function(event, widget){
          if (widget === $scope.list) {
              load();
          }
      });

}

Upvotes: 1

Views: 558

Answers (1)

Lars H&#246;ppner
Lars H&#246;ppner

Reputation: 18402

You can provide an ignore option:

<ul kendo-sortable="list" k-ignore="'input'">
  <li style="list-style-type:none" ng-repeat="c in conditions">
        {{$index}}
        <input ng-model="c.fieldA" style="width:60px" class="k-textbox" /> 
        <select kendo-drop-down-list style="width:60px" ng-model="c.oper">
          <option value="0">=</option>
          <option value="1">&gt;</option>
          <option value="2">&lt;</option>
        </select> 
        <input ng-model="c.fieldB" style="width:60px" class="k-textbox" /> 
  </li>
</ul>

(demo)

Upvotes: 2

Related Questions