or
4 answers
150 views
Hi,
I'm using a webservice that returns me data that takes into account my local timezone (all their data is expressed in UTC, and they return me data adjusted to my timezone, so 2014-12-31T22:00:00.000Z for instance.
I'm using the "date" type for the category axis, but realized something strange, that depends on the actual interval (year, month, day...). It appears that for UTC dates, Kendo DataViz converts them to local dates. For instance, if I received hourly data, Kendo DataViz automatically shows them using an hourly format, and if I receive 2014-01-02T22:00:00.000Z, it's rendered as midnight on 03rd of january (I'm leaving in UTC+2). However, when dates are shown in monthly or yearly interval, it seems Kendo DataViz omits completely the conversion, so 2013-12-31T22:00:00.000Z is shown as 2013 year instead of 2014 (which is supposed to be the expected result in UTC+2).
Here is a simple gist that reproduces the issue: http://jsbin.com/mapif/4/
As you can see, the first graph that shows data on yearly basis, conversion is not done, while it's done in the other chart that shows data on hourly basis.
Thanks!
I'm using a webservice that returns me data that takes into account my local timezone (all their data is expressed in UTC, and they return me data adjusted to my timezone, so 2014-12-31T22:00:00.000Z for instance.
I'm using the "date" type for the category axis, but realized something strange, that depends on the actual interval (year, month, day...). It appears that for UTC dates, Kendo DataViz converts them to local dates. For instance, if I received hourly data, Kendo DataViz automatically shows them using an hourly format, and if I receive 2014-01-02T22:00:00.000Z, it's rendered as midnight on 03rd of january (I'm leaving in UTC+2). However, when dates are shown in monthly or yearly interval, it seems Kendo DataViz omits completely the conversion, so 2013-12-31T22:00:00.000Z is shown as 2013 year instead of 2014 (which is supposed to be the expected result in UTC+2).
Here is a simple gist that reproduces the issue: http://jsbin.com/mapif/4/
As you can see, the first graph that shows data on yearly basis, conversion is not done, while it's done in the other chart that shows data on hourly basis.
Thanks!
T. Tsonev
Telerik team
answered
on
08 Apr 2014
6 answers
146 views
I was going out of my mind trying to get the device orientation change to work on my (Verizon) Samsung Note 2.
I ended up with the attached code (that seems to work) and am posting to get feedback and help anyone else with the same struggle.
I started with the Kendo Mobile sample app, upgraded the files to 2014 Q1, added a NavBar to the header in the layout, and then added the following to the app.js:
I ended up with the attached code (that seems to work) and am posting to get feedback and help anyone else with the same struggle.
I started with the Kendo Mobile sample app, upgraded the files to 2014 Q1, added a NavBar to the header in the layout, and then added the following to the app.js:
01.(function (global) {02. var mobileSkin = "",03. app = global.app = global.app || {};04. 05. document.addEventListener('deviceready', function () {06. navigator.splashscreen.hide();07. $(document.body).height(window.innerHeight);08. }, false);09. 10. kendo.onResize(function () {11. setTimeout(function () {12. $(document.body).height(window.innerHeight);13. window.scrollTo(0, 0);14. }, 400);15. });
Petyo
Telerik team
answered
on
08 Apr 2014
1 answer
6.2K+ views
Hi,
I want to integrate Kendo grid with bootstrap responsive behavior. Below is my code, it did apply to the records column but did not apply to the column header.
In the below example I want the middle name column to be hidden when the screen size is Medium (Bootstrap breaks), the below code does make the columns invisible in case of resolution not large but it does not apply on the column header (Middle Name). Please let me know how I can achieve this.
HTML-
<div kendo-grid k-data-source="someDataSource" k-selectable="'row'"
k-pageable='{ "pageSize": 10, "refresh": true, "pageSizes": false }'
k-sortable="true", k-groupable="true", k-filterable="true" k-columns="gridColumns">
</div>
JS -
$scope.gridColumns = [
{ "field": "firstName", sortable: true, "title": "First Name" },
{ "field": "lastName", sortable: false, "title": "Last Name" },
{ "field": "middleName", sortable: false, "title": "Middle Name",
attributes: {
"class": "hidden-md visible-lg"
} }
];
I want to integrate Kendo grid with bootstrap responsive behavior. Below is my code, it did apply to the records column but did not apply to the column header.
In the below example I want the middle name column to be hidden when the screen size is Medium (Bootstrap breaks), the below code does make the columns invisible in case of resolution not large but it does not apply on the column header (Middle Name). Please let me know how I can achieve this.
HTML-
<div kendo-grid k-data-source="someDataSource" k-selectable="'row'"
k-pageable='{ "pageSize": 10, "refresh": true, "pageSizes": false }'
k-sortable="true", k-groupable="true", k-filterable="true" k-columns="gridColumns">
</div>
JS -
$scope.gridColumns = [
{ "field": "firstName", sortable: true, "title": "First Name" },
{ "field": "lastName", sortable: false, "title": "Last Name" },
{ "field": "middleName", sortable: false, "title": "Middle Name",
attributes: {
"class": "hidden-md visible-lg"
} }
];
Nikolay Rusev
Telerik team
answered
on
08 Apr 2014
1 answer
48 views
I am using Scheduler in Day view, horizontally grouped by Resource. Some events have time, some events are "all day" events. I need to able to drag event from All day slot to make them "timed" events and the other way around. How can I do that?
Alexander Popov
Telerik team
answered
on
08 Apr 2014
4 answers
44 views
I'm having trouble configuring the following:
Currently if the filter is turned on the user has to click the filter icon to show the filter options. I just need a "contains" filter but I would like the search box to appear by default( without having to click the filter icon). I'm hoping there's a configuration to make it appear below the header text. I also would like the contains filter to fire automatically after the user hits enter.
This seems pretty simple but I'm still having trouble finding the documentation. I'm using the html configurations in set up.
Currently if the filter is turned on the user has to click the filter icon to show the filter options. I just need a "contains" filter but I would like the search box to appear by default( without having to click the filter icon). I'm hoping there's a configuration to make it appear below the header text. I also would like the contains filter to fire automatically after the user hits enter.
This seems pretty simple but I'm still having trouble finding the documentation. I'm using the html configurations in set up.
9 answers
4.1K+ views
Hi,
Is there a demo application that demonstrates a best practice for detecting unauthenticated users so the application can point to a Login view or external page, and how to handle logging off?
This seems like it should be straight forward, but I'm having problems redirecting to different views properly.
Thanks,
King Wilder
Is there a demo application that demonstrates a best practice for detecting unauthenticated users so the application can point to a Login view or external page, and how to handle logging off?
This seems like it should be straight forward, but I'm having problems redirecting to different views properly.
Thanks,
King Wilder
Piyush Bhatt
Top achievements
Rank 2
Rank 2
answered
on
07 Apr 2014
1 answer
106 views
In our project, we do not use classes or attributes in our <body> tag.
We see that kendoui adds data-role="pane" to it.
When running the app on certain devices, unclear what they have in common, the output can become a white screen in 2 cases of 3.
When tapping on the screen, the app reveals itself.
In such a deadlock occasion, we sent a string with the entire DOM to the server, having a timer in the app that could make that possible.
We used $('html').html().
The resulting webpage was then cleared from script tags and viewed in a computer web browser to see what the phone actually tried to render.
(We put the resulting html file in a directory were the styles are).
Most of the output was gray, except the title bar that showed up clipped. It seems like a style tag has been added that sais:
A funny thing was that when we used firebug to disable the rule position: relative from .km-pane the page showed the missing content.
The webpage also shows when we remove the class km-pane from body.
When looking on examples, it seems like km-pane is used mosly for divs, not body tags.
How do they apply to body? How does position: relative make sense for body?
Is it possible to supress the addition of the km-pane class to body?
We see that kendoui adds data-role="pane" to it.
When running the app on certain devices, unclear what they have in common, the output can become a white screen in 2 cases of 3.
When tapping on the screen, the app reveals itself.
In such a deadlock occasion, we sent a string with the entire DOM to the server, having a timer in the app that could make that possible.
We used $('html').html().
The resulting webpage was then cleared from script tags and viewed in a computer web browser to see what the phone actually tried to render.
(We put the resulting html file in a directory were the styles are).
Most of the output was gray, except the title bar that showed up clipped. It seems like a style tag has been added that sais:
style> .km-view { clip: rect(0 1000px 1000px 0); }</style>A funny thing was that when we used firebug to disable the rule position: relative from .km-pane the page showed the missing content.
The webpage also shows when we remove the class km-pane from body.
When looking on examples, it seems like km-pane is used mosly for divs, not body tags.
How do they apply to body? How does position: relative make sense for body?
Is it possible to supress the addition of the km-pane class to body?
Kamen Bundev
Telerik team
answered
on
07 Apr 2014
2 answers
274 views
I can't seem to get the TimePicker to work in my ASP.NET MVC 5 application.
I get the error: The field Time must be a date
Any ideas what I'm doing wrong?
@(Html.Kendo().TimePicker().Name("Time").Value(DateTime.Today.AddHours(7)))I get the error: The field Time must be a date
Any ideas what I'm doing wrong?
King Wilder
Top achievements
Rank 2
Rank 2
answered
on
07 Apr 2014
5 answers
247 views
I have a webapp set up that I use a tree view to drag file names from and drop them on a diagram to use as a visual processing system (ETL). I have a working system and I pass the X and Y coordinates (from drop event) to the datasource (item.X, item.Y), which, when I drop the file onto the diagram space, puts the group (invisible with the yellow dots for connection points) in the top left corner, and the textBlock and Image (within the grouping) at the appropriate places based on the drop location. Is there a way to specify the X and Y coordinates for the Group as a whole?
1 answer
1.0K+ views
Hi,
My problem is getting colored series line in line chart and the colors should come from grouped datasource,
My json looks like this:
{"Color":"#CC0000","Id":1,"Legend":"Şube","Value":46,"XAxis":"Mart"},
{"Color":"#EC6E00","Id":13,"Legend":"Bölge Müdürlüğü","Value":42,"XAxis":"Haziran"},
{"Color":"#7F7F7F","Id":29,"Legend":"Genel Müdürlük","Value":20,"XAxis":"Temmuz"}.....
And my script is:
function createChart() {
var chartDataSource = new kendo.data.DataSource({
transport: {
read: {
url: function () {
return "http://bipoc:7777/Service.svc/GetBarChart";
},
dataType: "json"
}
},
group: {
field: "Legend",
}
});
$("#chart").kendoChart({
dataSource: chartDataSource,
series: [{
type: "line"
, field: "Value"
, name: "#= group.value # "
, colorField: "Color"
, groupColor: function (item) {
var series = item.series;
series.color = series.data[item.index].Color;
}
}],
legend: {
position: "bottom"
},
valueAxis: {
labels: {
format: "${0}",
skip: 2,
step: 2
}
},
categoryAxis: {
field: "XAxis",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
But by this way i get colored lines but boxes of the legends and tooltips retain the same with default colors (I've attached a screenshot of the result). What is wrong in my code? ANy help would be appreciated.
Thanks,
My problem is getting colored series line in line chart and the colors should come from grouped datasource,
My json looks like this:
{"Color":"#CC0000","Id":1,"Legend":"Şube","Value":46,"XAxis":"Mart"},
{"Color":"#EC6E00","Id":13,"Legend":"Bölge Müdürlüğü","Value":42,"XAxis":"Haziran"},
{"Color":"#7F7F7F","Id":29,"Legend":"Genel Müdürlük","Value":20,"XAxis":"Temmuz"}.....
And my script is:
function createChart() {
var chartDataSource = new kendo.data.DataSource({
transport: {
read: {
url: function () {
return "http://bipoc:7777/Service.svc/GetBarChart";
},
dataType: "json"
}
},
group: {
field: "Legend",
}
});
$("#chart").kendoChart({
dataSource: chartDataSource,
series: [{
type: "line"
, field: "Value"
, name: "#= group.value # "
, colorField: "Color"
, groupColor: function (item) {
var series = item.series;
series.color = series.data[item.index].Color;
}
}],
legend: {
position: "bottom"
},
valueAxis: {
labels: {
format: "${0}",
skip: 2,
step: 2
}
},
categoryAxis: {
field: "XAxis",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
But by this way i get colored lines but boxes of the legends and tooltips retain the same with default colors (I've attached a screenshot of the result). What is wrong in my code? ANy help would be appreciated.
Thanks,
Iliana Dyankova
Telerik team
answered
on
07 Apr 2014
