Questions on Kendo UI for jQuery Forum

1 answer

2.4K+ views

Hello Telerik,

I want to handle the "enter" key while keyboard navigation is enabled.

I could handle the keydown event within the tbody.

I need to handle a keypress event in a custom editor too. And here comes the trouble.. I registered a keypress event in the custom editor but is never fired with the "enter" key. The other keys like letters and numbers fire the event.

I could reproduce my code logic here:
http://trykendoui.telerik.com/onaD

am I missing something? My requirement is to handle keydown => keypress => and keyup in the editor.
The keydown and keyup is firing ok.

Can you help me?

Thank you in advance,

regards

Grid

answered on 30 Apr 2014

2 answers

118 views

multiple treeviews calling to ntlm protected site

I'm using multiple treeviews on a page, bound to WCF services on a NTLM authenticated website. If more than a single treeview is requesting data to come from the webservice only the first works and the others immediately fail. On the server side for some reason it's because the subsequent requests are coming in unauthenticated. However if I put in a setTimeout()s on the extra treeviews so they load sequentially there's no errors. Instead of relying on an uncertain setTimeout()s, is there any way to have a treeview retry it's dataload on failure, or do you have any ideas on how to get multiple simultaneous requests to NTLM authenticated wcf services to work?

TreeView

answered on 30 Apr 2014

5 answers

176 views

[Solved] Karma Testing Visual Responses

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

216 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

688 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

154 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

181 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

178 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

283 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

480 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