Questions on Kendo UI for jQuery Forum

1 answer

198 views

Scatter line with multi axis for grouped data

Hi

I am attempting to build a scatter line for grouped data and multi-axis from a remote source. Each grouped series is rendering to each Y-axis.

Group S1 should render to X & Y1 axis
Group S2 should render to X & Y2 axis

What is actually happening is:
Group S1 & S2 are rendering to X & Y1 axis
Group S2 & S2 are rendering to X & Y2 axis

Is it possible to render groups to specific axis?

var stocksDataSource = new kendo.data.DataSource({

transport: {

read: {

url: function () {

return <%= url %>;

},

dataType: "json"

}

},

group: {

field: "GroupId"

},

sort: {

field: "X1",

dir: "asc"

},

schema: {

model: {

fields: {

X1: {

type: "date"

}

});

function createChart() {

$("#chart").kendoChart({

title: { text: "Stock Prices" },

dataSource: stocksDataSource,

series: [{

type: "scatterLine",

xField: "X1",

yField: "Y1",

yAxis: "abc",

name: "Y1",

groupNameTemplate: "#= group.value # (#= series.name #)"

},

{

type: "scatterLine",

xField: "X1",

yField: "Y2",

yAxis: "torque",

name: "Y2",

groupNameTemplate: "#= group.value # (#= series.name #)"

}],

legend: {

position: "bottom"

},

yAxes: [{

name: "abc",

title: {

text: "Power (bhp)"

}

}, {

name: "torque",

title: {

text: "Torque (lb-ft)"

}

}],

xAxis: {

labels: {

format: "dd MMM yy"

}

});

}

$(document).ready(function () {

setTimeout(function () {

// Initialize the chart with a delay to make sure

// the initial animation is visible

createChart();

$("#example").bind("kendo:skinChange", function (e) {

createChart();

});

}, 400);

});

Data:

[{"X1":"2012-01-20T00:00:00","Y1":100.0,"GroupId":"S1"},{"X1":"2013-01-02T00:00:00","Y1":110.0,"GroupId":"S1"},{"X1":"2013-01-03T00:00:00","Y1":110.0,"GroupId":"S1"},{"X1":"2013-01-03T00:00:00","Y1":110.0,"GroupId":"S1"},{"X1":"2013-01-03T00:00:00","Y1":110.0,"GroupId":"S1"},{"X1":"2013-01-04T00:00:00","Y1":120.0,"GroupId":"S1"},{"X1":"2013-01-05T00:00:00","Y1":130.0,"GroupId":"S1"},{"X1":"2013-01-06T00:00:00","Y1":140.0,"GroupId":"S1"},{"X1":"2013-01-10T00:00:00","Y1":150.0,"GroupId":"S1"},{"X1":"2013-01-01T00:00:00","Y2":1.0,"GroupId":"S2"},{"X1":"2013-01-02T00:00:00","Y2":2.0,"GroupId":"S2"},{"X1":"2013-01-03T00:00:00","Y2":3.0,"GroupId":"S2"},{"X1":"2013-01-03T00:00:00","Y2":4.0,"GroupId":"S2"},{"X1":"2013-01-03T00:00:00","Y2":5.0,"GroupId":"S2"},{"X1":"2013-01-04T00:00:00","Y2":6.0,"GroupId":"S2"},{"X1":"2013-01-05T00:00:00","Y2":7.0,"GroupId":"S2"},{"X1":"2013-01-06T00:00:00","Y2":8.0,"GroupId":"S2"},{"X1":"2013-01-07T00:00:00","Y2":9.0,"GroupId":"S2"}]

Charts

answered on 11 Jul 2013

2 answers

192 views

How to manually initialize AutoComplete while loading instead of automatic loading.

Hello,

I am using Auto complete inside a form. When the form returns Kendo UI AutoComplete remembers the last input value and fills it in. But I would like to initialize it manually (in the code) instead. I tried setting the value to a variable but failed. Setting Autobind(false) did not work either.

Can you give me an example in Razor please?

I also like to do the same for dropdownlist and datepicker.

Thanks,

AutoComplete

answered on 10 Jul 2013

0 answers

90 views

[Solved] Trying to display data in chart coming from WCF service?

I'm using the same code as the kendoui demo, but with a WCF service instead of JSON. But the data is not being displayed.

The method call is returning exactly the same data as [spain-electricity.json] used in your demo. In my case it's http://localhost:4916/Service1.svc/getList and it displays exactly the same thing in the browser.

My IService1 interface looks like this:
[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Json)]
IList<myStruct> getList();

The method looks like this:
public IList<myStruct> getList()
{
IList<myStruct> StructSpain = new List<myStruct>();
StructSpain.Add(new myStruct
{
country = "Spain",
year = "2008",
unit = "GWh",
solar = 2578,
hydro = 26112,
wind = 32203,
nuclear = 58973
});
...
return StructSpain;
}

My html looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.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 absConf">
<div class="chart-wrapper" style="margin: auto;">
<div id="chart"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
type:"post",
url: "http://localhost:4916/Service1.svc/getList",
dataType: "json"
}
},
sort: {
field: "year",
dir: "asc"
}
},
title: {
text: "Spain electricity production (GWh)"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "area"
},
series: [{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name: "Hydro"
}, {
field: "wind",
name: "Wind"
}],
categoryAxis: {
field: "year",
labels: {
rotation: -90
}
},
valueAxis: {
labels: {
format: "N0"
},
majorUnit: 10000
},
tooltip: {
visible: true,
format: "N0"
}
});
}

$(document).ready(function() {
setTimeout(function() {
createChart();

// Initialize the chart with a delay to make sure
// the initial animation is visible
}, 400);

$(document).bind("kendo:skinChange", function(e) {
createChart();
});
});
</script>
</div>
</body>
</html>

General Discussions

asked on 10 Jul 2013

4 answers

155 views

what CSS settings would remove this outline rectangle from grid which has been put on a panelBar

The grid is on a panelBar. In configuration of the grid, grid height is set to 444px. PanelBar height is also set to 444px in its configuration:

When the grid is rendered, there is an outline rectangle in gray, and the grid's rows "spill over" it. Please see attached screen shots. I would like the outline either not to be visible or to be at the same location as the top of the grid footer rectangle.

What CSS settings do I need to change to fix that issue? How to set the grid's height so it occupies 100% of the panelBar's content pane?

Grid

answered on 10 Jul 2013

1 answer

255 views

[Solved] Refresh all charts on-screen

Hi guys

As we know, there's a problem with Kendo UI charts (and gauges and other widgets) being rendered that are underneath tabs. On load, the chart is unable to detect the size of it's parent container and defaults to 600 width.

So as a workaround, I'd like to bind an event to my tabs (Bootstrap NavBar) that refreshes EVERY Kendo UI chart/gauge etc onscreen at once. This code will go into a controller that will control multiple dashboards with configurable charts - so it's impossible to know ahead of time the IDs of the charts, or the count. There may be no charts, or 50.

That means I need some method of retrieving all Kendo UI objects (or all charts, all gauges, whatever) on the screen at once, preferably as an array so that I can iterate through this array and call refresh() on them.

The pages are being generated by PHP, so I don't have any selectors available. I'd like to place this code onto the bottom of the template so it's a 'drop-in', if possible.

I tried looking at the common classes, such as k-chart, when but I pushed that into a jQuery selector I was unable to call refresh().

Does anyone have any ideas on how I might accomplish this?

Charts

answered on 10 Jul 2013

1 answer

81 views

ShowOn configurations breaks when AutoHide is set to "False"

When "AutoHide" is set to False, the ShowOn configuration only delays the display of the tooltip.

Expected functionality is that ShowOn will prevent the display of the tooltip until it has been hovered over for the specified interval.

How can I achieve the expected functionality?

ToolTip

answered on 10 Jul 2013

1 answer

105 views

[Solved] Typo in CSS?

Hi,

I was creating a list with inset style and I realized the last element of the list hasn't bottom border. After checking the CSS (http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css) I saw this:

.km-meego .km-listgroupinset .km-list>li:last-child{border:1 ps solid rgba(0,0,0,0.2);

There is not any other ps in the CSS and I never have seen something like that, maybe is a typo? And if not, why there is not bottom border?

General Discussions

answered on 10 Jul 2013

7 answers

618 views

List View data-click event returns e with undefined dataItem properties

Hi,
I've been having trouble getting at the data associated with a list view item. In the event handler for the data-click event event I get an event parameter that doesn't seem to have any of the properties referenced in the sdk. Only the data-item property is undefined.

onLibraryItemClick e:[object Object]
06-26 13:01:29.439 1203-1203/com.verbum.wordhose.android I/Web Console: app: onLibraryItemClick e:onLibraryItemClick e.item:[object Object]
06-26 13:01:29.459 1203-1203/com.verbum.wordhose.android I/Web Console: app: onLibraryItemClick e.target:[object Object] at :2
06-26 13:01:29.459 1203-1203/com.verbum.wordhose.android I/Web Console: app: onLibraryItemClick e.dataItem:undefined at :2

The weird thing is that I am able to add new items to listview and they render correctly. So the template seems to be wired up correctly.

The related HTML is:

<div id="libraryPage" data-role="view" data-layout="appLayout" data-title="library" data-init="initLibraryListView">

<p id="wh_status">disconnected</p>

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

<ul id="library-listview"

data-role="listview"

data-init="initLibraryListView"

data-click="onLibraryItemClick">

</ul>

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

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

<p class="item-info">Text Status Data Here</p>

</script>

</div>

The click event JS is:

function onLibraryItemClick(e) {

console.log("app: onLibraryItemClick e:" + e);

console.log("app: onLibraryItemClick e.item:" + e.item);

console.log("app: onLibraryItemClick e.target:" + e.target);

console.log("app: onLibraryItemClick e.dataItem:" + e.dataItem);

//console.log("app: onLibraryItemClick e.target:" + JSON.stringify(e.target));

_CurrentTextData = e.dataItem;

//console.log("app: e.dataItem.Title=" + e.dataItem.Title);

};

And the code that adds the json item to the dataSource is:

_LibraryListViewDataSource.add(sampleText);

Like I said, items get added and rendered correctly in the listview itself, but there's no associated dataItem.

Help :) ?

Thanks.

ListView (Mobile)

answered on 10 Jul 2013

1 answer

239 views

Date Picker changing width on mouse hover, causing table contents to shift

I've got a simple table with text in the left column cells, and inputs in the right. The first time the mouse hovers over a Date Picker in the right column, all the contents of the left column shift to the left by a few pixels. It appears that the Date Picker is slightly changing its width on hover.

I've tried adding a margin and padding on the cell with the Date Picker, to no avail.

DatePicker

answered on 10 Jul 2013

1 answer

237 views

Delete listview item using rowdelete detail button, and change the icon style when rowdelete button is clicked

Hi

I would like to achieve similar UI behaviour as IPhone when delete a item from a list, and want to show different icon when rowdelete button is clicked, but not idea how to achieve this using kendo mobile. could someone please assist me? thanks.

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

<a data-role="listview-link">
<span><a data-role="detailbutton" id="wordRowDelete" data-style="rowdelete" data-bind="click:delete"></a></span>
${name}
</a>
#= renderWordDefinitionsTemplate(data) #
</script>

in the above code snippet, I have binded the click event to a delete function. In the delete function, I want to show different icon, and also show the "Delete" button on the right position.

Cheers

ListView (Mobile)

answered on 10 Jul 2013