Questions on Kendo UI for jQuery Forum

6 answers

612 views

I have an example page at the following URL that has the Kendo CSS files placed after my main CSS file but yet the Kendo CSS text-decoration: none in the k-button style is being overriden by my main CSS file. Shouldn't the Kendo's CSS rules override my main CSS rules since they are placed after the main CSS file in the header?

http://example.rengr.co

General Discussions

answered on 19 Feb 2014

1 answer

135 views

Kendo UI mobile scrollview and Dataviz chart problem.

Hi Kendo team!

We are using Kendo scrollview to switch between views. On one page, there is a HTML table with table rows (tr). The scenario is, when we click on a row, It appends another table row beneath it with Kendo chart.
The problem is, If we resize the page, while the chart is still open, it disturbs the scrolling directions. It becomes free to move in any direction.
Here is the problem video:

http://screencast.com/t/zrk8Jm3CD

Regards.

ScrollView (Mobile)

answered on 19 Feb 2014

1 answer

333 views

How to select all checkboxes in treeView

Hello
I have TreeView in ASP MVC project.
How to check all checkboxes in nodes after load tree view?

TreeView

answered on 19 Feb 2014

15 answers

716 views

how to edit a cells value when the editor is not focused on it

I am wondering if the is a way to edit the value of a cell when the editor template is not focus on that cell while using batch editing.

For example, I have a drop-down in column A and depending on what I select from that drop-down I will send "Selection 1" to Column B's cell.
This works fine when using inline editing, but when using batch editing the value is never passed.

Is this possible with the grid while in batch editing? If not is there a way to open the editor for the cell I want to add it to problematically?

Thanks

Grid

answered on 19 Feb 2014

1 answer

190 views

Display relations between models (many-to-one) in a list

Hello there !

I'm a super-noob here and my question may seems totally obvious for you guys but i'm totally lost and I'm here to find salvation :)

What I want to do ?

I want to display relation of my model in a list.

How am I trying to do so ?

I'm using the backend services to store my datas and I created two Types. One for my Recipes (I'm trying to create a recipes application) and another for my ingredients named Elements.
So, I created a Recipe called "Recipe 1" in which I linked 2 elements in a field name Elements.

Here is my Recipes table structure:

Id Identifier
CreatedAt Date
TimeModifiedAt DateTime
CreatedBy <-> Users Relation
ModifiedBy <-> Users Relation
Owner <-> Users Relation
Name Text
Elements <-> Elements Relation (multiple)

Now, I don't know how to retrieve Elements' names neither how to create my model..

<div id="status-container" class="user-status-wrp cf" data-role="listview" data-style="inset">

<div class="recipe-content">

<h2 id="recipeName" class="recipe-name" data-bind='text: Name'></h2>

<span id="activityDate" class="time-span" data-bind="text: CreatedAtFormatted"></span>

<ul data-bind="source: " data-template="elementsTemplate" data-role="listview" data-style="inset">

</ul>

</div>

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

<li data-role="touch">#:Id#</li>

</script>

/**

* Recipes view model

*/

var app = app || {};

app.Recipes = (function () {

'use strict'

// Recipes model

var recipesModel = (function () {

var recipeModel = {

id: 'Id',

fields: {

Name: {

field: 'Name',

defaultValue: ''

},

CreatedAt: {

field: 'CreatedAt',

defaultValue: new Date()

},

Elements : {

field: 'Elements',

defaultValue: '',

type: 'relation'

}

},

CreatedAtFormatted: function () {

return app.helper.formatDate(this.get('CreatedAt'));

}

};

// DataSource by Everlive

var recipesDataSource = new kendo.data.DataSource({

type: 'everlive',

schema: {

model: recipeModel

},

transport: {

// Nom du Model

typeName: 'Recipes'

},

change: function (e) {

if (e.items && e.items.length > 0) {

$('#no-span').hide();

} else {

$('#no-span').show();

}

},

sort: { field: 'Name', dir: 'asc' }

});

return {

recipes: recipesDataSource

};

}());

// Recipes view model

var recipesViewModel = (function () {

//Affichage d'une recette

var recipeSelected = function (e) {

app.mobileApp.navigate('views/recipeView.html?uid=' + e.data.uid);

};

return {

recipes: recipesModel.recipes,

recipeSelected: recipeSelected,

};

}());

return recipesViewModel;

}());

I know there is something wrong somewhere but I can identify exactly what and where...

Also, I don't know if I just explained my problem properly but ask me anything about my code if it's needed.

Thanks for reading !

ListView (Mobile)

answered on 19 Feb 2014

10 answers

1.9K+ views

stuck in DataSource error handler

I'm sure this is pretty simple, but it seems I can't figure it out and I'm also not able to find any example on this.

I'm using a HierarchicalDataSource together with a ListView. Inside the schemas error event, I'd like to navigate to an app-global login page in case the server returns an 401 error. Now it seems I'm stuck in this event, since no matter what I do in there, I can't get to another page. I tried e.preventDefault() (not sure if it makes much sense there) as well as dataSource.cancelChanges() (which will only stop the loading animation).

categories: new kendo.data.HierarchicalDataSource({
            schema: {
                errors: "error"
            },
            error: function(e) {
                if (e.errorThrown == "Unauthorized") {
                    // ...navigate("#login");
                }
            }
})

Thanks for any hints on this.

Data Source

answered on 19 Feb 2014

1 answer

43 views

IOS (iPad / iPad mini ) full screen.

Hi can i ask some on how to make the layout 100% height in HTML5, as when we're browsing the page on ipad, we can't set the scroller to 100%, it wont apply.

If you can give me sample code, that would be great.

Thanks in advance..

General Discussions

answered on 19 Feb 2014

3 answers

108 views

Apple failed my app because of non-public API use

Hi there,

I recently tried uploading my app (built with AppBuilder) for the first time to the Apple store. After reviewing the app Apple replied with the following:

We found that your app uses one or more non-public APIs, which is not in compliance with

the App Store Review Guidelines. The use of non-public APIs is not permissible because it can lead to a poor user experience should these APIs change.

We found the following non-public API/s in your app:

_canShowMIMEType:

webView:decidePolicyForMIMEType:request:frame:decisionListener:

I requested extra information from Apple what may cause this error, but they told me to contact Telerik for help instead. My app uses no custom plugins, only the standard plugins that Telerik has already provided. That means it's pure html/css/javascript. As the html is shown within a browser control inside a native app, my guess would be this has something to do with the tool itself.

If anyone has had this same problem before, please let me know how you (hopefully!) solved it.

Kind regards,

Aidan Langelaan

General Discussions

answered on 19 Feb 2014

1 answer

84 views

Enter to link navigate

Hello
When I'm using panel bar with keybora I can expoand/collapse without problem, but when I'm selecting element which has link inside and press enter nothing is happening. How to navigate to the panel bar link?

example code

<ul>

<li>

<a href="/Report/Dashboard"> <i class="fa fa-dashboard"></i> Dashboard </a>

</li>

</ul>

PanelBar

answered on 19 Feb 2014

3 answers

147 views

I need to clic twice on tabstrip to activate the view [VIDEO]

Hi,

I've a little problem. I'm using the TabStrip and i need to clic twice on tabstrip to activate the view or press F5 to refresh the page. I posted a video to see the problem.

http://www.youtube.com/watch?v=z8GkVn8QGB0

please your help.

I posted part of the source:

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>Dashboard</title>

<meta name="author" content="">

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

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

<link href="view/theme/css/kendo.common.min.css" rel="stylesheet" />

<link href="view/theme/css/kendo.rtl.min.css" rel="stylesheet">

<link href="view/theme/css/kendo.default.min.css" rel="stylesheet">

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

<link href="view/theme/css/kendo.mobile.exported.css" rel="stylesheet" />

</head>

<body>

<div data-role="layout" data-id="mobile-view">

<header data-role="header">

<div data-role="navbar">

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

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

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

</div>

</header>

</div>

<div data-role="view" id="tabstrip-home" data-title="General" data-layout="mobile-tabstrip">

<div class="head"> </div>

<ul data-role="listview" data-style="inset" data-type="group">

<li>

Overview

<ul>

<li>Total Sales:<span class="sales-up">$15,436</span></li>

<li>Total Sales This Year:<span class="sales-up">$15,436</span></li>

<li>Total Orders:<span class="sales-up">3</span></li>

<li>No. of Customers:<span class="sales-up">1</span></li>

<li>Customers Awaiting Approval:<span class="sales-up">0</span></li>

<li>Reviews Awaiting Approval:<span class="sales-up">0</span></li>

<li>No. of Affiliates:<span class="sales-up">0</span></li>

<li>Affiliates Awaiting Approval:<span class="sales-up">0</span></li>

</ul>

</li>

</ul>

<ul data-role="listview" data-style="inset" data-type="group" class="inboxList">

<li>

Latest 10 Orders

<ul>

<li>

<a data-rel="external" href="product?order_id=3">

<h3 class="time">Orlando Jerez</h3>

<h3>14/02/2014</h3>

<h3>$15,005</h3>

<p>14/02/2014</p>

</a>

</li>

<li>

<a data-rel="external" href="product?order_id=2">

<h3 class="time">Orlando Jerez</h3>

<h3>11/02/2014</h3>

<h3>$106</h3>

<p>11/02/2014</p>

</a>

</li>

<li>

<a data-rel="external" href="product?order_id=1">

<h3 class="time">Orlando Jerez</h3>

<h3>11/02/2014</h3>

<h3>$325.00</h3>

<p>11/02/2014</p>

</a>

</li>

</ul>

</li>

</ul>

</div>

<div data-role="view" id="tabstrip-sales" data-title="Profile" data-layout="mobile-tabstrip">

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul>

<li>

<h2>Sales <span>page</span></h2>

<img src="../../content/mobile/overview/carine.jpg" />

</li>

</ul>

</li>

</ul>

</div>

<div data-role="view" id="tabstrip-config" data-title="Profile" data-layout="mobile-tabstrip">

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul>

<li>

<h2>Config <span>page</span></h2>

<img src="../../content/mobile/overview/carine.jpg" />

</li>

</ul>

</li>

</ul>

</div>

<style>

.inboxList

{

font-size: .8em;

}

.inboxList p,

.inboxList h2,

.inboxList h3

{

margin: 5px 2px;

}

.inboxList p,

.inboxList h3

{

color: #777;

}

.inboxList h3.time

{

color: #369;

float: left;

margin-right: 10px;

}

</style>

<style>

.km-ventas:after,

.km-ventas:before

{

content: "\e09c";

}

.km-total:after,

.km-total:before

{

content: "\e086";

}

</style>

<div data-role="layout" data-id="mobile-tabstrip">

<header data-role="header">

<div data-role="navbar">

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

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

<a data-align="right" data-role="button" class="nav-button" href="#index" data-icon="refresh"></a>

</div>

</header>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#tabstrip-home" data-icon="recents">General</a>

<a href="#index.php?route=catalog/product&token=5f7d94ff10d1569f07d17e5caba9c82d" data-icon="cart">Catalog</a>

<a href="#tabstrip-sales" data-icon="bookmarks">Sales</a>

<a href="#tabstrip-config" data-icon="settings">Settings</a>

</div>

<style scoped>

#tabstrip-home .head {

display: block;

margin: 1em;

height: 110px;

background: url(images/logo.jpg) no-repeat center center;

-webkit-background-size: 100% auto;

background-size: 100% auto;

}

.km-ios #tabstrip-home .head {

-webkit-border-radius: 10px;

border-radius: 10px;

}

</style>

<style scoped>

#tabstrip-home h2 {

display: inline-block;

font-size: 1.1em;

margin: 1.5em 0 0 .7em;

}

#tabstrip-home h2 span {

display: block;

clear: both;

font-size: 1.8em;

margin: .1em 0 0 0;

}

#tabstrip-home img {

width: 5em;

height: 5em;

float: left;

margin: 1em;

border: 1px solid rgba(0,0,0,.2);

-webkit-border-radius: 4em;

border-radius: 4em;

}

.sales-down,

.sales-hold,

.sales-up,

.value {

float: right;

}

.sales-up { color: green; }

.sales-down { color: red; }

.sales-hold { color: blue; }

.value { color: #bbb; }

</style>

<script>

new kendo.mobile.Application($(document.body), {

// platform: "ios", //Platform can be one of "ios", "ios7", "android", "blackberry", "wp", "meego"

skin: "flat",

transition: "slide",

hideAddressBar: true,

serverNavigation: false,

loading: "<h1>Cargando...</h1>"

});

</script>

</body>

</html>

TabStrip (Mobile)

answered on 19 Feb 2014