Questions on Kendo UI for jQuery Forum

5 answers

168 views

I have angular kendo setup in my web app and it runs GREAT! (Bit of a learning curve but that's how things go). I want to know test that directives i've written work properly and would LOVE to be able to test the with the kendo directives i'm looking for.
Now for the code

resize-directive.js

01.app.directive("ibsResizeGraphDirective", ['$window', function ($window) {

02. return function (scope, element) {

03. //Bind to window resize so that we can have the elements respond.

04. //There is no element.resize event and watching for width change doesn't work

05. angular.element($window).bind('resize', function () {

06. scope.$apply();

07. });

08.

09. //Watch for element.width() change

10. scope.$watch(function () {

11. return $(element).width();

12. }, function (newValue, oldValue) {

13. if (newValue != oldValue) {

14. scope.graph.options.chartArea.width = $(element).width();

15. // Turn off transitions so that the graphs don't redraw everytime the window changes

16. if (oldValue != 0 && scope.graph.options.transitions) {

17. scope.graph.options.transitions = false;

18. }

19. scope.graph.refresh();

20. }

21. })

22. //...

23. };

24.}]);

as you can see i'm trying to basically check the size of the chart's element and set the chartArea.width accordingly.The biggest problem i'm having is getting the chart to even show up. To help make things easier on our end we decided to wrap up our chart declaration into a directive!

chart.js

01.app.directive('ibsChart', [ "ibsMainService", function (ibsMainService) {

02. return {

03. // Restrict E for element

04. restrict: 'E',

05. // Here we setup the template for the code we want to replace our directive

06. template:"<div ng-show='graph.options.title.text != null' \n\

07. ibs-resize-graph-directive \n\

08. ibs-owner-warehouse-listener-directive \n\

09. ibs-graph-culture-caption \n\

10. kendo-chart='graph' \n\

11. k-options='chartOptions' \n\

12. k-data-source='dataSource' \n\

13. class='col-lg-4'/>",

14. replace: true,

15. scope: {

16. // ...

17. },

18. controller: function($scope){

19. //...

20. },

21. link: function (scope, element, attrs) {

22. //...

23. };

24.}]);

And i've attached a screenshot of the debug output

1. There is not chart rendered (which I know it's because i'm not appending it to the body)
2. There is no element in the body after my scripts (which when doing the angular-kendo tests they appear)
3. I get the prototype returned from my element.find('div')

This is definitely a longer post but I wanted to be as thorough as I could to get a good answer. Anyone have any thoughts?

Charts

answered on 30 Apr 2014

1 answer

204 views

DateTimePicker and 'All day event' in Scheduler

Is there any way to imitate what checking the 'all day event' check box in the Kendo Scheduler does?
e.g. the current functionality is it changes the boxes to DatePicker instead.

I'm not sure if the best practice is to just destroy and re-create the widgets as the user checks/unchecks the box. Is there any other way, like another method that does this? I am using a custom form outside the scheduler for this.

Currently I have the following which just changes the format to use only Date, but the button for selecting time is still there.
http://jsbin.com/binetupa/1/

Cheers

DatePicker

answered on 30 Apr 2014

2 answers

665 views

ISO 8601 format and milliseconds

I have a kendo grid plugged on a OData service providing date into the Microsoft date format and everything is working like a charm.

However, the OData service will be upgraded to be ISO 8601 compliant. Kendo grid seems to handle it very well.... except for one thing: Milliseconds.

Indeed, even if I set the column format to {0:yyyy-MM-dd HH:mm:ss.fff}, the displayed milliseconds are always set to 0.

Ex:

-With Microsoft date format, the OData value /Date(1376439064929-0400)/ will be displayed as 2013-08-13 13:31:04.929
-With ISO 8601 date format, the OData value 2013-08-13T20:11:04.9297826 will be displayed as 2013-08-13 20:11:04.0

Is it a bug or is this the expected behavior from the Kendo Grid?

Best regards,

Simon

P.S. I know the ISO date format isn't officially supported by OData but Kendo already did most of the job for handle the ISO date format...

Grid

answered on 30 Apr 2014

5 answers

148 views

Strange looking UI

Hi,

I'm just new to kendo, so I may did something wrong, when setting up my project. I have a simple file:

01.<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

02. pageEncoding="ISO-8859-1"%>

03.<%@ taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>

04.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

05.<html>

06.<head>

07.<link href="styles/kendo.common.css" rel="stylesheet" />

08.<link href="styles/kendo.default.min.css" rel="stylesheet" />

09.<script src="js/jquery.min.js"></script>

10.<script src="js/kendo.all.min.js"></script>

11.

12.

13.<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

14.<title>Insert title2 here</title>

15.</head>

16.<body>

17. <div id="example" class="k-content">

18. <kendo:calendar name="cal1"></kendo:calendar>

19. </div>

20.</body>

21.</html>

When its rendered in Chrome it looks like as you can find attached. This looks kind of something is missing. But when I click the linkes css and js files in Chrome Source view, it all resolves fine.

Do you have a hint for me?

Thanks in advance!

Jan

General Discussions

answered on 30 Apr 2014

1 answer

171 views

How to catch 401 erros when loading new tab?

My company is building a website that loads pages into kendo tabs using .append and contentUrl. But our forms based security has overloaded the MVC AuthorizeCore for security and if they user is not authorized to view that URL, then it is sent to our overload of HandleUnauthorizedRequest.

We then set the filterContext.Result to a 401 - Not Authorized error.

But, the tab strip continues to add a tab. How can I trap an http error and have the tabstrip not add a new tab?

Lee

TabStrip

answered on 30 Apr 2014

1 answer

167 views

Bind viewmodel with Rest API in mobile application

Hi,

I am working with a mobile application, which has a form with many fields(for update functionality) that i like to populate using a MVVM viewmodel. Viewmodel is to be binded with a REST url. Can a datasource be used in this scenario? What is the performance optimized way to populate a form with many fields(with Textboxes, dropdowns, combobox etc.). Please provide a help link for this.

MVVM

answered on 30 Apr 2014

2 answers

272 views

Shape layers with local data Datasource

Hi. I'm trying to have a shape layer connected to a local Datasource like this:

var shapes = new kendo.data.DataSource({type: "geojson"

});



$(

"#map"

).kendoMap({

    center: [44, 10],

    zoom: 4,

    layers: [{

        type:

"shape"

,

        dataSource: shapes,

        style: { fill: { opacity: 1 }}

    }],

    shapeCreated:

function

(e) {

var

shape = e.shape;

        shape.fill(

"#88f"

);

    }

});



shapes.add({

"id": "FRA", "type": "Feature", "geometry"

: {

"type": "Polygon",



    "coordinates"

: [[ [-4,48], [2,51], [9,44], [-2,45] ]] }

});



shapes.add({

"id": "ESP", "type": "Feature", "geometry"

: {

"type": "Polygon"

"coordinates"

: [[ [-9,43], [3,43], [2,36], [-9,37] ]] }

});

The two shapes are drawn, but when you change the zoom level, only the last one remains. The rest vanish silently.

What I'm missing?

Map

answered on 30 Apr 2014

4 answers

466 views

[Solved] DropDownList problems in firefox

I have a problem with DropDownList that appears i think only in Firefox (FF ver. 28.0, even in safe mode).

The problem apperas even in Kendo official demo http://demos.telerik.com/kendo-ui/web/dropdownlist/index.html

Problem is that when i load page - dropdown works fine - but when i scroll down page, then dropdown doesn't work (i see the animation that dropdown is expanding but immediately dropdown list collapses).

DropDownList

answered on 30 Apr 2014

2 answers

260 views

Telerik Reporting HTML 5 Report Viewer: Internal Server Error: An error has occurred. Attempting to deserialize an empty stream.

I began to receive an error when I was running the reports in the project. Everything had been working for a number of weeks and then suddenly I received an error of "Internal Server Error: An error has occurred. Attempting to deserialize an empty stream" inside of the Report Viewer.

I tried a number of different things and then I eventually checked my code out to another sub-directory and recompiled my project and now the reporting is working again.
The HTML Viewer must have some kind of file that can become locked or corrupted.

I am posting this thread to help any other users that might have the same issue in the future.

Best Regards,
Mark Kilroy

General Discussions

answered on 29 Apr 2014

0 answers

685 views

support for formatting and parsing data during text binding

Hi,

If you want to add formatting and parsing to kendo you have to override text binding in the framework. Add data-format and data-parser attribute bound element. The data-parser attribute is not required and will only be used if data-format attribute is present. So far I had no problem using it.
PS: data-parser attributes is only needed when underlying data is stored as string(s) apposed to native form.