Questions on Kendo UI for jQuery Forum

15 answers

780 views

[Solved] 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

219 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

59 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

123 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

96 views

[Solved] 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

208 views

[Solved] 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

1 answer

89 views

Kendo Update -- splitter causing problems

We have updated from Kendo v 2013.2.1002 to v 2013.3.1324 and views were we use the Kendo Splitter control no longer layout properly. We have confirmed that it is an issue with the splitter control as we have disabled the splitters and the view lays out properly. When using the 2013.2.1002 version the splitter caused no problems. We would like to know what has changed within the splitter control that we should be aware of to get it to behave properly.

Peter

Splitter

answered on 19 Feb 2014

2 answers

224 views

[Solved] View read-only template on Event selection

I have a scheduler configured for adaptive rendering and want to display a custom template on event selection as read-only, ie. if the user taps on an event, I want a custom template to display with more detail information about the event, like the editor template, but do no want allow creating, updating or destroying.

Is there a way to assign a template to the select event?

Thanks.

Scheduler

answered on 18 Feb 2014

4 answers

137 views

KendoUI + Angular js

Hi,

I'm using Angular js to build a single page app with controllers pulling data from remote services. On retrieval of the data I am trying to bind a treeview's dataSource to the retrieved data but am not having any joy.

I can build a Kendo treeview and populate it with static data but when I use an Angular controller to populate the data nothing happens; it's as if it's too late?

Has anyone done anything similar or does anyone know how to do it?

TreeView

answered on 18 Feb 2014