This is a migrated thread and some comments may be shown as answers.

ListView Template - a button to a detail view

4 Answers 647 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
marbleblue
Top achievements
Rank 1
marbleblue asked on 27 Nov 2012, 06:20 PM
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>

4 Answers, 1 is accepted

Sort by
0
marbleblue
Top achievements
Rank 1
answered on 28 Nov 2012, 10:34 AM
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>
0
Accepted
Petyo
Telerik team
answered on 29 Nov 2012, 09:04 AM
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!
0
marbleblue
Top achievements
Rank 1
answered on 03 Dec 2012, 05:54 PM
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"];
        }
0
Petyo
Telerik team
answered on 05 Dec 2012, 01:34 PM
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!
Tags
ListView (Mobile)
Asked by
marbleblue
Top achievements
Rank 1
Answers by
marbleblue
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or