Questions on Kendo UI for jQuery Forum

3 answers

933 views

Hi,

I've kendo grid where data is displayed with pagination turned on. Say the number of rec in the grid is 200. I click a button then I want to remove
pagination from the grid so that all the records are viewed in a single glance. The height of the grid should expand automatically depending upon
the number of records.

In this scenario, the height of the web page containing the grid will increase thereby getting scroll bars on the page.

Can you let me know if removing pagination and even scroll bars from the grid is possible or not?
A sample code snippet would be of great help.

Thanks,
Sagar Agrawal
(A customer of KendoUI).

Grid

answered on 26 Jul 2013

0 answers

84 views

How do I get the ListView refresh after adding content?

I would like to add content to a listview by replacing the HTML in the UL with a new block of HTML
<ul id="lvFCEvents" data-role="listview"></ul>

I am able to do this using $("#lvTest").html("... new <li> html")
After issuing this command I can see the <li> items but they are not formatted to look like a Kendo <li> should look, they look like good old HTML.

How do I make the the new HTML format correctly?
Thanks,
Shawn

General Discussions

asked on 25 Jul 2013

2 answers

85 views

Disable Scroller in ModalView

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

67 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

492 views

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

147 views

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

92 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

148 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

212 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 :)

Gauges

answered on 25 Jul 2013

2 answers

445 views

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