data-bind visible - multiple conditions

4 posts, 0 answers
  1. Gregg
    Gregg avatar
    8 posts
    Member since:
    Sep 2015

    Posted 17 Jan 2018 Link to this post

    Is it possible to data-bind the visible property in MVVM to multiple conditions, either by using logical operators (&&) or calling a function that accepts parameters?

    <div id='test' data-bind='visible: condition1 && condition2'>...</div>

    or

    <div id='test' data-bind='visible: myShowFunction('a', 'b')'>...</div>

     

     

     

  2.
  3. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    873 posts

    Posted 19 Jan 2018 Link to this post

    Hello Gregg,

    There are two approaches, that might be applicable in the described scenario. First, if you need to pass parameters from the markup to the ​myShowFunction, you should pass them concatenated in a single string: 
    <div id="test" data-bind="visible: myShowFunction('falseqtrue')">Test visibility</div>

    Then you could split and evaluate them:
    var viewModel = kendo.observable({
      myShowFunction: function(values) {
        var array = values.split('q');
        var a = (array[0] == 'true');
        var b = (array[1] == 'true');
        return a && b
      }
    });
     
    kendo.bind('body', viewModel);

    Alternatively, if the conditions are part of the ViewModel, you could evaluate them in simple function bound to the visible option:
    <div id="test" data-bind="visible: testConditions">Test visibility</div>

    and:
    var viewModel = kendo.observable({
      myShowFunction: function(values) {
        var array = values.split('q');
        var a = (array[0] == 'true');
        var b = (array[1] == 'true');
        return a && b
      }
    });
     
    kendo.bind('body', viewModel);

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Clint
    Clint avatar
    57 posts
    Member since:
    Feb 2011

    Posted 11 Feb 2018 in reply to Veselin Tsvetanov Link to this post

    Did you mean to post the "myShowFunction" example twice?  I'm guessing your "testConditions" binding is different.  Would you mind posting that example?
  7. Dimitar
    Admin
    Dimitar avatar
    523 posts

    Posted 13 Feb 2018 Link to this post

    Hello Clint,

    The second approach that my colleague Veselin suggested is to use a simple function to evaluate ViewModel fields:
    <div data-bind="visible: visibleTextBox">
      <label for="amount">Textbox 1: </label>
      // ...
    </div>
     
    <script>
      var viewModel = kendo.observable({   
        selectedOption: 1,
        visibleTextBox: function() {
          var selectedOptionValue = this.get('selectedOption');

          if(selectedOptionValue == 3) {
            return true;
          } else {           
            return false;
          }
        }
      });
     
      kendo.bind($("body"), viewModel);
    </script>

    You can review the following Dojo example, where the above approach is demonstrated.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top