Questions on Kendo UI for jQuery Forum

5 answers

160 views

Hello, I have following issue with tooltips on Safari and Chrome (they are working properly on Firefox/IE). When I'm hovering bar from up to down the tooltip is displayed wrongly. When hovered from down to up, it is displayed correctly. See attahced screenshots:

Charts

answered on 06 Feb 2013

1 answer

330 views

Problem with Popover demo

Greetings - I'm just getting started with Kendo Mobile and am looking at using the Popover. I've tried reproducing your demo located here: http://demos.kendoui.com/mobile/popover/index.html. I've copied and pasted the HTML from your demo into a local MVC view (I made a couple of trivial changes to load jQuery and Kendo from their respective CDNs). The complete markup from my view is as follows:

<!DOCTYPE html>

<html>

<head>

<title></title>

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

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

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

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

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

</head>

<body>

<div data-role="view" data-title="Tag people" id="popover">

<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-align="right" data-rel="popover" href="#popover-people" data-role="button">Select people</a>

</div>

<div data-role="content">

<img src="http://demos.kendoui.com/content/mobile/shared/faces.jpg" />

</div>

<div data-role="popover" id="popover-people" data-popup='{"height": 230, "width": 350}'>

<div data-role="view" data-title="People">

<div data-role="header">

<div data-role="navbar">

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

<a data-role="button" data-align="right" data-click="closeParentPopover">Close</a>

</div>

<ul data-role="listview">

<li><label>Isabella Anderson<input type="checkbox"></label></li>

<li><label>Josh Anderson<input type="checkbox"></label></li>

<li><label>Linda Anderson<input type="checkbox"></label></li>

<li><label>Oliver Anderson<input type="checkbox"></label></li>

<li><label>James Williams<input type="checkbox"></label></li>

<li><label>Barbara Williams<input type="checkbox"></label></li>

</ul>

</div>

<div data-role="popover" id="popover-location" data-popup='{"height": 140, "width": 350}'>

<div data-role="view">

<ul data-role="listview" data-click="closeParentPopover">

<li><label>Sydney, Australia <input name="location" type="radio"></label></li>

<li><label>New York, USA <input name="location" type="radio"></label></li>

<li><label>Miami, USA <input name="location" type="radio"></label></li>

</ul>

</div>

<div data-role="footer">

<div data-role="navbar">

<a data-align="right" href="#popover-location" data-rel="popover" data-role="button">Select location</a>

</div>

<style scoped>

.km-ios #popover .km-view-title,

.km-ios #popover-people .km-view-title

{

color: #fff;

text-shadow: 0 -1px rgba(0,0,0,.5);

}

.km-ios #popover .km-navbar,

.km-root > * > #popover > .km-content

{

background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255, 255, 255, 0.35)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))) #000;

}

.km-ios #popover .km-navbar .km-button

{

background-color: #000;

}

</style>

<script>

function closeParentPopover(e) {

var popover = e.sender.element.closest('[data-role=popover]').data('kendoMobilePopOver');

popover.close();

}

</script>

<script>

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

</script>

</body>

</html>

A screenshot of what I see when I view the page is attached to this post.

Basically when the page loads, it appears as if the people popover is fully expanded and covers the entire page. Any insight as to what I'm missing would be much appreciated.

PopOver (Mobile)

answered on 06 Feb 2013

1 answer

140 views

auto update html grid

Hi,
first, im sorry for my bad english.

I have a grid and a model. I bind dataSource of grid to model.items.
but when i update model grid dont update

code:
$(document).ready(function(){
   var model=new MyModel();
   ko.applyBindings(model);
   $("#grid").kendoGrid({
      dataSource:{
         data:model.items(),
         pageSize:10
      },
      ...
   });
});

if i use bellow code all thing is ok. and when i update my model
grid update
<div data-bind="kendoGrid:{data:items}"></div>

Grid

answered on 06 Feb 2013

2 answers

313 views

Is there a way to set the keyboard focus to the DropDownList?

I just want to set the focus at the DropDown list of items, so if the user presses the up or down arrow in the keyboard, the selected item changes.

The only way I can do this is by clicking in the DropDownList arrow. How can I do the same with code?

Thanks...

DropDownList

answered on 06 Feb 2013

1 answer

136 views

Validation Confusion

I'm using Icenium to create a new mobile app with Kendo UI. I'm trying to learn to use form validation and I'm not having much success. I tried to copy the relevant code here:

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

Here are my issues/questions:

1. The Name field shows an error even if I type a name.
2. The checkbox required validation seems wonky in general.
3. Please look through and see if I am doing anything generally dumb.

Thanks.

Validation

answered on 06 Feb 2013

5 answers

185 views

[Solved] Filters not working in Server mode with Jquery 1.8.2

I have a grid where all the processing is fully server side. This all works fine when I use jquery 1.7, however when I use 1.8.2 the columns filters don't seem to be working.

The icon updates on a column to show it's filterable just when I click it nothing happens. I'm using the latest version of your controls. Has anything happened that may affect behaviour.

Since all my processing is server side it's difficult to provide an example.

Grid

answered on 06 Feb 2013

2 answers

120 views

ModalView doesn't open unless I have data-role="button"

<a href="#moreModalView" data-rel="modalview" id="moreButton" data-role="button">More...</a>

<div data-role="modalview" id="hoursModalView">

<div data-role="header" class>

<div data-role="navbar">

<span>More Info</span>

</div>

<p style="text-align:center; margin-top:10px;">Hours</p>

<a data-click="closeModalView" data-role="button" data-align="right">Close</a>

</div>

I have a ModalView as seen above. However, if I remove the data-role="button" from the link, clicking the link does not do anything. It actually prevents any scrolling and the back button in my header from working.
The ModalView div is inside the View div that the link is in.
This is all part of a Phonegap App.

Any ideas as to why this might happen?

ModalView

answered on 06 Feb 2013

3 answers

161 views

[Solved] Form Values - Not Getting Added to QueryString in Chrome, Firefox and Safari

In IE, the form value selections are being passed to the controller, but they are not passed in any other browser that I have tried. Why do my form values get used in IE but not in Chrome, Firefox or Safari?

My code is below:

HomeController.cs:

using KendoFilters.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace KendoFilters.Controllers

{

public class HomeController : Controller

{

public ActionResult Index(string nameDD)

{

var listFruits = new List<Fruit>

{

new Fruit { Name="Apple", Organic=true },

new Fruit { Name="Orange", Organic=true },

new Fruit { Name="Pear", Organic=true },

new Fruit { Name="Plum", Organic=false }

};

ViewBag.MyNameDDValue = nameDD;

return View(listFruits);

}

Index.cshtml:

@model IEnumerable<KendoFilters.Models.Fruit>

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>Index</title>

<link rel="stylesheet" href="~/Content/kendo.common.min.css">

<link rel="stylesheet" href="~/Content/kendo.default.min.css">

<link href="~/Content/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/jquery.min.js"></script>

<script src="~/Scripts/kendo.all.min.js"></script>

<script src="~/Scripts/kendo.aspnetmvc.min.js"></script>

</head>

<body>

<div>

<table>

@using (Html.BeginForm("Index", "Home", FormMethod.Get))

{

<tr>

<td>Environment

</td>

<td>

@(Html.Kendo().DropDownList()

.Name("nameDD")

.DataTextField("Name")

.DataValueField("Name")

.BindTo(Model)

)

</td>

<td style="width: 10px;"></td>

<td>

<input type="submit" value="Run Report" />

</td>

</tr>

}

</table>

<br /><br />

You Chose: @ViewBag.MyNameDDValue

</div>

</body>

</html>

DropDownList

answered on 06 Feb 2013

4 answers

116 views

[Solved] How to make a prompt on the icon of the TabStrip?

Hello,

I don't know how to make an icon in TabStrip like as in the following picture

http://i.imgur.com/9iSr4.png , like a new prompt.

sorry for my bad English.

TabStrip (Mobile)

answered on 06 Feb 2013

3 answers

212 views

Cosmetic scrolling problem during view transitions (iOS)

Hi - there is a cosmetic problem that the user can scroll the entire view (the layout?) while view transitions are happening. To see this happen - I started with the very useful example from Todd here: http://www.kendoui.com/forums/mobile/split-view/phone-vs-tablet.aspx#2192778 and put it in an absolutely minimal PhoneGap/Cordova boilerplate project by removing all their default .js and .css and replacing the bulk part of their index.html with the example above...

The only real changes I made to the "stock" Cordova setup are to remove the width=device-width and height=device-height from the meta tags because it appears to break view/tabstrip heights :( I also put in the fix from Kamen found here: http://www.kendoui.com/forums/mobile/tabstrip/tabstrip-ios-disappearing.aspx#1972286 or else I lost a few millimeters of the screen. So far so good.

Ok - so get that up and running. Then tap/click the one of the tab buttons and while the new screen is sliding in, tap/click again and drag up or down on the tab button you just clicked. The entire screen will scroll up or down. Looks really weird - doesn't break anything that I can tell :)

I'm using Kendo version: kendoui.complete.2012.3.1114.commercial with PhoneGap/Cordova (v2.2.0) on iOS (6.0 if it matters) for both the simulator and the device itself.

Here is my index.html just for completeness sake.

Cheers,
Stephen

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="format-detection" content="telephone=no" />

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

<link rel="stylesheet" href="styles/kendo.mobile.all.min.css"/>

<style>

body, html {

margin:0;

height:100%;

width:100%;

}

</style>

<title>Hello World</title>

</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">

LEFT

</div>

<div data-role="layout" data-id="leftLayout">

<div data-role="header">

<div data-role="navbar">

TEST APP

</div>

<div data-role="pane" id="right" data-layout="rightLayout">

<div data-role="view">

RIGHT

</div>

<div data-role="layout" data-id="rightLayout">

<div data-role="header">

<div data-role="navbar">

</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 data-role="footer">

<div data-role="tabstrip">

<a href="" data-icon="home">Home</a>

<a href="#about" data-icon="info">About</a>

</div>

<script src="cordova-2.2.0.js"></script>

<script>

if (typeof window._nativeReady === "undefined")

window._nativeReady = true;

</script>

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

<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 = (isTablet) ? $("#tabletApp") : $("#phoneApp");

appLayout = (isTablet) ? null : "phoneDefault";

app = new kendo.mobile.Application(appElement, {

layout: appLayout,

transition: 'slide'

});

//Adjust visibility of proper app container

appElement.show();

});

</script>

</body>

</html>

Application

answered on 06 Feb 2013