hello,
selecting a tab programmatically, changes the height of the previous content.
1 run http://dojo.telerik.com/UYiJU
2 click "select moscow" button
3 select "paris" tab
Kind regards
axel
Hi there;
I've had great success with a range bar chart putting together a timeline -- but I've reached a stumbling block. I'm attempting to show machine runability in a manufacturing environment, so in the timeline I want it green when the machine is running, red when it's not. The timeline just seems to pick the first color though. Attached is the output I'm getting from Kendo, along with a similar mockup from SSRS showing what I'd like to see.
Does anybody have any advice?
Thanks,
Jason
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Shift Timeline</
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.default.mobile.min.css"
rel
=
"stylesheet"
>
<
script
src
=
"js/jquery.min.js"
></
script
>
<
script
src
=
"js/jszip.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
=
"chart"
></
div
>
<
div
id
=
"timeline"
></
div
>
<
script
>
var bbxData = [
{ID:3565,MachineName:"DC01",StartDate: new Date("2016-03-09 07:15:10").getTime(), EndDate: new Date("2016-03-09 07:15:32").getTime(),color:"Green"},
{ID:3567,MachineName:"DC01",StartDate: new Date("2016-03-09 07:15:32").getTime(), EndDate: new Date("2016-03-09 08:20:11").getTime(),color:"Green"},
{ID:3734,MachineName:"DC01",StartDate: new Date("2016-03-09 08:20:11").getTime(), EndDate: new Date("2016-03-09 08:20:19").getTime(),color:"Green"},
{ID:3735,MachineName:"DC01",StartDate: new Date("2016-03-09 08:20:19").getTime(), EndDate: new Date("2016-03-09 09:08:10").getTime(),color:"Red"},
{ID:3873,MachineName:"DC01",StartDate: new Date("2016-03-09 09:08:10").getTime(), EndDate: new Date("2016-03-09 10:39:29").getTime(),color:"Red"},
{ID:3012,MachineName:"DC01",StartDate: new Date("2016-03-09 10:39:29").getTime(), EndDate: new Date("2016-03-09 10:41:38").getTime(),color:"Yellow"},
{ID:3026,MachineName:"DC01",StartDate: new Date("2016-03-09 10:41:38").getTime(), EndDate: new Date("2016-03-09 10:42:48").getTime(),color:"Yellow"},
{ID:3033,MachineName:"DC01",StartDate: new Date("2016-03-09 10:42:48").getTime(), EndDate: new Date("2016-03-09 10:43:32").getTime(),color:"Green"},
{ID:3039,MachineName:"DC01",StartDate: new Date("2016-03-09 10:43:32").getTime(), EndDate: new Date("2016-03-09 10:43:48").getTime(),color:"Green"},
{ID:3041,MachineName:"DC01",StartDate: new Date("2016-03-09 10:43:48").getTime(), EndDate: new Date("2016-03-09 10:46:26").getTime(),color:"Green"},
];
$("#chart").kendoChart({
dataSource: {
data: bbxData,
group: {
field: "MachineName",
dir: "desc"
}
},
series: [{
type: "rangeBar",
fromField: "StartDate",
toField: "EndDate",
categoryField: "MachineName",
spacing:-1
}],
valueAxis: {
min: new Date("2016/03/09 01:00 AM").getTime(),
max: new Date("2016/03/09 11:00 PM").getTime(),
majorUnit: 60 * 60 * 1000 , // 60 minutes in milliseconds
labels: {
template: "#= kendo.toString(new Date(value), 'HH:mm') #"
}
},
legend: {
visible: false
}
});
</
script
>
</
body
>
</
html
>
When user select an image from the image browser, it inserts to the Editor as next:
<img alt="" src="/Learn/ImageBrowser/Image?path=Chrysanthemum_636263051836972436.jpg" />
While adding the image we also can set Alt text, Width, Height.
But how to add class to <img> tag?
Result has to be like: <img class="img-responsive" alt="" src="/Learn/ImageBrowser/Image?path=Chrysanthemum_636263051836972436.jpg" />
Hi team,
The complete event is not fired after a remove operation. Why ?
I need to do some data consolidations after a remove operation by looping thru .k-file.k-file-success <li>
At present (kendo 2016.1.226), I was using the success event to do so, and it was ok.
Now (updrade to kendo 2017.1.223), It seems that a .k-file.k-file-success <li> removal is deffered and so is still present on success event.
Please advise,
Best regards.
<
script
id
=
"rowTemplate"
type
=
"text/x-kendo-tmpl"
>
<
tr
data-uid
=
"#: uid #"
>
<
td
>
<
span
>#: Name #</
span
>
</
td
>
<
td
>
<
span
>#: CreatedBy #</
span
>
</
td
>
<
td
>
<
span
>#: kendo.format("{0: dd-MMM-yyyy}", CreatedDate) #</
span
>
</
td
>
<
td
>
<
span
>#: InUse #</
span
>
</
td
>
<
td
>
HOW DO I GET THE COMMAND BUTTONS HERE?
</
td
>
</
tr
>
</
script
>
columns: [
{ field: "Name", title: "Skill", width: "130px" },
{ field: "CreatedBy", title: "Created by", width: "130px" },
{ field: "CreatedDate", title: "Created at", width: "130px" },
{ field: "InUse", title: "In use?", width: "130px" },
{ command: ["edit", "destroy"], title: " " }
]
rowTemplate: kendo.template($("#rowTemplate").html())
Im using the Kendo UI Editor and I'd like to dynamically display QrCodes into the Editor.
So Ive added a Custom Tool Button item that calls the following method:
function
insertQRCodeTest() {
var
editor = getEditor();
var
qrCodeDiv =
"<div id='qrCode1'></div>"
;
editor.exec(
"insertHtml"
, { html: qrCodeDiv, split:
false
});
$(
"#qrCode1"
).kendoQRCode({
errorCorrection:
"M"
,
size: 120,
border: {
color:
"#000000"
,
width: 5
}
});
}
The qrCode1 div is added however the QrCode is not genearted\displayed - is this even possible?
Hello,
Im triyng to build a schedular that has a different template for an existing event, but also return the standard create event template when it's a new event.
var d = new Date();
d.setHours((d.getHours() - 4), 0, 0, 0);
$("#scheduler").kendoScheduler({
date: new Date(),
startTime: d,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
"agenda",
{ type: "timeline", eventHeight: 50 }
],
editable: {
template: function (
if (e.taskId > 0) { // check if new or existing task by e.taskId
return $("#contactForm").html();
}
return // this is where i want to return the standard template.....
}
},
edit: function (e) {
var buttonsContainer = e.container.find(".k-edit-buttons");
var cancelButton = buttonsContainer.find(".k-scheduler-cancel");
var saveButton = buttonsContainer.find(".k-scheduler-update");
saveButton.html($("#contactForm .k-buttons .add-button")[0]);
cancelButton.html($("#contactForm .k-buttons .cancel-button")[0]);
},
timezone: "Etc/UTC",
dataSource: {
transport: {
read: {
url: "/api/calendar/GetAgendaItems",
contentType: "application/json; charset=utf-8",
method: "GET",
dataType: "json",
isASPNETPost: false,
data: { EmployeeId: '71' }
},
update: {
url: "/api/calendar/UpdateAgendaItem",
method: "PUT",
dataType: "json"
},
create: {
url: "/api/calendar/CreateAgendaItem",
method: "",
dataType: "json"
},
destroy: {
url: "/api/calendar/AgendaItem",
method: "DELETE",
dataType: "json"
},
parameterMap: function (options, operation) {
console.log(kendo.stringify(options), operation);
if (operation !== "read" && options.models) {
return options.models[0];
//return kendo.stringify(options);
}
return options
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "taskID", type: "number" },
title: { from: "title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "startTime" },
end: { type: "date", from: "endTime" },
startTimezone: { from: "startTimezone" },
endTimezone: { from: "endTimezone" },
description: { from: "description" },
recurrenceId: { from: "recurrenceID" },
recurrenceRule: { from: "recurrenceRule" },
recurrenceException: { from: "recurrenceException" },
ownerId: { from: "ownerID" },
isAllDay: { type: "boolean", from: "isAllDay" }
}
}
}
},
resources: [
{
field: "ownerID",
title: "HomeVisitor",
dataSource: {
transport: {
read: {
url: "/api/calendar/GetEmployees",
method: "GET"
}
}
}
}
]
});
Hello,
is there any way to customize "timeline month" (or any other view) so that it shows
each day (in selected month) in its own row. Check image...
Is there any different view or some other control that I can use for my problem...
Thank you.