Questions on Kendo UI for jQuery Forum

2 answers

419 views

Hello,

I'm trying to implement a functionality that defines total number of axis divisions (by setting majorUnit dynamically) for Kendo chart.
In order to implement this functionality, I have to calculate the maximum value of the chart and divide this value by an integer number. This methodology is used for both drawing the chart and clicking on the legend items. There is a function that is called from dataBound function for drawing the chart and from onLegendClick for reading the max value according to the changes of chart.

In order to read the max value I have to read this value from $(chartID).data("kendoChart")._model._plotArea.children[0].charts[0].valueAxisRanges.undefined.max.
My first question question is that if there is a better way to get this maximum value of the chart?
My second question is that I have to use setTimeout function in order to read the value otherwise I'll get error so is there any other way of retrieving this maximum value without using timeout function?

I've created a sample project that is located at: http://jsfiddle.net/saes/8v8VT/

Thanks in advance,
Sam

Charts

answered on 10 Jan 2014

1 answer

579 views

validation

I need to know how to set validation on the mulitselect so that if no
items are selected, client and server side validation kicks in with
appropriate message. I am binding to a custom array list with text/value

MultiSelect

answered on 10 Jan 2014

4 answers

204 views

how to get data from json file

I am struggling to get json value,it's cannot display values
here my coding
display.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.default.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
<script type="text/javascript">
var queryString = new Array();
$(function () {
if (queryString.length == 0) {
if (window.location.search.split('?').length > 1) {
var params = window.location.search.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var key = params[i].split('=')[0];
var value = decodeURIComponent(params[i].split('=')[1]);
queryString[key] = value;
}
}
}
if (queryString["name"] != null && queryString["category"] != null && queryString["value"] != null) {
var name=queryString["name"];
var category=queryString["category"];
var value=queryString["value"];
alert(name+category+value);
}
});

function createChart() {
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
url: "data.json",
dataType: "json"
}
},
sort: {
field: "date",
dir: "asc"
}
},
title: {
text: "Spain electricity production (GWh)"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "column"
},
series:
[{
data:"value",
name: "Name"
}],
categoryAxis: {
field: "date",
labels: {
rotation: -90
}
},
valueAxis: {
labels: {
format: "{0:N0}"
},
majorUnit: 5000
},
tooltip: {
visible: true,
format: "{0:N0}"
},

});
}

$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
<div class="demo-section">

<div class="console"></div>
</div>
<style scoped>
.demo-section {
width: 700px;
}
</style>
</div>
</body>
</html>

//data.json

[
{
"month": "jan",
"date": 1,
"value": 3000,
"name": "p1"
},
{
"month": "jan",
"date": 3,
"value": 6000,
"name": "p1"
},
{
"month": "jan",
"date": 6,
"value": 8000,
"name": "p1"
},
{
"month": "jan",
"date": 1,
"value": 3000,
"name": "p2"
},
{
"month": "jan",
"date": 5,
"value": 3030,
"name": "p2"
},
{
"month": "jan",
"date": 8,
"value": 4000,
"name": "p2"
},
{
"month": "jan",
"date": 10,
"value": 3000,
"name": "p2"
},
{
"month": "jan",
"date": 10,
"value": 3400,
"name": "p1"
},
{
"month": "jan",
"date": 11,
"value": 7000,
"name": "p1"
},
]

Charts

answered on 10 Jan 2014

2 answers

103 views

using 2 flat data sources and combining for display

Hi

Is there a way that i can use 2 flat data sources to stitch together an editable screen that is fully supported for mvvm.

In my example i have countries and cities, city has a fk column to country. See fiddle example

Of course in the example it incorrectly lists all cities under each country as there is no filtering

Note :- I understand that this could be as a nested field of cities under country, but my remote data source doesnt support this, instead it gives me 2 flat result sets.

So i want to bind a div to the countries as my driving data, then from within each country template i want to bind another to the subset of cities for that country...

Its probably obvious... Any suggestions welcome

Thanks

Chris

MVVM

answered on 09 Jan 2014

12 answers

2.2K+ views

Best way to draw chart with dynamically changing data?

Hello,

We're evaluating tools for drawing data that will be dynamically changing (streams of data being pushed to the client). We tried setting up a page using the Kendo UI Graph. The data renders and updates, but the redraw is noticeably slow and flickers. We're currently calling the refresh() method on the chart to redraw after we append new values to the data source. Is there are more efficient method for redrawing streaming data or some parameters that affect the redraw behavior that I haven't been able to locate? For comparison, the Flot library for jQuery is noticeably smooth when rendering.

Thank you.

Charts

answered on 09 Jan 2014

1 answer

93 views

ValueTemplate property missing

I've tried to add a custom ValueTemplate to my DropDownList like it is described in the Kendo demo-section "Customizing Templates" -
http://demos.kendoui.com/web/dropdownlist/template.html

It seems that in the current release 2013.3.1119.340 the DropDownList-property ValueTemplate is missing. How do I accomplish a custom valueTemplate without this property? I'm using MVC Razor.

DropDownList

answered on 09 Jan 2014

6 answers

222 views

Kendo chart does not handle very small values

see fiddle http://jsfiddle.net/A2URt/

the kendo chart does not seem to handle very small values well. We included two examples one with very small values, the other one with a bit larger values. The edge case seems to lie in values 1.0e-7.

Can somebody help, explain etc?

Kind regards Dennis

Charts

answered on 09 Jan 2014

4 answers

340 views

Cancel checkbox parent click

Hello,
I have a need to cancel a checkbox check if the user has reached a limit. Unfortunately, simply calling preventDefault isn't working when the checked item is a parent. So I whipped up a little jQuery to handle this for me --

$("#treeview").on("click", ":checkbox", function (e) {

var treeView = $("#treeview").data("kendoTreeView");

origChecked = listChecked;

listChecked = [];

checkedNodeIds(treeView.dataSource.view(), listChecked);

if (searchLimited && listChecked.length > searchLimit) {

var newChecked = $(listChecked).not(origChecked).get();

$.each(newChecked, function (index, value) {

var item = treeView.dataSource.get(value);

item.set("checked", false);

});

e.preventDefault();

listChecked = origChecked;

}

});

// function that gathers IDs of checked nodes

function checkedNodeIds(nodes, checkedNodes) {

for (var i = 0; i < nodes.length; i++) {

if (nodes[i].checked) {

if (nodes[i].id != "0") {

checkedNodes.push(nodes[i].id);

}

if (nodes[i].hasChildren) {

checkedNodeIds(nodes[i].children.view(), checkedNodes);

}

I can see this works fine. If I put a breakpoint at the end, the treeview looks perfect. However, it appears that some other internal kendo event is firing after and resetting the items to a checked state. As I understood things, calling the set method should have been updating the underlying data for the treeview, so I didn't expect my changes to be overwritten... What am I missing?

Thanks,
Phil

TreeView

answered on 09 Jan 2014

4 answers

86 views

Build-in icons are not displayed when build the app in release mode

I am using the build-in icons all over my app which works fine when deploying the app in debug mode (build settings). But when I build the app in release mode non of the build-in icons is shown.

I am forcing the flat theme for the app.

General Discussions

answered on 09 Jan 2014

1 answer

130 views

Format number to IP number

Hi

I am trying to format number to IP format like 192.168.1.1 or 192.168.001.001

$("#ip4").kendoNumericTextBox({
format: "IP ###.###.###.###", /* works only if you input exact 12 numbers, works only if dot is thousand separator */
decimals: 0
});

This is not the right way!
I was searching kendo forum for text mask format but no luck. Does defining mask exists in kendo ?

Thx

By Ales

NumericTextBox

answered on 09 Jan 2014