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

Pass Arguments from View to ViewModel Functions

Environment

Product Progress® Kendo UI® MVVM Architecture

Description

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?

Solution

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.

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

<script>
  var viewModel = kendo.observable({
    selectionDataSource: new kendo.data.DataSource({
      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);
</script>

See Also

In this article