Questions on Kendo UI for jQuery Forum

2 answers

509 views

Controlling styles of charts - Bevel vs. Flat

Hey guys,

I'm looking at the Kendo.All.js file to try and figure out how your Flat theme stops the charts from showing a bevel. Your theme builder is quite rudimentary in terms of what it allows you to theme unless I'm missing something. It doesn't for example allow you to specify something like bevels or no bevels.

So right now I'm going through the JS file step for step, which is time consuming and costly. How can we register a proper, complete, theme and control things like the bevels, as well as EVERYTHING else the chart may make use of? Right now the bevel is the most annoying part, but the rest would be nice too.

Thanks,
Jacques

General Discussions

answered on 17 Oct 2013

1 answer

136 views

HTML Select element bound with MVVM not behaving as expected

I have attached a sample project with a single index.html page (and supporting kendo resources). The source of that page is included below for those that don't want to download the attached .zip.

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="msapplication-tap-highlight" content="no" />

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

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

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />

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

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

</head>

<body id="body">

<div data-role="layout" data-id="default">

<div data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

<div data-role="view" data-title="Select Test" data-model="myViewModel" data-layout="default" id="roster">

<table>

<tr>

<td>Selected Person: <span data-bind="text: selectedPerson"></span>

</tr>

<tr>

<!--<td><label> DataSource Select <select data-value-field="id" data-text-field="name" data-bind="source: dsPeople, value: selectedPerson"></select></label></td>-->

<td>

<label> Array Select

<select data-bound="onBind" data-option-label="Select an item" data-value-field="id" data-text-field="name" data-bind="source: arrPeople, value: selectedPerson, events: { bound: onBind}" data-value-primitive="true">

<option value="-1">Select an item</option>

</select>

</label>

</td>

</tr>

</table>

</div>

<script>

var myViewModel = kendo.observable({

dsPeople: new kendo.data.DataSource({

data: [],

schema: {

model: {

id: "id"

}

}),

arrPeople: [],

init: function()

{

for (var i = 0; i < 5; i++) {

var person = {

name: "Person " + i,

id: i

};

this.dsPeople.add(person);

this.arrPeople.push(person);

}

},

onBind: function(e)

{

alert('onBind called');

},

selectedPerson: null

});

$.ready(myViewModel.init());

// Initialize a new Kendo Mobile Application

var kidcheck = new kendo.mobile.Application($(document.body), {

skin: "flat"

});

</script>

</body>

</html>

Now, I have some questions.
1: If I un-comment the Select with the "DataSource Select" label I get an error (Uncaught ReferenceError: id is not defined). Is binding a Select element to a kendo datasource not supported?
2: Neither the "Array Select"s data-option-label, nor the initial option are honored. When the viewModel's selectedPerson attribute is null, there is no way to 'prompt' the user for input. Can the select be configured to either; use a default option to prompt for input OR select the first item in the list?
3: I expected I could implement the behavior in question #2 myself, however the "bound" method is never fired so I don't have an event upon which I can act and evaluate the state of the select. The Select is configured with both the data-bound="onBind" and data-bind="... events{ bound: onBind}" and neither invokes the onBind method.
4: Is there a location where the level of support for controlling an HTML Select is documented? Most of my questions are based on the assumption that since a dropdownlist widget and an HTML Select element derive from the same thing that there would be common behavior.

Environment:
Chrome: 30.0.1599.69
Kendo: 2013.2.918 commercial
Jquery: 1.10.2

Thanks

General Discussions

answered on 17 Oct 2013

3 answers

121 views

Network connection Android Kendo UI

Hi *,

I'm writting an application with Kendo UI, which schould build a https connection to a server. The application runs pretty well in the simulator, but after the installation on a mobile device (Android 4.1.2), the application is not able to build an Internet connection, namely a connection to the target server.

I use the following code to build the connection:

var check = new XMLHttpRequest();

check.open("GET", "https://IP:PORT/test" ,false);

check.setRequestHeader("Authorization", utils.getServerAuthString());

check.onreadystatechange = function () {

if (check.readyState == 4) {

if (check.status == 200) {

utils.saveServerData();

} else {

utils.showError("status:" + check.status);

}

check.send(null);

From the mobile device, I always receive a value "0" as Status, namely "Status: 0" (See line 9).

By the ways, I also use the kendoui remote datasource to get data; however, it is not working too on the mobile device; see the following code.

viewModel: kendo.observable({

datasource: new kendo.data.DataSource({

transport: {

read: {

cache: false,

url: URL,

dataType: "json",

beforeSend: function(req) {

req.setRequestHeader('Authorization', utils.getServerAuthString());

}

})

I hope you can help me.

Best regards,

General Discussions

answered on 17 Oct 2013

1 answer

91 views

Drag & Drop Scoping issue.

I am running into a strange issue with using Kendo Drag & Drop with a JQuery UI widget made through the Jquery UI widget factory.

I am creating two kendoDropTargetAreas with the the same filter on two different containers. Each one is scoped to its own context - yet no matter what I do it always executes the functions bound to the events on the first context created.

For example:

I have two widgets - Widgets A & B. Both have their own draggables and dropTargetAreas.

Yet whenever I drag and drop something on Widget B - it triggers Widget A dropTargetArea events.

No other widget behaves this way - the other kendo widgets work and are scoped correctly..

Drag and Drop

answered on 17 Oct 2013

3 answers

156 views

ListView + data-type="group" + MVVM issue

There appears to be an issue with nested bindings when the ListView is in grouped mode in 2013.2.918. It manifests itself as the first item in a group not binding properly (or first 2 if there are two top-level items etc). Is this a known issue? If not I can provide more detail.

ListView (Mobile)

answered on 17 Oct 2013

1 answer

101 views

Editable Template with Inline Editor

I'm attempting to put an inline editor inside a scheduler editable template. It works fine with two caveats that I'm hoping for help with.

1. Is there a way to make the editor toolbar popup out to the side instead of on top or somehow force it to stay on top while trying to edit. Currently, it will go underneath the editor template when I try to select something inside the inline div.

2. in IE8, the toolbar breaks that I have are not working with the inline editor, they work with the regular editor and are fine in IE9. The inline demo has too few tools in it to see if a break works there with IE8 or not.

Thanks!

Scheduler

answered on 17 Oct 2013

1 answer

105 views

Grid Invalid detail template

Hi Telerik Team,
I've have grid using external detail template. This is explained in web demos in here http://demos.kendoui.com/web/grid/detailtemplate.html

I'm trying to do exactly same functionality with Java Server Pages. Here is my JSTL code:

<script type="text/x-kendo-template" id="${attribute.name}-template">

<div class="${attribute.name}-tabstrip">

<ul>

<c:forEach var="attributeGroup" items="${mlib:attributeGroupSortByName(attribute.definition.templateObject.attributeGroups)}" varStatus="stat">

<li <c:if test="${stat.index == 0}">class="k-state-active"</c:if>>${attributeGroup.name}</li>

</c:forEach>

</ul>

<c:forEach var="ag" items="${attribute.definition.templateObject.attributeGroups}">

<div>

<ul>

<c:forEach var="attribute" items="${mlib:sortAttributesByOrder(ag.attributes)}">

<li><label>${attribute.definition.desc.text}:</label>#= ${attribute.name} #</li>

</c:forEach>

</ul>

</div>

</c:forEach>

</div>

</script>

And my JS looks like this:

detailTemplate: kendo.template($("#class_refs-template").html()),

detailInit: function( e ) {

var detailRow = e.detailRow;

detailRow.find(".class_refs-tabstrip").kendoTabStrip({

animation: {

open: {

effects: "fadeIn"

}

});

}

My html looks like this:

<div class="class_refs-tabstrip">

<ul>

<li class="k-state-active">Header Description</li>

<li >Others</li>

<li >system</li>

</ul>

<div>

<ul>

<li><label>Description:</label> #= foo# </li>

<li><label>Description:</label> #= bar# </li>

<li><label>Description:</label> #= foo# </li>

<li><label>Description:</label> #= bar# </li>

<li><label>Description:</label> #= foo# </li>

</ul>

</div>

...

I cant figure out what is happening here? If I remove #= ${attribute.name} # from my JSTL then template is workin but values are not binded to placeholders.

Grid

answered on 17 Oct 2013

5 answers

94 views

Filter issue

Hi

when i filter the grid data using more than 1 column , sometimes the filter menu stays intact for certain column.

How to correct this?

Grid

answered on 17 Oct 2013

1 answer

73 views

Hi Do we have something like Rad Editor?

Do we have something like Rad Editor?

to Edit the Web content

General Discussions

answered on 17 Oct 2013

3 answers

99 views

Tabstrip getting in the way during form input

I have noticed new, somewhat annoying behaviour in my application since updating to the iOS7 theme and latest KendoUI mobile build. Basically when I tap an input field on the form, it jumps up ready to accept text, but the navigation tabstrip remains displayed, and gets in the way.

Is there any way to have the tabstrip not jump up when clicking an input field?

Thankyou.

Regards

General Discussions

answered on 17 Oct 2013