[英]Enable/disable kendo ui control dynamically
I want to enable/disable a kendo combobox based on the user's selection from a checkbox, which I am storing in a variable. 我想基于用户从复选框中选择的选项启用/禁用剑道组合框,该复选框存储在变量中。
I already tried setting the variable to the enable property, but this is useful only when the control is being built-in. 我已经尝试将变量设置为enable属性,但这仅在内置控件时才有用。
Does anybody know If I can do this while creating the control? 有人知道我在创建控件时是否可以这样做吗?
<div id="fund" class="col-xs-3">
input class="required" data-bind="title: $parent.selectedFund,
kendoComboBox: {
placeholder: 'Start typing to search...',
value: $parent.test,
widget: $parent.searchSource,
dataTextField: 'managerName',
dataValueField: 'managerId',
filter: 'contains',
autoBind: false,
minLength: 3,
enable: overrideGlobalMapping, //this does not work for me even though the variable holds the correct value
change: function(){ if(this.value() && this.selectedIndex == -1)
{
setTimeout(function () {$parent.selectedManagerId(null);}, 100);}},
dataSource: {
serverFiltering: true,
transport: {
read: $parent.retrieveManager
}
}
}" />
</div>
I ended up wrapping the kendo combox definition in a function, so it now looks likes this: 我最终将kendo combox定义包装在一个函数中,所以现在看起来像这样:
<input type="checkbox" id="overrideGlobalMappingCheck" onclick="SetFundsCombobox()" data-bind="checked: overrideGlobalMapping, enable: $root.canConfirmMapping" />
The kendo combobox is still wrapped and has an id, which I later use to manipulate it in javascript: kendo组合框仍被包装并具有一个id,我以后用它在javascript中对其进行操作:
<div class="col-xs-3" id="funds">
<input class="required" data-bind="title: $parent.selectedFund,
kendoComboBox: {
placeholder: 'Start typing to search...',
value: $parent.selectedManagerId,
...
}" />
</div>
And this is the JavaScript function bound to the onclick checkbox's event: 这是绑定到onclick复选框事件的JavaScript函数:
function SetFundsCombobox() {
var fundsDiv = document.getElementById('funds');
var inputSelector = fundsDiv.getElementsByClassName('k-input');
var span = fundsDiv.getElementsByTagName('span');
if (document.getElementById('overrideGlobalMappingCheck').checked) {
document.getElementById('funds').disabled = false;
inputSelector[0].disabled = false;
span[1].classList.remove("k-state-disabled");
} else {
document.getElementById('funds').disabled = true;
inputSelector[0].disabled = true;
span[1].classList.add("k-state-disabled");
}
};
I'd have rather preferred to perform this via the view model, but it works for now. 我本来希望通过视图模型执行此操作,但是它现在可以使用。
EDIT: 编辑:
I've been able to do this the right way (following the MVVM pattern), so now rather than wrapping the kendo combo box in a function, I added the following function in the view model: 我已经能够以正确的方式执行此操作(遵循MVVM模式),因此,现在,不是将kendo组合框包装在一个函数中,而是在视图模型中添加了以下函数:
$scope.overrideGlobalMappingChecker = ko.computed(function () {
if ($scope.entityMapping()) {
var checkboxChecked = $scope.entityMapping().overrideGlobalMapping();
$("#funds .k-input").prop('disabled', !checkboxChecked);
if (!checkboxChecked) {
$scope.selectedFundId(null);
}
}
});
So now, what the html only needs is the definition of the id in the div containing the combo box: 因此,现在,HTML仅需要的是包含组合框的div中id的定义:
<div class="col-xs-3" id="funds">
<input data-bind="title: $parent.selectedFundName, kendoComboBox: {
autoBind: false,
...
}" />
</div>
And that's it, it's a much cleaner/correct way to handle this. 就是这样,这是一种更清洁/正确的方式来处理此问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.