Questions on Kendo UI for jQuery Forum

27 answers

729 views

Phone vs. Tablet

This might be a higher level question than just the SplitView but since it is the primary situation I will discuss I thought to put the question here.

With the 2012 Kendo Summer release, new tablet level widgets were introduced.

Does this mean that kendo is strategically divided into the following?

Web vs. Mobile (Phone/Tablet)

i.e. do I build mobile applications with kendo mobile like normal and just "spice" the tablet level widgets on the screen when appropriate and let kendo handle the rendering of these tablet level widgets on mobile devices?

Or is it reccommended to built a tablet specific view of your mobile application?

In addition, if I use the splitview widget, how will it react on the mobile device? Just not display and treat the panes like normal mobile panes?

SplitView

answered on 02 Sep 2014

5 answers

53 views

Splitview item selection highlight

Hi. I've created a split view application and I'm using the left panel as a menu. I would like the selected menu item to appear selected when tapped. I would also like any of the other menu items to become unhighlighted whenever a menu item is selected. So only one of the menu items should ever appear to be selected. Is this possible?

I'm binding in html as follows:

<div data-role="view" data-title="Menu" id="side-root" class="no-backbutton">

<ul data-role="listview"
id="mt-home-list-view"
data-template="mt-main-tmpl-home-list"
data-source="arrayOfHomeButtons">
</ul>
</div>

SplitView

answered on 25 Jul 2014

1 answer

55 views

SplitView navigation issue

I ttry to set up a sample for an universal app. Currently I'm stuck with navigation inside the splitview. The console logs an error saying that the links "#rightOne" and "#rightTwo" are not found. Here is my code (testet in kendo ui dojo). The code is adjusted to allways show the tablet code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<style>
    html, body, #phoneApp {
      height: 100%;
    }
</style>
</head>

    <body>
        <div id="tabletApp" style="display:none;">
            <div data-role="splitview">
                <div data-role="pane" id="left" data-layout="leftLayout">
                    <div data-role="view">
                        <a href="#rightOne" data-target="right">One</a>
                        <a href="#rightTwo" data-target="right">Two</a>
                    </div>

                    <div data-role="layout" data-id="leftLayout">
                        <div data-role="header">
                          <div data-role="navbar">
                              TEST APP
                          </div>
                        </div>
                    </div>
                </div>
                <div data-role="pane" id="right" data-layout="rightLayout">
                    <div data-role="view" id="rightOne">
                       One
                    </div>
                    <div data-role="view" id="rightTwo">
                       Two
                    </div>
                    <div data-role="layout" data-id="rightLayout">
                      <div data-role="header">
                          <div data-role="navbar">
                               
                          </div>
                      </div>
                    </div>
                </div>
           </div>
        </div>
        <div id="phoneApp" style="display:none;">
           <div data-role="view">
               <h1>Phone Home</h1>
           </div>
           <div data-role="view" id="about">
               <h1>Phone About</h1>
           </div>
           <div data-role="layout" data-id="phoneDefault">
               <div data-role="header">
                  <div data-role="navbar">
                        Phone App
                  </div>
               </div>
               
               <div data-role="footer">
                   <div data-role="tabstrip">
                     <a href="" data-icon="home">Home</a>
                     <a href="#about" data-icon="info">About</a>
                   </div>
               </div>
           </div>
        </div>
        <script>
            $(function() {
                var app,
                //Must be mobile and tablet
                isTablet = kendo.support.mobileOS && kendo.support.mobileOS.tablet,
                    appElement = null,
                    appLayout = null;

                console.log("mobileOS Info/isTablet", kendo.support.mobileOS, isTablet);


                appElement = $("#tabletApp");
                appLayout = (isTablet) ? null : "phoneDefault";

                console.log(appElement);

                app = new kendo.mobile.Application(appElement, {
                    transition: 'slide'
                });

                //Adjust visibility of proper app container
                appElement.show();
            });
        </script>
    </body>
</html>

SplitView

answered on 26 May 2014

9 answers

119 views

Open View in SplitView Pane from Direct Link

We have a SplitView in our web app, that has two panes (menu on the left, content on the right). We want to be able to direct-link to a specific view, like we do for the phone version of our web app. For example:

http://www.ourwebsite.com/index.html#remote-view-name

This works when we don't use a splitview (like our phone app), and Kendo will automatically load the #remote-view-name and display it in the context of our application. But, with a splitview it doesn't work the same. It still loads the #remote-view-name and displays it in the application, but it completely ignores our splitview code and displays only that view (no left menu pane). Since the splitview isn't loaded, much of the rest of the site is broken.

I'm assuming that Kendo just doesn't know which pane to display the #remote-view-name in, it makes no assumptions, and just displays the view only outside of a splitview? Is there some way to do one of these direct links and tell it which pane to display the view in? like "/index.html#remote-view-name?target=contentPane" ?

SplitView

answered on 11 Dec 2013

1 answer

122 views

New Issue With "Back" Button

I know there's a previous thread with a couple "Back" button issues reported, but it's older and not sure it's related to this issue. So new thread.

If I use a parameter to filter a list, when I go "Back" to that list, the parameter is undefined. My app has two layouts, the phone layout doesn't have a splitview and the tablet layout does. This undefined parameter problem only happens on the tablet splitview layout, and the "Back" button behaves fine if it's not in the splitview.

I took the sample products from the demo, and moved all 3 views into the same pane so you can see what I mean. This standalone page illustrates the issue. If you pick a category, then pick a product, it will show you the product details. Hit "Back" and you will get a perpetual "loading..." because the "CategoryID" parameter is undefined when you go "Back".

This example doesn't contain any of my own code, just moved the views to the main pane.

<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="http://cdn.kendostatic.com/2013.3.1119/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>

</head>

<body>

<div data-role="splitview">

<div data-role="pane" data-layout="side-default" data-transition="slide">

<div data-role="layout" data-id="side-default" data-show="toggleBackButton">

<div data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

<div data-role="view" data-title="Empty Pane">

Empty Pane

</div>

<div data-role="pane" data-layout="main-default" id="main-pane">

<div data-role="view" data-title="Categories" id="side-root">

<ul data-role="listview" data-style="inset" data-source="splitViewCategories" data-template="categoriesTemplate">

</ul>

</div>

<script id="categoriesTemplate" type="text/x-kendo-template">

<a href="\#side-inbox?CategoryID=#: CategoryID#" data-target="main-pane">#: CategoryName #</a>

</script>

<script id="productsTemplate" type="text/x-kendo-template">

<a href="\#orders?ProductID=#: ProductID #" data-target="main-pane">

<span class="date">$#: UnitPrice#</span>

<h3>#: ProductName #</h3>

<span class="excerpt">#: QuantityPerUnit #</span>

</a>

</script>

<div data-role="view" id="side-inbox" data-title="Products" data-show="filterProducts">

<ul data-role="listview" data-auto-bind="false" data-source="splitViewProducts" data-template="productsTemplate">

</ul>

</div>

<script type="text/x-kendo-template" id="ordersTemplate">

<dl>

<dt>Discount</dt>

<dd>#: Discount #</dd>

<dt>Quantity</dt>

<dd>#: Quantity #</dd>

<dt>UnitPrice</dt>

<dd>#: UnitPrice #</dd>

</dl>

</script>

<div data-role="view" data-title="Orders" id="orders" data-show="displayOrder">

<div id="product-details">

</div>

<div data-role="layout" data-id="main-default">

<div data-role="header">

<div data-role="navbar">

<a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>

<span data-role="view-title"></span>

<a data-role="button" href="#index" data-align="right" data-target="_top">Index</a>

</div>

<script>

var categoryID = null;

var splitViewCategories = new kendo.data.DataSource({

type: "odata",

transport: {

read: "http://demos.kendoui.com/service/Northwind.svc/Categories"

}

});

var splitViewProducts = new kendo.data.DataSource({

type: "odata",

serverFiltering: true,

transport: {

read: {

url: "http://demos.kendoui.com/service/Northwind.svc/Products"

}

});

var splitViewOrderDetails = new kendo.data.DataSource({

type: "odata",

serverFiltering: true,

transport: {

read: {

url: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"

}

},

change: function () {

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

$("#product-details").html(kendo.render(template, this.data()));

}

});

function displayOrder(e) {

splitViewOrderDetails.filter({

field: "ProductID",

operator: "eq",

value: parseInt(e.view.params.ProductID)

});

splitViewOrderDetails.read();

}

function filterProducts(e) {

splitViewProducts.filter({

field: "CategoryID",

operator: "eq",

value: parseInt(e.view.params.CategoryID)

});

splitViewProducts.read();

}

function toggleBackButton(e) {

if (e.view.id === "#side-inbox") {

e.view.element.find("[data-role=backbutton]").css("visibility", "");

} else {

e.view.element.find("[data-role=backbutton]").css("visibility", "visible");

}

</script>

<style scoped>

#side-inbox .date {

float: right;

color: rgba(200,200,200,.8);

font-size: .7em;

font-weight: normal;

}

#side-inbox .excerpt {

clear: both;

font-size: .7em;

font-weight: normal;

}

#side-inbox .km-content h3 {

margin-left: 0;

}

#main-pane .km-content{

padding: 30px;

}

#main-pane dl {

float: left;

margin: 0;

padding: 0 0 20px 0;

}

#main-pane dl:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

#main-pane dt, #main-pane dd {

display: block;

float: left;

margin: 0;

padding: 0;

}

#main-pane dt {

clear: left;

text-align: right;

padding: 0 10px;

}

</style>

<script>

var app = new kendo.mobile.Application(document.body);

</script>

</body>

</html>

SplitView

answered on 10 Dec 2013

3 answers

213 views

Get current view of pane

Hi,

I am using a splitview with 2 panes, and throughout my mobile app would like to access the name of the view in the pane with ID "right-pane".

A simplified structure of my splitview can be seen below:

<div data-role="splitview">

<div data-role="pane" id="left-pane" data-layout="side-default" data-transition="slide">

<div data-role="layout" data-id="side-default" data-show="toggleBackButton">

</div>

<div data-role="view" id="lp_index" data-title="Smith & Co">

</div>

<div data-role="pane" id="right-pane" data-layout="main-default" data-navigate="onNavigate">

<div data-role="layout" data-id="main-default">

</div>

<div data-role="view" >

</div>

As you can see, the right-pane has a data-navigate property set to onNavigate, which is hooked up correctly. The contents of that function is as follows:

<script>

var app = new kendo.mobile.Application(document.body);

function onNavigate(e) {

alert($("#right-pane").data("kendoMobilePane").view());

}

</script>

When navigating around I get 2 alert boxes saying: "null" and "[object Object]".

I've probably been staring at the code too long and need a fresh pair of eyes to point out a silly mistake!

Thanks in advance.

SplitView

answered on 13 Sep 2013

3 answers

126 views

Issue with "Back" button

Hello,

I have used your example and I have found a problem with the button "back".
In your example on the left side of the screen there are categories. When is chosen a category, a list of products appears.
If I want to see the categories again, I have to press the button “back”.
The issue appears when I press the button "back" twice and after that I chose a category. When I chose a category, appears a list with products, but when I press the button “back” the button doesn’t work.
Steps:
1. Chose a category
2. Press the button "back" twice
3. Chose category again
4. See products
5. Press the button "back"
Result: User cannot go back in categories .

How could be avoid this case?

SplitView

answered on 22 Aug 2013

1 answer

286 views

Animation to hide/show the side panel

Hello,
Since the drawer does not support in-place navigation, I want to tweak the splitview to show/hide the sidepanel in manner similar to the drawer.
Can someone point me in the right direction? So far i have managed to get a quick,snap-in/out, action but I want something more soft, an animation of the side panel's width.

This is what I am using right now:
$("#main-pane").css("-webkit-box-flex","1000");
$("#main-pane").css("-webkit-flex","1000");
$("#side-pane").animate({ width: "-=350" }, 750);

Thanks

SplitView

answered on 22 Aug 2013

10 answers

162 views

Cannot open popOver or modalView from Splitview

To reproduce
Add splitview + headers + buttons in headers
connect buttons to popOver and splitView
they do not open.

SplitView

answered on 06 Aug 2013

2 answers

64 views

Split view navigation using Action Sheet

I am having trouble navigating the main-pane of a split view off of an action sheet on the left-pane.

http://jsbin.com/uguwug/1/edit

Is there something I am missing ?

Thanks

Robin

SplitView