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">></option>
<option value="2"><</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">></option>
<option value="2"><</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();
}
});
}
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">></option>
<option value="2"><</option>
</select>
<input ng-model="c.fieldB" style="width:60px" class="k-textbox" />
</li>
</ul>
(demo)