New to Kendo UI for jQuery? Download free 30-day trial

Pass Arguments from View to ViewModel Functions


Product Progress® Kendo UI® MVVM Architecture


I am building a screen where, depending on the selected option from a DropDownList, specific controls will be visible.

How can I use a single function that is defined in the viewModel to control the visibility of these elements? How can I pass a different argument to that function according to the actual HTML element it is used for?


Pass a single string argument as a function parameter. For example, if you need to pass an array, pass it as a string with a certain delimiter.

  <label for="selection">Selection: </label>
  <input id="selection"
         data-bind="source: selectionDataSource,
                    value: selectedOption"/>
<div data-bind="visible: visibleTextBox('1q3')">
  <label for="amount">Textbox 1: </label>
  <input id="amount"
         data-bind="value: defaultTextBox1Value"/>
<div data-bind="visible: visibleTextBox('2q4')">
  <label for="initialAmount">Textbox 2: </label>
  <input id="initialAmount"
         data-bind="value: defaultTextBox2Value"/>

  var viewModel = kendo.observable({
    selectionDataSource: new{
      data: [
        { txt: "Selection 1", id: 1 },
        { txt: "Selection 2", id: 2 },
        { txt: "Selection 3", id: 3 },
        { txt: "Selection 4", id: 4 },
    defaultTextBox1Value: function() { return 1; },
    defaultTextBox2Value: function() { return 2; },
    selectedOption: 1,
    visibleTextBox: function(values) {
      var valuesArray = values.split('q');
      var currentSelectedOption = this.get('selectedOption');

      if (valuesArray.includes(currentSelectedOption.toString())) {
        return true;
      } else {
        return false;
  kendo.bind($("body"), viewModel);

See Also

In this article