Questions on Kendo UI for jQuery Forum

3 answers

193 views

Kendo Area Chart showing incorrect chart

Hi,

I am using kendo chart to visualize some data.

The data looks like below:

my Kendo Code/chart code looks like below:

{

"timestamp": 1454664601000,

"strategyId": 14,

"count": 6

}

And here is the Kendo Javascript code to render the chart.

var messageRateData = new kendo.data.DataSource({

transport: {

read: {

url: "content/shared/message-rate-details.json",

dataType: "json"

}

},

sort: {

field: "timestamp",

dir: "asc"

},

group: {

field: "strategyId"

}

});

$("#chart10").kendoChart({

dataSource: messageRateData,

title: {

text: "Message Rate Details in 10 min interval"

},

legend: {

position: "top"

},

series: [{

type: "area",

stack: true,

field: "count",

name: "StrategyId #= group.value #"

}],

valueAxis: {

labels: {

format: "{0}"

},

line: {

visible: false

}

},

categoryAxis: {

field: "timestamp",

type: "date",

labels: {

format: "hh:mm:ss"

}

},

tooltip: {

visible: true,

format: "{0}"

}

});

However to my utter surprise I find that the data points is not displayed correctly for the first data-point. i.e. "03:00:01" for the given StrategyId.

Please find the screen shots below. Here the data and the plot is attached in the pic. the data point at timestamp : 1454664605000 (i.e. 03:00:05) should render two bars/areas (for strategyId 14 and 16), however it seems to be shifted to earlier time.

Ideally for timestamp :03:00:05, I should see two plots/bars for StrategyId 14 and StrategyId 16, however It seems to be shifted to earlier time viz "03:00:01 and 03:00:02 .

Any help/corrections/work around would be greatly appreciated.

Charts

answered on 22 Apr 2016

3 answers

112 views

Error when filtering grouped resource becomes empty

Hey,

So my scheduler has one resource which is grouped vertical. When I filter that resource so that no item in the resource is matched an error is thrown in the console: "Cannot read property 'timeSlotRanges' of undefined". Expected behavior should be no error and an empty scheduler view.

Example Dojo: http://dojo.telerik.com/iQEli (press the button 'filter')

Other thread about the same issue: http://www.telerik.com/forums/error-filtering-current-week-in-kendo-ui-scheduler

Scheduler

answered on 22 Apr 2016

1 answer

66 views

Kendo Charts (Area Charts) display wrong data

Hi, I was using the Kendo Chart for one of my projects and drawing charts for visualizing the data.

I have the following Kendo code to render the data given in this "message-rate-details.json" file.

The file

var messageRateData = new kendo.data.DataSource({

transport: {

read: {

url: "content/shared/message-rate-details.json",

dataType: "json"

}

},

sort: {

field: "timestamp",

dir: "asc"

},

group: {

field: "strategyId"

}

});

$("#chart10").kendoChart({

dataSource: messageRateData,

title: {

text: "Message Rate Details in 10 min interval"

},

legend: {

position: "top"

},

series: [{

type: "area",

stack: true,

field: "count",

name: "StrategyId #= group.value #"

}],

valueAxis: {

labels: {

format: "{0}"

},

line: {

visible: false

}

},

categoryAxis: {

field: "timestamp",

type: "date",

labels: {

format: "hh:mm:ss"

}

},

tooltip: {

visible: true,

format: "{0}"

}

});

Charts

answered on 22 Apr 2016

3 answers

848 views

AutoBind when data is needed

Is it possible that data is loaded from server when needed? That means when user open dropdownlist for the first time.

I have many dropdownlists on page (bind to remote data), but user select only few. So this would make a perfect sense.

DropDownList

answered on 22 Apr 2016

1 answer

276 views

Kendo Grid Cell template with enditable enabled

Hi,

I have a requirement to add column template for a kendo editable grid, I am able to render grid with column template but have couple of issues

1) when double click on a cell the editor textbox is opening and bind with model value but after editing is done the updated value is lost and not visible in grid

2) have paging enabled on when loads only the first page is displaying the data in templated columns but the other pages are not displaying the data for templated columns.

to demonstrate the issues made a @ http://plnkr.co/edit/0QXGS7?p=preview

Please suggest me how can solve those issue

Thanks In Advance,

Praneeth

Grid

answered on 22 Apr 2016

1 answer

214 views

Courser Pointer

Hello,

I want to show the pointer (hand) on the mouse over of country / Shape.
Is there easy way to add css on the basis of some criteria.
Or how to find the id or class from the "onShapeMouseEnter", here I got the e / e.shape.
With the reference of above how to add the css for pointer with jquery ?

Regards,
Ram.

Map

answered on 21 Apr 2016

2 answers

624 views

Both tooltips show when mouse move to 2 overlapping contents

This is an example: http://dojo.telerik.com/UnOJu

Have 2 DIVs, DIV 2 is inside DIV 1. Both have tooltip. When mouse move to DIV 2, both tooltips show up.

How can I let it only show tooltip for DIV 2 if mouse cursor is inside DIV 2, and show tooltip for DIV 1 if mouse cursor is inside DIV 1 but outside DIV 2?

Thanks,

Yong

ToolTip

answered on 21 Apr 2016

1 answer

285 views

Drag and Drop between Listviews

I needed to be able to edit arrays of objects. Not finding a working example I finally came across a flawed example, sort of, at www.codeproject.com/Tips/678743/Kendo-UI-Drag-Drop-between-Listviews-Step-by-Step by Nasir M@hmood. So, I built it in Dojo and fixed it to work for my purposes.

I needed the user to be able to move tags back and forth and have their array objects move back and forth as well. This does that.

I hope it can help other people.

It is attached as a zip file. I am also putting it into this message in case folks can't read the zip file.

Bon appétit.

Rick

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Drag and Drop between Listviews 07</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script></head>

<body>

<script type="text/x-kendo-tmpl" id="mappedtagtemplate">

<div style=""display:inline-block"">

<div class="tags k-block"> #:Name# </div>

</div>

</script>

<div style="padding:30px;">

<table>

<tr>

<td><h2>Unmapped Tags</h2></td>

<td><h2>Mapped Tags</h2></td>

</tr>

<tr>

<td>

<div id="unmappedtag_listview"

class="tagcontainer"></div>

</td>

<td>

<div id="mappedtag_listview"

class="tagcontainer"></div>

</td>

</tr>

</table>

</div>

<script>

var mappedtag_taglist = [{ "ID": 100, "Name":

"Razor View" }, { "ID": 101, "Name": "JQuery"},

{ "ID": 102, "Name": "MS Sql"},

{ "ID": 103, "Name": "My Sql"},

{ "ID": 104, "Name": "Ruby"},

{ "ID": 105, "Name": "SQL"}];

var mappedtag_datasource = new kendo.data.DataSource({

data: mappedtag_taglist

});

var unmappedtag_taglist = [{ "ID": 1,

"Name": "ASP.NET" },

{ "ID": 2, "Name": "Kendo UI"},

{ "ID": 3, "Name": "CSharp"},{ "ID": 4,

"Name": "Java Script"},

{ "ID": 5, "Name": "PHP"},{ "ID": 6,

"Name": "Java"},{ "ID": 7, "Name": "CSS"},

{ "ID": 8, "Name": "HTML"},{ "ID": 9,

"Name": "Unix"},{ "ID": 10, "Name": "Mac"}];

var unmappedtag_datasource = new kendo.data.DataSource({

data: unmappedtag_taglist

});

$("#mappedtag_listview").kendoListView({

dataSource: mappedtag_datasource,

template: '<div class="tags move k-block"> #:Name# </div>'

});

$("#unmappedtag_listview").kendoListView({

dataSource: unmappedtag_datasource,

template: '<div class="tags move k-block"> #:Name# </div>'

});

$("#mappedtag_listview").kendoDraggable({

filter: ".move",

hint: function (element) {

return element.clone();

}

});

$("#unmappedtag_listview").kendoDraggable({

filter: ".move",

hint: function (element) {

return element.clone();

}

});

$("#mappedtag_listview").kendoDropTarget({

dragenter: function (e) {

e.draggable.hint.css("opacity", 0.6);

},

dragleave: function (e) {

e.draggable.hint.css("opacity", 1);

},

drop: function (e) {

var item = unmappedtag_datasource.getByUid(e.draggable.hint.data().uid);

mappedtag_datasource.add(item);

unmappedtag_datasource.remove(item);

console.error("MappedTags", kendo.stringify(mappedtag_datasource.data()));

console.error("UnmappedTags", kendo.stringify(unmappedtag_datasource.data()));

}

});

$("#unmappedtag_listview").kendoDropTarget({

dragenter: function (e) {

e.draggable.hint.css("opacity", 0.6);

},

dragleave: function (e) {

e.draggable.hint.css("opacity", 1);

},

drop: function (e) {

var item = mappedtag_datasource.getByUid(e.draggable.hint.data().uid);

unmappedtag_datasource.add(item);

mappedtag_datasource.remove(item);

console.error("MappedTags", kendo.stringify(mappedtag_datasource.data()));

console.error("UnmappedTags", kendo.stringify(unmappedtag_datasource.data()));

}

});

</script>

<style>

.move

{

cursor: move;

}

.tagcontainer

{

float: left;

margin-left: 10px;

min-width: 400px;

min-height: 510px;

width: 400px;

}

.tagitemcls

{

width: 24px;

float: left;

margin-left: -18px;

margin-top: 10px;

padding-top: 6px;

padding-bottom: 8px;

padding-left: 2px;

}

.tags

{

margin: 10px;

padding: 10px;

float: left;

color: #000;

}

table > div

{

border:1px solid #CDCDCD;

}

</style>

</body>

</html>

Drag and Drop

answered on 21 Apr 2016

1 answer

147 views

Kendo Combobox automation using Coded UI

Hi All,

i am trying to automate kendo Combobox.

the issue i am facing is i am not able to identify the Combobox.

please let me know if we need to add any dlls for identifying kendo controls using coded ui.

i have written customized code using searchcollections which resulted in reading the values from the Combobox, but i am not able to select the value.

Could any one help me on this. working despirately on this from couple of days and not finding any solution.

Thanks in advance,

Siva Kumar.

ComboBox

answered on 21 Apr 2016

6 answers

210 views

Grid height on Chrome

Hello,

I'm having an issue with my grid height. It looks like the table content is not following the grid height.

The issue is not happening on IE or Firefox. It only happens at first loading. It disappear when I switch page or sort the table.

I'm working with Angular JS 1.5.3 and Angular Material 1.1 rc2.

Thank you very much.

Grid

answered on 21 Apr 2016