Questions on Kendo UI for jQuery Forum

2 answers

113 views

Hi,

Is there a way to disable or remove the Scroller widget inside the ModalView? I am customizing mine and I don't want the scroller there.

Is there something like a data- attribute I can use?

Thank you for any help!

ModalView

answered on 25 Jul 2013

1 answer

77 views

need to add scheduler into html but cant get style/formatting to work

I am trying to add this scheduler code into a html project i am working on.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<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 id="scheduler"></div>
</div>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda"
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "http://demos.kendoui.com/service/tasks",
dataType: "jsonp"
},
update: {
url: "http://demos.kendoui.com/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "http://demos.kendoui.com/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.kendoui.com/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
},
resources: [
{
field: "ownerId",
title: "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 filter = {
logic: "or",
filters: $.map(checked, function(value) {
return {
operator: "eq",
field: "ownerId",
value: value
};
})
};

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

scheduler.dataSource.filter(filter);
});
});
</script>
<style scoped>
#people {
background: url('../../content/web/scheduler/team-schedule.png') transparent no-repeat;
height: 115px;
position: relative;
}
#alex {
position: absolute;
left: 404px;
top: 81px;
}
#bob {
position: absolute;
left: 519px;
top: 81px;
}
#charlie {
position: absolute;
left: 634px;
top: 81px;
}
</style>

</body>
</html>

unfortunately all I see when I add in the code are 3 check boxes. for some reason the style and formatting of the scheduler arent showing up or linking to my page. Can I have two different style sheets in one html file? I copied the example code exactly but still no luck. i am really new to all of this but would really appreciate any help or advice on why its not showing up.

thanks so much

Scheduler

answered on 25 Jul 2013

3 answers

537 views

[Solved] Focus causes scrollbars to jump && How to make window topmost always?

Hi,

This is a two question post, hope that doesn't cause anyone grieve.

First Question:

I have multiple windows on my page, which generally results in having scrollbars.
I would like to know if there is a way to make it so that when I click and focus a widget the scrollbars will not move? If you move a widget half way off screen with scrollbars showing, and then unfocus, scroll all the way to the top left corner and then focus that widget, the scroll bars jump to show the bottom right corner of that widget. I find the behavior a tad annoying and would like to try removing that behavior.

Second Question:

I have a kendoWindow that I would like to keep on the page at all times, and always the TOPMOST window.
I have tried setting the z-index of that window to something very high, but it loads before the other kendoWindows. When those open they notice its z-index and picks a higher number. Is there a way for me to have a kendoWindow where i can decide its z-index without effecting new windows to the page?

Thanks

Window

answered on 25 Jul 2013

1 answer

169 views

[Solved] Loading culture files with require.js not working with Web bundle anymore

Hi again,

With version 2013.2.716 I've noticed that dynamically loading a culture file with require.js is broken. We use the kendo.web.min.js bundle and load different culture files dynamically depending on user preference or server instruction.

With this new version, I am getting what is described here: http://stackoverflow.com/questions/17705611/in-kendoui-web-2013-2-716-requiring-kendo-culture-xx-xx-min-js-produces-an-inval

Are kendo going to provide a solution for such a situation? Note that before the above mentioned version this mechanism worked fine for me.

From my point of view:
- it would be best if kendo fixed the culture files to still work with require.js and kendo.web bundle or provide a solution on how to do it in a way that works
- or as a last resort at least provide the option in the Custom Download page to be able to include the culture files in the custom.min.js so that I can get a bundle that is very similar to kendo.web but includes the culture files (although there would be a lot of overhead as I usually only dynamically load 3 to 4 culture files per page)

General Discussions

answered on 25 Jul 2013

1 answer

102 views

Horizontal Scroller

Hi I'm trying to find a suitable widget for the following scenario.
I have bunch of controls that stretch beyond the screen width.(see attached image.)
Therefore I need a control that will allow me to move the controls (inside the widget) to the left and right similar to the ScrollView.
The only difference is that rather then moving between pages I want the each swipe will show the next available controls.
Another way to put it is that I want to use the 'Scroll' widget but make it horizontal scroll
Do you have any suggestions ?
Thx

General Discussions

answered on 25 Jul 2013

2 answers

163 views

V2013.2.716 Minimize height issue

Hi,

I just upgraded my kendo package to v2013.2.716 and it seems to be causing an issue with the Kendo window Minimize action.

Here's a Fiddle that shows the problem. Its related to the min-height that gets added to the window. On minimize the window doesn't actually collapse down to just the title as it used to.

Is this a bug? Or was this intentional?

How can I get it to do what it used to and collapse clear down to just the Title bar?

Window

answered on 25 Jul 2013

3 answers

234 views

Is it possible to have the linear gauge pointer start from the center?

Hi,

I have a case where I measure negative and positive speed using the same linear gauge. I was wondering if it's possible to have the pointer start with the center as a zero-point? Here's my code:

<script>

function createSpeedGauge() {

$("#speedBar").kendoLinearGauge({

pointer: {

value: 0,

color: "black",

start: 0

},

scale: {

majorUnit: 20,

minorUnit: 2,

min: -120,

max: 120,

vertical: true,

reverse: true,

ranges: [

{

from: -120,

to: -30,

color: "#ffc700"

},

{

from: 120,

to: 30,

color: "#ffc700"

}

]

}

});

}

$(document).ready(function() {

createSpeedGauge();

});

</script>

I've attached an image of how it's setup (the gauge in question on the right side). If this was setup the way I wanted, this gauge would've read -120 from this picture. Hopefully, I've expressed myself clearly :)

LinearGauge

answered on 25 Jul 2013

2 answers

469 views

[Solved] How do I make area chart series fill color solid, instead of the default semi-transparent?

See this fiddle: http://jsfiddle.net/ningencat/NnpEh/

If you enable/disable the "stack" option, you'll see that the series fill color is semi-transparent. How do I make it a solid color?

Thanks,
Kate

Charts

answered on 25 Jul 2013

3 answers

1.5K+ views

Refresh treeview

Hi,
I load a complex treeview via ajax because I need to load the tree with one request (works fine):

$(document).ready(function() {
   buildTree();
});

function buildTree(){
   $.getJSON("admin_get_treedata.php", function (data) {
       $("#treeview").kendoTreeView({
           select: function(item) { editTreeElement(item,'tree'); },
           dataSource: data
       });
   })
}

If I try to reload the complete tree after changing some data via ajax the new build tree does not work correct and does not update the text.

       $.ajax({
           type: 'POST',
           url: 'ajax/ajax_update_layer.php',
           data: {
               layerid:id,
                ...
           },
           success: function(data){
                          buildTree();
                   }
           });

What can Ido?
Thanks
Sven

TreeView

answered on 25 Jul 2013

5 answers

274 views

Weird Range Slider Behavior in Chrome

I am working on a mobile app utilizing PhoneGap and it works wonderfully on my test iPhone, but not so well on Android phones. Since I can't just ignore the Android version, I need to make it run there. I was figuring I would just not use the range input, but then I noticed that it wasn't working on Chrome either. When you try to use it, it gets "sticky".

Here is a fiddle: http://jsfiddle.net/mUz8g/

I have distilled my code down to this

<div data-role="view" id="first" >

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