ListView Template - a button to a detail view

5 posts, 1 answers
  1. marbleblue
    marbleblue avatar
    12 posts
    Member since:
    Apr 2008

    Posted 27 Nov 2012 Link to this post

    Hi guys,

    In the following code sample, how can I replace the actionsheet, so via the click of the button, the showDetails function is
    called directly and view changed (whilst taking the row context across so I can get the selected row's values out)?

     <div id="main" data-role="view" data-title="Schedule" data-model="viewModel" data-layout="default">
            <ul id="items" data-role="listview" data-template="diaryItem" data-style="inset" data-bind="source: dataSource" ></ul>       
            <ul id="actions" data-role="actionsheet">
                <li class="km-actionsheet-title">Select operation:</li>
                <li><a href="#" data-action="viewModel.showDetails">Details</a></li>
            </ul>
        </div>

    <!--details view-->
        <div id="details" data-role="view" data-model="viewModel.selectedProduct" data-title="Details" data-layout="default">
            <ul id="info" data-role="listview" data-style="inset">
                <li>
                   Company Name:
                    <span data-bind="text: CompanyName"></span>
                </li>
           </ul>
       </div>

        <!--listview template-->
        <script id="productItem" type="text/x-kendo-template">
            <span>#= ProductName #</span>

    // Clicking this button pops up the actionsheet, but I want to bypass it and call the showDetails function directly

            <a class="btnActions"
                data-role="button"
                data-rel="actionsheet"
                href="\\#actions"
                data-actionsheet-context="#= itemID #">Actions</a>
        </script>


        <script type="text/javascript">
            var app = new kendo.mobile.Application(),
                validator,
                viewModel = kendo.observable({
                    dataSource: new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "api/diary",
                                type: "GET"
                            }
                        },
                        batch: true,
                        pageSize: 20,
                        schema: {
                            data: "Data",
                            total: "Count"
                        }
                    }),
                    selectedItem: {},
                    showDetails: function (e) {
                        var item = viewModel.dataSource.get(e.context); //gets the ActionSheet context
                        viewModel.set("selectedItem", item); //sets the selected product
                        app.navigate("#details"); //navigates to details view
                    }
                });

        </script>
  2. marbleblue
    marbleblue avatar
    12 posts
    Member since:
    Apr 2008

    Posted 28 Nov 2012 Link to this post

    I tried this in the template, but the row context wasn't passed, so the detail view only showed data from the top row of the listview regardless of which row button was clicked.

            <span style="float:right">
             <a data-role="button" data-bind="events: { click: showDetails }"> > </a>
            </span>
  3. Kendo UI is VS 2017 Ready
  4. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 29 Nov 2012 Link to this post

    Hello,

    The recommended way to achieve that would be to use the listview click event - in the handler parameters you can check for the corresponding button and the dataItem information. 

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. marbleblue
    marbleblue avatar
    12 posts
    Member since:
    Apr 2008

    Posted 03 Dec 2012 Link to this post

    Hi Guys, I could really do with some help here, this is driving me up the wall.
    I've been going around in circles with this. I've even tried nicking code from the Sushi example.

    The listview appears, but I just cant get it to display the correct details view on click of the button - it always just displays the details for the top item in the list. The url always reverts to localhost/index.aspx#detail#!

    The data comes from a datatable.ToArray()

    <!DOCTYPE html>
    <html>
    <head>
        <title>Kendo Sushi</title>
        <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet">
        <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet">
        <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div data-role="layout" data-id="default">
            <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
                <a class="about-button" data-align="right" href="#demo" data-role="button">Test</a>
            </div>
            </header>

            <footer data-role="footer" data-id="default">
            <div data-role="tabstrip">
                <a href="#index" data-icon="home">Home</a>
                <a href="#menu" data-icon="organize">Our menu</a>
                <a href="#cart" data-icon="cart">Cart</a>
                <a href="#account" data-icon="contacts">Account</a>
            </div>
            </footer>
        </div>

        <div data-title="Your Diary" data-role="view" id="index" data-url="/" data-layout="default" data-show="showMenuView">
            <ul id="featured"
                class="item-list"
                data-role="listview"
                data-template="menuTemplate"
                data-source="featured"
            ></ul>
        </div>

        <div data-role="view" id="details" data-transition="slide" data-layout="default" data-show="showDetailsView">
            <header data-role="header">
                <div data-role="navbar">
                    
                    <span data-role="view-title">Item</span>
                </div>
            </header>

            <div data-role="content">
            </div>
        </div>

        <script id="menuTemplate" type="text/x-kendo-template">        
            <div>
                <div style="float:left; width:50px; vertical-align: middle; margin-top: 20px"><img class="profileImage" src="http://garrettgibbons.com/blog/wp-content/themes/photocrati-theme/images/social/small-twitter.png" /></div>
                <div style="float:left">
                    <div class="text"><b>#= kendo.toString(new Date(ActualStartDate), 'dddd') #</b></div>
                    <div class="text">#= kendo.toString(new Date(ActualStartDate), 'dd/MM/yyyy') # #= kendo.toString(new Date(ActualTimeFrom), 'HH:mm') #-#= kendo.toString(new Date(ActualTimeTo), 'HH:mm')#</div>
                    <div class="text">${CompanyName}, ${VacancyName}, ${Id}</div>
                </div>
                <div style="float:right; margin-top: 20px" >
                <a id="btndetail"
                class="details-link"
                data-role="button"
                data-name="hitme"
                href="\#details?Id=#:Id#"
                data-item-id="#:Id#">
                <h2>#:Id#</h2>
                </a>
                </div>
            </div>
        </script>

        <script id="detailTemplate" type="text/x-kendo-template">
            <div>
                <div class="text">#:CompanyName#</div>
                <div class="text">#:VacancyName#</div>
                <div class="text">#:Id#</div>
            </div>        
        </script>

        <script>
            var app;

            var schema = { data: "Data", total: "Count", model: {} };

            var ds = kendo.data.DataSource.create({
                transport: {
                    read: {
                        url: "api/diary",
                        type: "GET"
                    },
                },
                schema: schema,
                 pageSize: 3
            });

            var featured = kendo.data.DataSource.create({
                schema: schema
            });

            ds.bind("change", function () {
                featured.data(ds.data());
            });

            ds.fetch();

            var itemDetailsTemplate = kendo.template($("#detailTemplate").text());

            function showDetailsView(e) {
                var view = e.view;

                ds.fetch(function() {
                    item = ds.get(view.params.id);
                    view.scrollerContent.html(itemDetailsTemplate(item));
                    kendo.mobile.init(view.content);
                });
            }

            function showMenuView(e) {
                e.view.content.find(".item-list").data("kendoMobileListView").refresh();
            }

            app = new kendo.mobile.Application($(document.body), { transition: "slide" });

    Model:
            public DateTime ActualStartDate { get; set; }
            public DateTime ActualEndDate { get; set; }
            public DateTime ActualTimeFrom { get; set; }
            public DateTime ActualTimeTo { get; set; }
            public string ShiftStateDescription { get; set; }
            public string CompanyName { get; set; }
            public string VacancyName { get; set; }
            public Int64 Id { get; set; }

            public Diary(System.Data.DataRow dr)
            {
                this.ActualStartDate = (DateTime)dr["ActualStartDate"];
                this.ActualEndDate = (DateTime)dr["ActualEndDate"];
                this.ActualTimeFrom = (DateTime)dr["ActualTimeFrom"];
                this.ActualTimeTo = (DateTime)dr["ActualTimeTo"];
                this.ShiftStateDescription = (string)dr["ShiftStateDescription"];
                this.CompanyName = (string)dr["CompanyName"];
                this.VacancyName = (string)dr["VacancyName"];
                this.Id = (Int64)dr["PlanSerialNumber"];
            }
  6. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 05 Dec 2012 Link to this post

    Hello,

    I am not sure what goes on from the source code posted, it could be a. Is it possible for you to isolate the problem to a jsFiddle (you can use this one as a base). You can use a local javascript array as a datasource substitution. 

    Thanks in advance,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready