With MVVM how to show/hide inside a list item

3 posts, 1 answers
  1. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 21 Aug 2014 Link to this post

    <script type="text/x-kendo-tmpl" id="my-template">
        <ul >
            <li>
            <div onclick="showToggle()"> Show/Hide Form</div>
            <div id="myform"> My Form Stuff</div>
            </li>
        <ul>
    </script>

    So in the above I want to click on the div or button and what ever and toggle the other part of the list item.
                        <ul data-role="listview" id="myList"
                            data-bind="source: listOfStuff"
                            data-template="my-template"></ul>

    now I can't really assign IDs to this. I just want to toggle it with some function like below.  Maybe this is more of a javascript question.  I guess I could also add another variable to my list of objects in my mvvm and then set that to visible true on a click, but I'd rather not add on the to the view model.

    function showToggle(){
    if ( $('#myform') visible) do
       $('#myform').hide();
    else 
      $('#myform').show();
    }

  2. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 25 Aug 2014 Link to this post

    Hello danparker276,

    This could be done by either using by adding a visibility flag to the model or by using jQuery to find the div element that should be hidden/shown. For example: 
    <div onclick="showToggle(this)"> Show/Hide Form</div>
    ...
      function showToggle(e){
        $(e).siblings().toggle(); 
      }


    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 26 Aug 2014 in reply to Alexander Popov Link to this post

    Thanks I think that should work, was looking for something like siblings.  Spent too much time on XAML, so my javascript has a few holes in it, thanks
Back to Top