Questions on Kendo UI Integration Forum

1 answer

241 views

Sample of defining a Kendo UI Model with TypeScript

Could you provide an example of defining a Kendo UI Model an Id and Fields using TypeScript?

class customerModel extends kendo.data.Model {

constructor() {

super();

super.init(this);

this.id = "CustomerID";

this.fields = new kendo.data.DataSourceSchemaModelFields();

}

This is far as I've gone by looking at Kendo.all.d.ts.

Integration with other JS libraries

answered on 08 Apr 2014

0 answers

110 views

Q1'14 Release - Missing TypeScript definitions

The Kendo UI Team has identified a problem with the TypeScript definitions in all Kendo UI Q1 2014 distributions.

We have identified the root cause of the problem and all following releases, including internal builds, will be free of this defect.
Corrected definitions are also available for download as attachments to this post.

Please accept our apologies for the caused inconvenience.

Integration with other JS libraries

asked on 19 Mar 2014

1 answer

85 views

UI testing (with UiTest.JS or anything that works)

Hi Everybody,

We have troubles finding a working solution for UI testing our Phonegap app built with Kendo Mobile. We've tried UiTest.JS Can anybody share a working recipe for JS driven UI testing? The goal is to drive user session in a browser starting with logging in and then using the features. This would also allow us to do BDD style development.
First, we found that .trigger('click') doesn't do anything in kendo, so we found that .mousedown().mouseup() creates the required effect. Now, we have an issue with ajax calls out to the API server. Bottom line, if someone can share a working setup with some best practices, I'll appreciate it.

<div data-role="modalview" id="modalview-login" style="width: 90%;">

<div data-role="header">

<div data-role="navbar">

<span>Login</span>

<a id="modalview-cancel-button" data-click="closeModalViewLogin" data-role="button" data-align="right">Cancel</a>

</div>

<ul data-role="listview" data-style="inset">

<li>

<label for="username">Username:

<input type="email" id="username" placeholder="Enter Username" autofocus/>

</label>

</li>

<li>

<label for="password">Password:

<input type="password" id="password" placeholder="Enter Password"/>

</label>

</li>

</ul>

<a data-click="logMeIn" id="modalview-login-button" type="button" data-role="button">Login</a>

</div>

function logMeIn() {

// console.log("function logMeIn() called.");

$("#logged-in-text").text("Attempting Login.");

kendoMobileApplication.showLoading();

var uName = $("#username").val();

var pWord = $("#password").val();

// Create a session object and attempt login

var sess = new SessionObj();

// console.log("Starting API call.");

sess.login(window.SESSIONAPI, uName, pWord, window.SITEKEY, function(s) {

if (s.isAuthenticated) {

$("#logged-in-text").text("Login Successful.");

// kendoMobileApplication.navigate("main.html");

window.location.href = "main.html";

} else {

$("#logged-in-text").text("Login Failed.");

}

kendoMobileApplication.hideLoading();

$("#modalview-login").kendoMobileModalView("close");

});

}

describe("Bad Login", function() {

it("Should display error message if login fields are invalid", function () {

uit.url("/");

uit.runs(function($) {

// display login dialog

$("#modalview-open-button").mousedown().mouseup();

expect($("#modalview-login").is(":visible")).toBeTruthy();

// fill in fields and submit form

$("#username").val("");

$("#password").val("123456");

$("#modalview-login-button").mousedown().mouseup();

});

uit.runs(function($) {

expect($("#logged-in-text").text()).toBe("Invalid login/password.");

});

it("Should display error if invalid login.", function() {

expect(true).toBe(false);

});

Integration with other JS libraries

answered on 10 Jan 2014

1 answer

166 views

Kendo UI, RequireJS and the bundles

Hi,

I have been loading kendo.web.min.js along with a culture file using the RequireJS shim method along with the deps option set as follows:

require.config({

paths: {

"jquery": ["jquery-1.10.2.min"],

"kendo": ["kendo/kendo.web.min"],

"kendo-cultures-en-gb": ["kendo/cultures/kendo.culture.en-GB.min"],

"bootstrap": ["bootstrap.min"]

},

shim: {

'bootstrap': {

deps: ['jquery']

},

"kendo": {

deps: ["jquery"]

},

"kendo-cultures-en-gb": {

deps: ["kendo"]

}

});

I then noticed in the offical documentation that it is recommended to avoid using the Kendo UI bundles with RequireJS: http://docs.kendoui.com/getting-started/using-kendo-with/using-kendo-with-requirejs.

As I haven't had any particular issues with this approach (yet!) I wondered, if this was still the official recommendation and that I should revert to script tags for Kendo, or whether I can continue using the above method?

Regards,

Dan.

Integration with other JS libraries

answered on 10 Jan 2014

3 answers

747 views

KendoUI and React (aka ReactJs)

Re: the React JavaScript library (http://facebook.github.io/react/)

We are trying to figure out how we can adopt React Components and still use Kendo for some UI controls, so we do not have to re-invent controls that kendo already provides.

How do we begin embedding React Components inside KendoUI components (for example, inside a KendoUI Grid), but more urgently how to embed arbitrary kendo ui controls inside React Components?

For example (hypothetical):

var Treeview = React.createClass({

render: function() {

return (

<div>

Custom markup

<div></div>

</div>

);

}

});

React.renderComponent(Treeview({

// kendo treeview plugin arguments passed here as

// react component properties as an example

dataSource: {

data:[ /*...*/ ]

}

}), document.body)

Integration with other JS libraries

answered on 02 Jan 2014

1 answer

163 views

kendo.ui.Window compatibility with jQueryUI Dialog

I have an existing application that is using jQueryUI dialog. And I am working on gradually switching to using kendo.ui.Window instead.
I need to popup a small dialog depending on some internal processing. The popup window will contain a confirmation check box and perhaps a text input field.
Everything works fine until I happen to have a jQuery based dialog open on the page.

If the popup dialog (kendo.ui.Window) is triggered when the jQueryUI dialog is open all controls on the "kendo.ui.Window" got disabled. User can not check the check-box or input text into input box.

The issue is caused by the css setting in kendo.common.css
div.k-window-content {
z-index: -1;
...
which forces the content to sink down.

Please see two screenshots that illustrate the issue.

My questions are:
why z-index is set below zero?
Is it managed dynamically by the javascript code?
Is it safe to remove the line " z-index: -1; " ?
What is the recommended way to approach this task?

Thanks,
Andrew

Integration with other JS libraries

answered on 20 Dec 2013

2 answers

100 views

Knockout-Kendo.js does not update the control value when model is updated

Hello,

Knockout-Kendo.js does not update the control value when the model containing the bound property (not the property itself) is updated
Using standard knockout binding supports that feature.

Example here: http://jsfiddle.net/g7dPw/12/

Click "Change Model" button.
Note that Text Box is updated, but not the Date picker.
Click "Print" to see that date on bound and on date picker are inconsistent.

Is this considered a bug or is it by design?

Integration with other JS libraries

answered on 04 Dec 2013

2 answers

157 views

Kendo UI Grid + backbone js + marionette + underscore

I am trying to use kendo ui grid in my solution that is based upon backbone.
It is a single page application

If I create a plain html page, the kendo UI grid works fine.

But, if I place the code in my solution. it says the below error.
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'kendoGrid'

The data is coming in json format.

In my page, jquery-1.9.1.min.js and jquery-ui-1.10.2.js also loads along with jquery.min.js, kendo.web.min.js and console.js(taken from the offline examples
page to be added)

I can't remove jquery-1.9.1.min.js and jquery-ui-1.10.2.js and other js as they are part of dynamic loading of the framework.

I can only play with jquery.min.js, kendo.web.min.js and console.js to work my solutions.

Anyone who can help me on how should I progress in order to use kendo ui grid.

Integration with other JS libraries

answered on 04 Dec 2013

3 answers

493 views

Kendo UI Modernizr and jQuery

When you have the following scripts included in your page:
kendo.modernizr.custom.js
kendo/2013.2.716/jquery.js
kendo/2013.2.716/kendo.all.js

Is it necessary to include your own Modernizr and JQuery libraries? I.e. are these full versions of the frameworks/files?

Follow Up:
kendo.modernizr.custom.js doesn't seem to add much to the HTML tag as does the standard Modernizr.js file.
Here's a sample with the custom modernizr only:

js k-ff k-ff24

And here's a sample with the standard modernizr:

js no-flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js  k-ff k-ff24

Integration with other JS libraries