Questions on Kendo UI for jQuery Forum

7 answers

270 views

Binding select event via MVVM

I have markup for a button group like the following:

<ul data-role="buttongroup" data-index="0" data-bind="select: deliveryMethodChanged">

<li>

Email

</li>

<li>

Download

</li>

</ul>

I'm trying to use the MVVM method to bind to the select event however I'm getting the following error in version 2013.2.716 at line 10373:
0x800a01bd - JavaScript runtime error: Object doesn't support this action

Am I missing something? Is it not possible to bind to the select event in this way?

Scott

ButtonGroup

answered on 27 Sep 2013

1 answer

240 views

How to execute the kendo window in a for loop to work like a Confirmation dialog box ?

Alert Box
<img src="~/Themes/Images/AlertQues.png" class="DeleIcon" />
<p>Data already exist with Date: <b><span id="rid">@ViewBag.ID </span></b><br /> Do you want to assign the
data anyway ?</p>
<br />
<br />
<div class="floRight">
<input type="button" value="Yes" class="k-button" id="ConApptYes" style="width:100px;" onclick="ConflictYes();" />
<input type="button" value="No" class="k-button" id="ConApptNo" style="width:100px;" onclick="ConflictNo();"/>
</div>

<script>
function ConflictYes()
{
debugger;
var a = document.getElementById('CIdVal').value;
var b = document.getElementById('FResIdVal').value;
document.getElementById('alertFlag').value="false";
b = b + "," + a;
var window = $("#conflictAlert").data("kendoWindow");
window.close();
}

function ConflictNo()
{
var window = $("#conflictAlert").data("kendoWindow");
window.close();
}
</script>

Javascript in Another View

for (var i = 0; i < cResId.length;
i++) {
document.getElementById('CIdVal').value = cResId[i];
doneflag='false'
var window = $("#conflictAlert").data("kendoWindow");
window.open();
window.center();
}

Requirement
After the Conflict Alert Open if the “Yes” or “No” button is clicked then only the loop have to start to run again for its next iteration. Else the loop should not execute for the next I value. The Kendo Window must act like a “Confirmation Dialog Box”

Example
if (confirm(Are you sure . Do you want to continue?')) {
// Save it!
alert("Yes");
} else {
// Do nothing!
alert("No");
}

Thanks
Mayil
[On Behalf of Jeremy Thompson]

Window

answered on 27 Sep 2013

1 answer

114 views

Does Kendo UI DataViz supports logarithmic value axis?

Hi all,
Does Kendo UI DataViz supports logarithmic value axis?
Example:
http://www.amcharts.com/javascript-charts/line-chart-with-logarithmic-value-axis/

Charts

answered on 27 Sep 2013

8 answers

121 views

Query state of editor

Hi,

I'm evaluating kendo.ui.editor for use embedded in an iOS app (js loaded locally into UIWebView).

A requirement is to use a native toolbar instead of the HTML-toolbar provided by Kendo.
The native toolbar needs to reflect the content of the text at the editing position (just like the html toolbar does),
and therefore I need to be able to query the editor for attributes about the text at the cursor position.
Things like "is the text bold", "what is the font and font-size", ...

I can't seem to find any methods to query this information in the documentation at http://docs.kendoui.com/api/web/editor.

What I'm looking for is basically the equivalent of TinyMce's queryCommandState (http://www.tinymce.com/wiki.php/api4:method.tinymce.EditorCommands.queryCommandState).

How can I query the kendo.ui.editor about it's state ?

Thanks.

Editor

answered on 27 Sep 2013

1 answer

90 views

seriesColors gradient?

Hi,
I am trying to replicate chart coloring similar to what can be seen in the following screenshot, where the starting color is blue and the end color is red. No matter how many data points are in between an equal gradient will be formed - this is done dynamically and can be applied to a chart with X number of bars.

Is this possible? I am using seriesColors at the moment but they don't automatically spread the gradient across the chart. If for example there are only 2 bars on a chart, one will show blue and the other red.

Hope this was explained ok, I do not want to hard-code seriessColors for each chart as these graphs are being displayed dynamically from a datasource.

Thanks,
Andrew.

General Discussions

answered on 27 Sep 2013

2 answers

154 views

Virtual scrolling with datasource paging unstable

Hello,

I'm using a kendo grid with scrollable: { virtual: true } with a kendo datasource with serverPaging.
This works fine when the grid is only used to read data, but i'm experiencing strange effects with CRUD operations on the datasource.
Especially when a datasource.cancelChanges() is called when the grid is on another page then the first page.
When I edit any of the model fields and decide to cancel the changes this is what happens:
- the Model.set has been called due to leaving the input (blur event)
- dataSource.cancelChanges will be called.
- dataSource jumps to first page.

Side effects:
- page data is out of sync and doesn't show the first row anymore.

It even gets weirder when I use dataSource.cancelChanges(myModel) when i'm on another page then the first page.
The entire row disappears from the grid which leaves the grid showing 14 rows instead of 15 (pageSize).

All in all the whole paging mechanism appears to be extremely buggy in a real world application (including CRUD operations.. etc)

Grid

answered on 27 Sep 2013

1 answer

81 views

navigator question

Is the navigator in the stock chart demo only available for the stock chart? If so is there any limitation of the stock chart that will prevent it from working with other time series based data (I am interested in the line chart)?

Thanks,

Jason

Charts

answered on 27 Sep 2013

1 answer

91 views

My API URL calls twice inside the model file.

I am using a view to load a project list after a success login. When a user land to the page after success login i am getting data from api inside a kendo datasource logic. When i see the console my api url call twice. I dont understand why its calling twice.

My index.html

<!DOCTYPE HTML>

<html>

<head>

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

<link href="css/main.css" rel="stylesheet" />

</head>

<body>

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

<header data-role="header">

<div data-role="navbar">

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

</div>

</header>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#home-view" target="_blank" data-icon="home">Home</a>

<a href="#login-view" data-icon="contacts">login</a>

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

</div>

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

<header data-role="header">

<div data-role="navbar">

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

<span data-role="button" data-bind="click: logout" data-align="right">Log Off</span>

</div>

</header>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#login-view" data-icon="contacts">login</a>

</div>

<div data-role="view" id="login-view" data-layout="account-layout" data-model="app.accountView.viewModel" data-init="app.accountView.navigate" data-before-show="app.accountView.navigate" data-title="Log In" style="display: none;">

<p>

For demonstration purposes Login example

</p>

<ul>

<li>

<strong>Username:</strong> owner

</li>

<li>

<strong>Password:</strong> p@ssword123

</li>

</ul>

<input type="text" placeholder="Username" data-bind="value: loginUsername" required data-required-msg="Enter a valid usernmae"/>

<input type="password" placeholder="Password" data-bind="value: loginPassword" required data-required-msg="Enter a valid password"/>

<input type="url" data-bind="value: serverURL" required data-url-msg="Enter a valid url for server"/>

<div type="button" data-role="button" data-bind="click: login">

Log In

</div>

<div data-role="view" id="home-view" data-layout="home-layout" data-title="Home" data-show="app.homeView.initializeHome">

<ul id="myProjectCustomListView"></ul>

</div>

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

<a href="projectDetail.html" id="${ProjectId}">

<h3 class="item-title">${ProjectName}</h3>

<p class="item-info">Created Date: ${CreateDate}</p>

</a>

</script>

<script data-main="scripts/main.js" src="scripts/require.js"></script>

</body>

</html>

My home-view.js

define(["jQuery", "kendo", "utils", "common"], function($, kendo, utils, common) {

return {

initializeHome :function() {

console.log("home view initialized")

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://127.0.0.1/api/getprojects",

dataType: "json",

cache: false

}

},

});

dataSource.fetch(function() {/** To check how many data are fetched like a total count for reference */

console.log(dataSource.view().length); // displays "77"

});

$("#myProjectCustomListView").kendoMobileListView({

dataSource: dataSource,

template: $("#myProjectCustomListViewTemplate").html(),

});

},

};

});

The above api is fetching the result and show correct, the only thing is it is called twice whenever i load this home-view. I have verified in the console firefox browser. Kindly help this what is the issue with run twice.

General Discussions

answered on 27 Sep 2013

2 answers

57 views

JQuery API - How to add Month view here.

Is there a link to get the API details for jquery?

<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
allDayEventTemplate: $("#event-template").html(),
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
isAllDay: true,
title: "Interview",
atendees: [1, 2]
}
],
resources: [
{
field: "atendees",
dataSource: [
{ value: 1, text: "Alex" },
{ value: 2, text: "Bob" }
],
multiple: true
}
]
});
</script>

Scheduler