Questions on Kendo UI for jQuery Forum

1 answer

71 views

ISSUE #1:

I tested and found you can not apply a badge with value of 0 (zero).
I can understand the original logic why - however it is problematic with dynamic updates of the value via jQuery. Instead of it disappearing it does nothing and leaves the old value.

<div id="foo" data-role="view">

<a data-role="button" data-badge="1" data-click="resetClicks">Reset Badge Count</a>

</div>

<script>

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

function resetClicks() {

this.badge(0); //set new badge value

}

</script>

You might consider adding another option flag: data-badge-showzeros to handle all possibilites of user needs. Some may want to show Zero values and other not.

Button (Mobile)

answered on 26 Nov 2013

1 answer

72 views

Badge: Issues (2 of 2)

ISSUE #2:

The way you implemented badges if you reset the badge value during a
page session it stacks the values on top of each other. Now if you use
false to turn it off it only turns off the last value.

http://jsfiddle.net/ccarns/vNfjK/

Here is the fiddle and steps to repo:

Step 1: Click "Set Count to 5"
Step 2: Click "Set Count to 10"
Step 3: Click "Set count to 0 Enhanced"

PS Using the latest version at the time:
v2013.3.1119

Button (Mobile)

answered on 22 Nov 2013

1 answer

26 views

Back Button not showing in 2013 Q2 or Q3 Beta

Hi,

The Back Button is not showing for 2013 Q2 or Q3 Beta. I have a simple test set up and the Back Button will not show unless I go back to Q1 for the
kendo.mobile.all.min.css stylesheet. If I add in the stylesheet from my Q2 or Q3 Beta download, the button does not show even though the link function is there - you just can't see it.

If I reference   <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" /> for the style sheet, the button is visible.

Can you confirm the issue?

As I mentioned before, I tried the js and css files from Q2 (v2013.2.918) and Q3 Beta (v2013.3.1030). The only thing that worked was pointing to the Q1 version of the style sheet on the CDN.

Below is my test page.

Thanks.

<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="js/kendo/jquery.min.js"> </script>
<script src="js/kendo/kendo.mobile.min.js"></script>
<link href="styles/kendo/kendo.mobile.all.min.css" rel="stylesheet" />
<style>
.no-backbutton .km-back { visibility: hidden; }
</style>
</head>
<body>
<div data-role="view" id="mt-home-main-view" data-title="Movie Tickets" data-show="homeViewInit" data-layout="mt-main-layout" class="no-backbutton">
Home Page View

</div>


<div data-role="view" id="mt-about-view" data-title="About" data-layout="mt-main-layout">
<div style="padding: 15px">
This is a sample application developed for the book
Building Mobile Applications using Kendo UI Mobile and ASP.NET Web API
</div>
</div>

<div data-role="layout" data-id="mt-main-layout">
<header data-role="header">
<div data-role="navbar">
<a data-align="center" data-role="backbutton">Back</a>
<span data-role="view-title">Movie Tickets</span>
</div>
</header>
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#mt-home-main-view">
<img src="images/movies.ico"
height="40" width="40" /><br />
Movies
</a>
<a href="Trailers.html">
<img src="images/trailers.ico" height="40" width="40" /><br />
Trailers
</a>
<a href="#mt-about-view" data-icon="about">
<br />
About
</a>
</div>
</footer>
</div>
<script>
var application = new kendo.mobile.Application(document.body,
{
transition: 'slide',skin:'flat'
});

console.log(application.view);

</script>
</body>
</html>

Button (Mobile)

answered on 20 Nov 2013

1 answer

45 views

IOS missing background

I'm using the following code to define a custom button background icon:
<style>
.km-root .km-pane .km-view .km-logo {
background-image: url(styles/images/icon40.png);
background-size: 100% 100%;
}
</style>

For some reason it only works on android. IOS shows a blank button. Any thoughts?

Also, is there any way to make the icon span the entire button? Or else to set the gray part to transparent?

Button (Mobile)

answered on 19 Nov 2013

2 answers

347 views

Set background image with Kendo Mobile buttons

Hi,

I am creating a Kendo Mobile SPA, but would like to separate the views into their own html files because there will be more than a few views. So I am using remote views.

With remote views, it looks like that in order for the <a> tag to work you need to supply it with a Kendo Mobile data-role either a button, tab strip or list. Examples:

<ul data-role="listview" data-style="inset" data-type="group">
            <li>Sources
                <ul>
                    <li><a href="#secondview">Local View</a></li>
                    <li><a href="remoteview.html">Remote View</a></li>
                </ul>
            </li>
        </ul>

Or

<a href="remoteview.html" data-role="button">Remote View</a>

Just using a regular link to a remote view like this will not work (Without the data-role, Kendo Mobile doesn't know to handle this as an ajax call to a remote view and just loads the html like it's a whole new page):

<a href="remoteview.html">Remote View</a>

I have images in my app that are touchable and will navigate to other views, so my idea to achieve the SPA with remote views is to use data-role of button and try to set the button background image to the image like this:

<a href="remoteview.html" data-role="button" style="background-color: white; color: black;"><img width="50%" src="images/Button.png" alt="image"><br/>Remote View</a>

Which doesn't work totally. The first time the button is displayed the image is really small—this navigates correctly to the remote view, however you have to navigate and then go back to see the button have the correct size.

Anyway, is there a better way to set a background image with the Kendo Mobile button?

Thanks,
Derrick

Button (Mobile)

answered on 06 Nov 2013

1 answer

590 views

dynamically generated anchor need to have onclick event

<!DOCTYPE html>
<html>
<head>
    <title></title>


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

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.mobile.min.js"></script>

    <script>
        var app = new kendo.mobile.Application($(document.body));    </script>
</head>
<body id="body">
    <div data-role="layout" data-id="search-layout">
    </div>
    <div id="searchView" data-role="view" data-layout="search-layout">
        <ul data-template="ul-template" data-bind="source: serviceTypeView">
        </ul>
        <script id="ul-template" type="text/x-kendo-template">
             <li>
                    Name: <span data-bind="text:ProductName"></span><br/>
                    ID: <span data-bind="text: ProductID"></span><br/>
                    Click here : <a id="button1" data-click="GetDistinct">#=ProductName#</a><br/><hr/><br/>
            </li>
        </script>
    </div>
     <div data-role="layout" data-id="result-layout">
    </div>
    <div id="resultView" data-role="view" data-layout="result-layout">
        <ul data-template="ul-template" data-bind="source: resultTypeView">
        </ul>
        <script id="res-template" type="text/x-kendo-template">
             <li>
                    Name: <span data-bind="text:ProductName"></span>
                    ID: <span data-bind="text: ProductID"></span>
                    <a id="button1" data-click="GetDetail">#=ProductName#</a>
            </li>
        </script>
    </div>
    <script>
        var serviceTypeDataSource;
        var viewModelService;
        $(window).load(function () {
            serviceTypeDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "http://demos.kendoui.com/service/Products"
                    }
                },
                change: function () {
                    viewModelService = kendo.observable({
                        serviceTypeView: [],
                        serviceTypeValue: {},
                        serviceTypeDisplayValue: function () {
                            return kendo.stringify(this.get("serviceTypeValue"));
                        }
                    }); //end of viewModel

                    viewModelService.serviceTypeView = serviceTypeDataSource.view();

                    kendo.bind("#searchView", viewModelService);
                }
            }); //end of DataSource

            serviceTypeDataSource.read();
        });

        var resultTypeDataSource;
        var viewModelResult;

        function GetDistinct(e) {
            resultTypeDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "http://demos.kendoui.com/service/Products"
                    }
                },
                change: function () {
                    viewModelResult = kendo.observable({
                        resultTypeView: [],
                        resultTypeValue: {},
                        resultTypeDisplayValue: function () {
                            return kendo.stringify(this.get("resultTypeValue"));
                        }
                    }); //end of viewModel

                    viewModelResult.serviceTypeView = resultTypeDataSource.view();

                    kendo.bind("#resultView", viewModelResult);
                }
            }); //end of DataSource

            resultTypeDataSource.read();

        }

        function GetDetail(e) {
            alert("detail");
        }
    </script>
</body>
</html>

In my above example I am trying to achieve the following.
1) I am first rendering the list of products inside a template which is under "search-layout". During this time I am generating anchor tags.
2) On clicking these anchor tag I want to generate another list using the function "GetDistinct()" and show them inside another layout "result-layout".

I have 2 problems.
1) Dynamically generated anchor tags does not emit click event and call GetDistinct function
2)How do I show the result of GetDistinct function inside "result-layout"
I have my code in http://jsbin.com/ebuhOLU/1/edit
Please help
jsbin.com/ebuhOLU/1
Thanks
Subbu

Button (Mobile)

answered on 21 Oct 2013

1 answer

227 views

redirect- url issue

hello
in my complete mobile web app i got the same problem wenn redirecting to a new site with click on a button

example:
iam on site: www.host.org/home/index
and i want to: www.host.org/mail/inbox

on click the button redirects to correct site but the url is now www.host.org/home/index#/mail/inbox

its no big thing, main features are still working, but i ran into some update and refresh issues. for example: after a redirect and creating of a this kind of a monster url badges on buttons are no longer displayed. even refresh don let them appear. only tiping the correct url fixes it.
i also have problems with login and out becouse of this kind of url

example for a button :
<a data-role="button" href="/projekte/index"> <img src="~/Content/images/icons/48x48/projekte48.png" /> Projekte </a>

or my "login button"
<a data-click="login" id="modalview-login-button" type="button" data-role="button">Login</a>
<script>
//...

$.ajax({
        type: "POST",
        url: webMethod,
        data: parameters,
        contentType: "application/json; chaset=utf-8",
        dataType: "json",
        success: function (data) { if (data.Success) { app.navigate("/home/index"); closeModalView(); } }
    });

//...
</script>

Button (Mobile)

answered on 24 Sep 2013

7 answers

342 views

BUTTON CLICK LOAD CONTROLLER IN JAVA SCRIPT

HELLO I HAVE APPLICATION MOBILE IN RAZOR ASP.NET

I HAVE HOMECONTROLLER WITH THIS ACTION

PUBLIC ACTIONRESULT HELLO()
{
RETURN VIEW()
}

I WANT TO CALL IT IN BUTTON CLICK
HOW CAN I DO????????
<script>
FUNCTIONCLICK (e)
{
//CALL home, hello???????????????????????????????????????????????
}
</script>

THANK YOU

Button (Mobile)

answered on 06 Sep 2013

3 answers

255 views

How to disable mobile button (suggestion)

In my project I need some buttons to disable. Many posts here and my support tickets telling that for the moment buttons cannot be disabled. I have a suggestion, because I think it is very simple.

If you make a button like <button>, it has attribute "disabled" and if this attribute is set click does not appear.
Second, for disabled buttons add some styling, and buttons are disabled:

.km-ios .km-button[disabled]{

color:#ccc;

cursor:default;

}

.km-ios .km-button[disabled]:active{

color:#ccc;

background-color:#7185A2;

box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);

-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);

cursor:default;

}

<button type="button" data-role="button" disabled="disabled">My button</button

Button (Mobile)

answered on 21 Aug 2013

1 answer

88 views

Badge on Button

Hi,

I have tried to add badge on buttons in my layout but failed...
Would you suggest how to do that?

One of the buttons is located in the navbar of the layout. Other buttons are located in the navbar of some of the views.
Thanks.

Button (Mobile)