Detail View dinamically

2 posts, 0 answers
  1. elll
    elll avatar
    2 posts
    Member since:
    Jun 2012

    Posted 12 Apr 2012 Link to this post

    Hi
    I have a ListView in a tabstrip with a button like the Sushi Demo and i want that when i click on the button the application open the detail view in the same view.
    How can i do this?
    thanks Elios 
  2. d2uX
    d2uX avatar
    16 posts
    Member since:
    Jul 2012

    Posted 12 Jul 2012 Link to this post

    Just trying to accomplish the exact same thing.
    However just looking at the demo code isnt really self explaining. Especially when trying to do this in MVVM-style.

    Can't somebody give a simple clean MVVM-Tutorial on such a basic thing?
    I dont really know if what I wrote is how it's supposed to be ^^'
    Here's what I did so far:

    defining a viewModel with a dataSource
    var productDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: '/get.php',
                dataType: 'jsonp',
                data: {
                    type: 'products'
                }
            }
        },
        pageSize: 10,
        serverpaging:true
    })
     
    var productViewModel = kendo.observable({
        productList: productDS
    });

    defining a function for fetching the details (taken from the sushi-demo)
    function showProductDetail(e) {
        var view = e.view;
         
        productDS.fetch(function() {
            var model = view.model,
                item = productDS.get(view.params.id);
            model.set("product", item)
        });
    }

    and finally getting everything together in the template
    <script id="productListTpl" type="text/x-kendo-template"">
       <a
             class="details-link"
             data-role="listview-link"
             href="\#productDetail?id=${id}">
             <h2>${name}</h2>
        </a>
    </script>
    note the ?id= in the href! this specifies the id your detail records are loaded from

    Hope this helps and really would appreciate a clean Tut ;)
    Thx so far, amazing (frame)work :)
  3. Kendo UI is VS 2017 Ready
Back to Top