Questions on Kendo UI for jQuery Forum

6 answers

242 views

DropDownList inside treeview - Error when select treeview item event

Hi everyone,

I have the problem with kendo treeview:

- Source: http://jsfiddle.net/locddspkt/LQgfP/
- Explain: I used the kendo treeview. In the treeview, I used custom template. In the template, I have the input which will be generate to dropdownlist (after the tree item is bind)
- Problem:
After all the items (treeview and some dropdownlist). When I select the item (treeview item or the dropdown list), the error message occur: Uncaught TypeError: Cannot call method 'set' of undefined)

Somebody can tell me why and how to fix it.

Regards

TreeView

answered on 16 Jul 2014

1 answer

87 views

Are view transitions included in the kendo framework, or do I have to add the CSS manually?

In the view transitions example, I was wondering whether the CSS needs to be used from the example code, or whether the library comes with predefined transitions that we can use.

I'm referring to the view transitions section of this documentation:
http://docs.telerik.com/kendo-ui/getting-started/framework/spa/layout

Thanks!

Andre

SPA

answered on 16 Jul 2014

3 answers

215 views

Setting the Accept request header on Upload control

The default HTTP Accept request header used by the Upload control appears to be: "text/html,application/xhtml+xml,application/xml". I'd like to be able to set that to "application/json" instead. Is that possible?

-Ryan

Upload

answered on 16 Jul 2014

1 answer

123 views

Data binding basics ...

Hi guys,

I'm trying to output a template for a panel bar which I want to bind to a simple "Task" object.
The idea is that I have a kendoPanelbar and a template for adding new campaigns as panels based on a selected task.
In short, my task object has a "CampaignId" property and as shown I want to output that value when building the template.
For some reason though kendo is giving me an error which suggests that it can't find this property.

Any ideas?

template:

<script id="campaignContextTemplate" type="text/x-kendo-template">

<li>

<span>Campaign #: CampaignId #</span>

<div class="campaignTree"></div>

</li>

</script>

init code in question:

var task = $(this);

console.log(task);

var panelTemplate = kendo.template($("#campaignContextTemplate").html());

var boundResult = panelTemplate(task);

console.log(boundResult);

$("#context").append(boundResult);

.... (init tree ect omitted for simplicity) ...

Chrome tools output:

[i, jquery: "1.10.2", constructor: function, init: function, selector: "", toArray: function…]

0: i

CampaignId: 123

.... (rest of object output removed) ...

Uncaught ReferenceError: CampaignId is not defined VM23536:3

Templates

answered on 16 Jul 2014

1 answer

68 views

SCHEDULER How can i find error IN THIS PIECE OF COD

Hello !
Now i am exploring Kendo UI, especially scheduler. The scheduler do not display on the browser. How can i fix this error?
Here is the source code:

<!DOCTYPE html>
<html>
<head>
<title>Restrictions</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
<link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
<link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script>

</script>


</head>
<body>
<div id="example" class="k-content">
<div id="scheduler">
<div id="people">
<input checked type="checkbox" id="alex" value="1">
<input checked type="checkbox" id="bob" value="2">
<input type="checkbox" id="charlie" value="3">
</div>
</div>
</div>

<script id="event-template" type="text/x-kendo-template">
<div class="movie-template">

<p>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</p>
<h3>#: title #</h3>

</div>
</script>

<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
allDaySlot: false,
views: ["day","week","month","agenda"],
eventTemplate: $("#event-template").html(),
dataSource: {
data: [
{
meetingID: 1,
title: "Call Charlie about the project",
start: new Date("2013/6/13 10:30"),
end: new Date("2013/6/13 11:30"),
ownerId:2
},
{
meetingID: 2,
title: "Performance review",
start: new Date("2013/6/13 9:00"),
end: new Date("2013/6/13 12:30"),
ownerId:1

},
{
meetingID: 3,
title: "HR Lecture",
start: new Date("2013/6/13 13:00"),
end: new Date("2013/6/13 14:30")
ownerId:2
}
],
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { type: "number" },
title: { defaultValue: "No title", validation: { required: true } },
start: { type: "date" },
end: { type: "date" },
ownerId: { defaultValue: 1 },
isAllDay: { type: "boolean" }
}
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
},
resources: [
{
field: "ownerId",
name: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});

$("#people :checkbox").change(function(e) {
var checked = $.map($("#people :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.dataSource.filter({
operator: function(task) {
return $.inArray(task.ownerId, checked) >= 0;
}
});
});
});

</script>

<style scoped>
.invalid-slot {
background: red !important;
cursor: no-drop;
}
.movie-template img {
float: left;
margin: 0 8px;
}
.movie-template p {
margin: 5px 0 0;
}
.movie-template h3 {
padding: 0 8px 5px;
font-size: 12px;
}
.movie-template a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.k-state-hover .movie-template a,
.movie-template a:hover {
color: #000000;
}
.k-nav-current > .k-link span + span {
max-width: 200px;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: top;
}

#team-schedule {
background: url('../content/web/scheduler/team-schedule.png') transparent no-repeat;
height: 115px;
position: relative;
}

#people {
background: url('../content/web/scheduler/scheduler-people.png') no-repeat;
width: 345px;
height: 115px;
position: absolute;
right: 0;
}
#alex {
position: absolute;
left: 4px;
top: 81px;
}
#bob {
position: absolute;
left: 119px;
top: 81px;
}
#charlie {
position: absolute;
left: 234px;
top: 81px;
}
</style>
</body>
</html>

Scheduler

answered on 16 Jul 2014

1 answer

247 views

Enter Key in autocomplete control

i could not decide on Autocomplete, combobox control for my mvc application.

is it possible for control to have suggestion functionality of autocomplete and adding new element when Enter is clicked after entering come thing new in the control

General Discussions

answered on 16 Jul 2014

1 answer

215 views

Random errors after Navigate event

We are running into errors during the navigate event on our scheduler and have yet to be able to pin down what might be leading to them. We get either of these two:

Uncaught TypeError: Cannot read property 'firstSlot' of undefined
Uncaught TypeError: Cannot read property '_continuousEvents' of undefined

So far we are not able to make heads or tails of what might be causing this. Our datasources appear to all have data during the navigate event and we cannot get them to happen consistently enough to figure out what might cause them. Repeating the same steps doesn't always get the same result so we have been hard pressed to find the root cause. The only thing we can usually get to cause it is a week view navigate, though it has happened on other views but not as regularly. Is there something related to those messages we should look for? Possibly something is happening asynch that we need to check for valid info before the event is allowed to occur?

Scheduler

answered on 16 Jul 2014

3 answers

80 views

Ajax and replacing Kendo Controls

Hi
Just for confirmation, it seems to work ok

Assume we have something like this:

<div id=theContents>
<input type=button id=theButton>

<script>
$('#theButton').kendoButton()
</script>
</div>

If this div is replaced with another copy via ajax (i.e. it's in an MVC partial file) is this safe as far as kendo is concerned?

i.e. when the kendoButton function is called it obviously changes the html around the button but are those changes limited to inside the div, are there stray bits of html floating around outside of the div, possibly at the body level, which could cause problems later?

thanks

General Discussions

answered on 16 Jul 2014

10 answers

4.8K+ views

Programatically select a tree node

Hi,

I have searched the web and the forums but I just don't get how to do this.

I load a tree from a datasource and each tree element has an attribute with 'data-id="xx"'. Where xx is a unique id number. The tree is drawn fine. I can select the first row in the tree with 'treeview.select(".k-first");'

But I want to select the tree item with id = 9125. How on earth do you do that? It should be so easy but I just don't get it.

Thanks

TreeView