Questions on Kendo UI for jQuery Forum

3 answers

138 views

Kendo Scheduler

Hi Team,

I am trying to bind JSON data to kendo scheduler. But unfortunately the JSON data i am getting from a rest service is not binding in Scheduler.

Below is the JSON i am getting from service:

[
{
"idschedule": 1,
"title": "Clark HAll",
"start": "2015-04-22T01:00:00.000Z",
"end": "2015-04-22T13:00:00.000Z"
},
{
"idschedule": 2,
"title": "Library",
"start": "2015-04-22T01:00:00.000Z",
"end": "2015-04-23T13:00:00.000Z"
}
]

JS

$(function() { $("#scheduler").kendoScheduler({ date: new Date(), startTime: new Date("2013/6/13 06:00 AM"), height: 600, views: [ "day", { type: "workWeek", selected: true }, "week", "month", "agenda", { type: "timeline", eventHeight: 50} ], editable:false, dataSource: { transport: { read: { url: "/viewSchedule", dataType: "json" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return {models: kendo.stringify(options.models)}; } } }, schema: { id: "taskId", model: { fields: { taskId: { from: "idschedule", type: "number" },
title: { from: "title", defaultValue: "No title"}, start: { type: "date", from: "start" }, end: { type: "date", from: "end" } } } } } });
});

Scheduler

answered on 04 May 2015

1 answer

89 views

Adaptive usage add pager

I am using the adaptive usage example in the scroll view. But I want to add the little pager at the bottom to indicate what page the scroll view is on. Anyone have a dojo / fiddle example on how to add that?

ScrollView (Mobile)

answered on 04 May 2015

1 answer

194 views

Open Filter Sub-Menu to Left not Right

I am creating a mobile app using the Kendo Grid for MVC. When a user clicks on one of the column filters, a drop down menu appears. When you then click on the filter options, the window opens to the right and is not visible in the view port. You have to scroll to the right to select any options.

Is it possible to open the sub-menu to the left?

Thanks for you help.

Grid

answered on 04 May 2015

5 answers

601 views

Paging grid that was initialized from a table

Hello,

I have a table I'd like to display that's small enough to not require server side paging ... I'd really just like to load a Kendo UI Grid on from the table and use paging.

It looks like I need to set page size on the data source, but I'm not sure how to do that when the data source is the HTML Table.

Any suggestions?

Thanks!

Grid

answered on 04 May 2015

1 answer

89 views

IE10 column menus disappear when scroll down, then right then back up

In IE 10, the column menus disappear when you scroll right.

In this dojo example, scroll down so you can see the scroll bar to go to the right. Scroll all the way to the right, then back up so you can see the column menus.

You'll see that the column menus disappear altogether.

http://runner.telerik.io/fullscreen/@chad.gregory@twtelecom.com/alUYi

This only happens in IE10. IE11 fixes the issue. I don't know about IE9 or lower.

Any way around this?

Thanks,

Chad

Grid

answered on 04 May 2015

3 answers

103 views

How to set different times for different resources

Hi

I have a requirement where let us say we have a meeting in room 1 for three hours, Projector is reserved for one hour, Room is booked 3 hours

Calendar display in grey for three hours, and one hour in different color representing projector.

I wonder if some one can show me a path where different resources can have different reserved times.

Thanks

Scheduler

answered on 01 May 2015

3 answers

197 views

categoryAxis Line Chart

Hi

kendo v2014.2.1008

I am trying to implement one of your chart components and I am unable to get some of the date formats to work as required.

Using the MVC helper, I have tried doing the following:
CategoryAxis(axis => axis
.Date()
.MaxDateGroups(12)
.BaseUnit(ChartAxisBaseUnit.Weeks)
.WeekStartDay(Model.WeekBeginningDay)
.Labels(labels => labels
.DateFormats(formats => formats
.Seconds("HH:mm:ss")
.Minutes("HH:mm")
.Hours("HH:mm")
.Days("dd/MM")
.Weeks("dd/MM")
.Months("MMM yy")
.Years("yyyy"))
)

If I change the base unit to Months or Years then the formats used above do work (as proven by making changes to them). The Weeks format never seems to be applied.

Using the above, if I inspect the chart object in the developer tools console, I can see that only only some of those specified appear in the chart.options.categoryAxis.labels.dateFormats property (Weeks is not present).

If I set .Autobind(false) and then set these on document.ready() as follows:
var DateLabelFormats = {
seconds: "HH:mm:ss",
minutes: "HH:mm",
hours: "HH:mm",
days: "d/M",
weeks: "d/M",
months: "MMM 'yy",
years: "yyyy"
};
var chart = $("#ProjectHoursLineChart").data("kendoChart")
chart.options.categoryAxis.dateFormats = DateLabelFormats;
chart.dataSource.read();

When I inspect the chart object in the developer tools console I can see all formats are present, but still the Weeks format is not applied.

Can anyone please tell me how I get the date formats to work as specified above (I would like to use ChartAxisBaseUnit.Fit)?

Many thanks in advance

Charts

answered on 01 May 2015

1 answer

214 views

SignalR, IE performance memory and CPU load

Hi,

I have a serious performance issue using the Kendo UI Grid with signalr and Oracle Change Notification.

I get approximately 100 rows of data when databinding, but then the dependency pushes 1-2 update per secound. What I see is that the Internet Explorer process is using 45-55% of CPU, and the memory increases with 1MB every 2 secound.

I have tried to use different versions of jquery to eliminate know errors disposing DOM element, but still no luck. I really hope that you guys out there are able to give some input what to do.

Regards Rico

Grid

answered on 01 May 2015

3 answers

1.0K+ views

Drag&Drop between listview with sorting

Hi,

I've been able to make drag&drop between two listview, but the dropped elements always go at the end of stack.

I'd like to position the dropped elements exactly where they are dropped, among the others, and then keep them sortable inside the listview.

Something like this: http://www.jqueryrain.com/?cy_emSfj

Currently my code is the following, but I'm not able to manage the position drop and sorting:

<div id="listA"></div>

<div id="listB"></div>

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

<div class="bitem">

Name: #: item # (#: position #)

<a class="k-button k-button-icontext k-delete-button" id="delete_user" href="javascript:delusr(this)"><span class="k-icon k-delete"></span>X</a>

</div>

</script>

<script>

//create dataSource

var listA_DS = new kendo.data.DataSource({

data: [

{ id: 1, item: "Label", position:0 },

{ id: 2, item: "Text", position: 0 },

{ id: 3, item: "Radio", position: 0 },

{ id: 4, item: "DropDown", position: 0 },

{ id: 5, item: "CheckBox", position: 0 }

],

schema: {

model: {

id: "id",

fields: {

id: { type: "number" },

item: { type: "string" },

position: { type: "number" }

}

});

//display dataSource's data through ListView

$("#listA").kendoListView({

dataSource: listA_DS,

template: "<div class='item'>Name: #: item #</div>"

});

//create a draggable for the parent container

$("#listA").kendoDraggable({

filter: ".item", //specify which items will be draggable

dragstart: function (e) {

var draggedElement = e.currentTarget, //get the DOM element that is being dragged

dataItem = listA_DS.getByUid(draggedElement.data("uid")); //get corresponding dataItem from the DataSource instance

console.log(dataItem);

},

hint: function (element) { //create a UI hint, the `element` argument is the dragged item

return element.clone().css({

"opacity": 0.6,

"background-color": "#0cf"

});

}

});

var listB_DS = new kendo.data.DataSource({

data: [ /* still no data */],

schema: {

model: {

id: "id",

fields: {

id: { type: "number" },

position: { type: "number" },

item: { type: "string" }

}

});

$("#listB").kendoListView({

dataSource: listB_DS,

//template: "<div class='item'>ListB: #: item #</div>"

template: kendo.template($("#template").html())

});

function addStyling(e) {

this.element.css({

"border-color": "#F00",

"background-color": "#e0e0e0",

"opacity": 0.6

});

}

function resetStyling(e) {

this.element.css({

"border-color": "black",

"background-color": "transparent",

"opacity": 1

});

}

var dest;

$("#listB").kendoDropTarget({

dragenter: addStyling, //add visual indication

dragleave: resetStyling, //remove the visual indication

drop: function (e) { //apply changes to the data after an item is dropped

var draggableElement = e.draggable.currentTarget,

dataItem = listA_DS.getByUid(draggableElement.data("uid")); //find the corresponding dataItem by uid

dataItem.item = "ListB";

dest = $(e.target);

if (dest.get("id")) {

//reorder the items

var tmp = target.get("position");

target.set("position", dest.get("position"));

dest.set("position", tmp);

listB_DS.sort({ field: "position", dir: "asc" });

}

else {

}

//listA_DS.remove(dataItem); //remove the item from ListA

listB_DS.add(dataItem); //add the item to ListB

$("#listB").height("+=60");

resetStyling.call(this); //reset visual dropTarget indication that was added on dragenter

}

});

function delusr(elem) {

var item = $(elem).closest("[role='option']");

var data = listB_DS.getByUid(item.data("uid"));

alert(item);

}

</script>

<style>

#listA, #listB {

width: 300px;

height: 280px;

float: left;

margin-right: 30px;

border: 3px solid black;

border-radius: 3px;

}

.item, .bitem {

margin: 5px;

padding: 5px;

text-align: center;

border: 2px solid #ccc;

border-radius: 5px;

width:260px;

}

</style>

Drag and Drop

answered on 01 May 2015

2 answers

260 views

Too much recursion error dropdownlist MVVM

I updated my site to the latest Kendo Release 2015.1.429 from the previous update and now I am getting a "Too much recursion error" when data binding.

if I comment out the dropdownlist's in the "filtering-row-template" template the error stops.

DropDownList

answered on 01 May 2015