Hi,
I am trying to display a diagram with the following code. I took this from the "Editing" sample posted in Telerik site. After ensuring that it works with the Telerik's data services on my page, I am trying to use it with my own service. This doesn't work. Can someone please help?
Please note: I have intentionally commented the connection piece to first debug the data source piece. I am also attaching a sample of my connections service which returns connections between two entities using LE_Code & F_LE_Code (whose values can be same sometimes. So, we need to add a filter to filter out the items where LE_Code & F_LE_Code are the same). Please suggest how should I specify the connections code and schema?
Code
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
g.append(new dataviz.diagram.Rectangle({
width: 240,
height: 67,
stroke: {
width: 0
},
fill: "#e8eff7"
}));
return g;
}
function onDataBound(e) {
var that = this;
setTimeout(function () {
that.bringIntoView(that.shapes);
}, 0);
}
//function createDiagram() {
//var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
var shapesDataSource = {
batch: false,
transport: {
read: {
url: "Server/SQLService.svc/GetLEData",
dataType: "jsonp"
}//,
//update: {
// url: serviceRoot + "/DiagramShapes/Update",
// dataType: "jsonp"
//},
//destroy: {
// url: serviceRoot + "/DiagramShapes/Destroy",
// dataType: "jsonp"
//},
//create: {
// url: serviceRoot + "/DiagramShapes/Create",
// dataType: "jsonp"
//}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "PID", type: "number", editable: false },
LE_Code: { type: "string" },
LE_Country: { type: "string" }
}
}
}
};
var connectionsDataSource = {
batch: false,
transport: {
read: {
url: serviceRoot + "/DiagramConnections",
dataType: "jsonp"
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "Id", type: "number", editable: false },
from: { from: "FromShapeId", type: "number" },
to: { from: "ToShapeId", type: "number" },
fromX: { from: "FromPointX", type: "number" },
fromY: { from: "FromPointY", type: "number" },
toX: { from: "ToPointX", type: "number" },
toY: { from: "ToPointY", type: "number" }
}
}
}
};
$("#diagram").kendoDiagram({
dataSource: shapesDataSource,
layout: {
type: "tree",
subtype: "tipover",
underneathHorizontalOffset: 140
},
shapeDefaults: {
visual: visualTemplate,
content: {
template: "#= dataItem.JobTitle #",
fontSize: 17
}
},
connectionDefaults: {
stroke: {
color: "#586477",
width: 2
}
},
dataBound: onDataBound
});
Sample JSON data returned from my GetLEData service
[{"LE_Code":"CO001","LE_Country":"USA","PID":1},{"LE_Code":"CO002","LE_Country":"Canada","PID":2},{"LE_Code":"CO100","LE_Country":"USA","PID":3},{"LE_Code":"CO101","LE_Country":"China","PID":4},{"LE_Code":"CO105","LE_Country":"United States","PID":5},{"LE_Code":"CO110","LE_Country":"United States","PID":6},{"LE_Code":"CO180","LE_Country":"Canada","PID":7},{"LE_Code":"CO210","LE_Country":"Brazil","PID":8}]
Sample JSON data returned from my connections service
[{"AccountID":4,"Country":"Singapore","F_LE_Code":"CO510","Function":4,"LE_Code":"CO510","Label":"OSP","PID":1,"Performed":0,"Return":0,"Treatment":"Cost +","TreatmentID":2},{"AccountID":4,"Country":"Singapore","F_LE_Code":"CO510","Function":4,"LE_Code":"CO510","Label":"OSP","PID":2,"Performed":0,"Return":0,"Treatment":"Cost +","TreatmentID":2},{"AccountID":10,"Country":"China","F_LE_Code":"CO780","Function":7,"LE_Code":"CO527","Label":"Royalty","PID":58,"Performed":1,"Return":0,"Treatment":"% Sales","TreatmentID":1},{"AccountID":10,"Country":"United States","F_LE_Code":"CO780","Function":7,"LE_Code":"CO100","Label":"Royalty","PID":59,"Performed":1,"Return":20,"Treatment":"% Sales","TreatmentID":1},{"AccountID":5,"Country":"Isle Of Man","F_LE_Code":"CO790","Function":2,"LE_Code":"CO790","Label":"CSP","PID":60,"Performed":1,"Return":1,"Treatment":"Cost +","TreatmentID":2},{"AccountID":10,"Country":"China","F_LE_Code":"CO780","Function":7,"LE_Code":"CO527","Label":"Royalty","PID":61,"Performed":1,"Return":0,"Treatment":"% Sales","TreatmentID":1},{"AccountID":10,"Country":"United States","F_LE_Code":"CO780","Function":7,"LE_Code":"CO100","Label":"Royalty","PID":62,"Performed":1,"Return":-2,"Treatment":"% Sales","TreatmentID":1}]
Appreciate your help!
Thanks,
Hi,
When I set "selectable: true" to help to select multiple events on desktop screen but in mobile I can not do it. Is it possible to select multiple events on mobile?
For other things after selecting multiple events how I can open the editor form with these values, currently the scheduler open dialog editor form when we click on one cell.
Thanks in advance!
Hello, i'm creating a Gantt Chart and i have two issues:
1) If i change the task template to remove task name inside task, the task height is reduced.
Using this template:
1.
<
script
id
=
"task-template"
type
=
"text/x-kendo-template"
>
2.
<
div
class
=
"template"
>
3.
<
div
class
=
"wrapper"
> </
div
>
4.
<
div
class
=
"progress"
style
=
"width:#= (100 * parseFloat(percentComplete)) #%"
> </
div
>
5.
</
div
>
6.
</
script
>
Check how it looks like: https://www.screencast.com/t/FoXLG7lQNQoh
2) I am creating dependencies with type 1 but i'm getting the following location for dependency row.. It should start at the enf of the task, but it is starting in the middle.
Check how it looks like: https://www.screencast.com/t/FoXLG7lQNQoh
In Html i'm importing this:
1.
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.common-material.min.css"
/>
2.
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.material.min.css"
/>
3.
<
script
src
=
"http://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"
type
=
"text/javascript"
></
script
>
4.
<
script
src
=
"http://kendo.cdn.telerik.com/2017.3.913/js/kendo.timezones.min.js"
type
=
"text/javascript"
></
script
>
This is my data:
Parent Task:
{"ID":2,"Title":"ParentTask","ParentID":null,"OrderID":0,"Start":"2017-04-21T11:23:25","End":"2017-04-22T11:47:25","PercentComplete":0,"Summary":true,"Expanded":true,"ItemNo":"Item1"}
Child Tasks:
{"ID":3,"Title":"Op1","ParentID":2,"OrderID":0,"Start":"2017-04-21T11:23:25","End":"2017-04-21T19:31:25","PercentComplete":0,"Summary":false,"Expanded":true,"ItemNo":""}
{"ID":4,"Title":"Op2","ParentID":2,"OrderID":1,"Start":"2017-04-21T19:31:25","End":"2017-04-22T03:39:25","PercentComplete":0,"Summary":false,"Expanded":true,"ItemNo":""}
{"ID":5,"Title":"Op3","ParentID":2,"OrderID":2,"Start":"2017-04-22T03:39:25","End":"2017-04-22T11:47:25","PercentComplete":0,"Summary":false,"Expanded":true,"ItemNo":""}
Dependencies:
{"ID":4,"PredecessorID":3,"SuccessorID":4,"Type":1}
{"ID":5,"PredecessorID":4,"SuccessorID":5,"Type":1}
Could anybody give me some workaround for both issues?
Thank you so much
Maybe I'm overlooking something easy, but I can't seem to simply change the background color of my kendo grid header.
This is what I have, (it everything runs, but the base theme never changes)... (no centering, no bg color change). What am I missing?
CSS
.k-header{
text-align: center;
background-color: #ff0099;
}
JS
$("#agencyListGrid").kendoGrid({
columns: [{
field: "agencyName",
title: "Agency"
},
{
field: "agencyID",
title: "View",
width: 100
},
{
field: "agencyID",
title: "Archive",
width: 100
}],
dataSource: {
data: this.agencyList.agencies,
pageSize: 15
},
height: 500,
pageable: {
pageSizes: true,
buttonCount: 5
}
});
Hello,
I have a drop down list used in MVVC SPA app. It is bound to very large (30K+ records) dataset using DataSource object with server paging and filtering enabled.
Selected item of drop down list is bound to Observable object.
When user changes value of drop down list, change event fired and user is redirected to:
router.navigate('/customers?<selected ID>');
where <selected ID> is selected value.
Then the route function looks like this:
router.route("/customers", function(params) {
viewApp.set('customerId', params.customerId);
...
So before I show view, I set customerId property of model which is bound to dropdownlist.
It's works, but only if selectedId is in "first page" of server results (server paging is enabled).
How can I solve this?
I have a function that opens a window.
When the window is closed, the vertical scroll bar is not restored.
Please see this dojo: https://dojo.telerik.com/ecOcA/2
Am I doing it the wrong way?
/Morten
Hi,
I'm wondering if it is possible to partially format a cell from the exported Excel?
For example, I have a string like "Product1: name1, name2 etc." I only want bold text on "Product1".
Hello
When calling .maximize() on a Kendo UI window the body and html page elements are given an overflow CSS rule of hidden.
Following this if destroy is called the window disappears but leaves the body/html overflow rule in place. This causes the page to not be scrollable.
Reproduction steps from the kendo dojo:
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Untitled</
title
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css"
>
<
script
src
=
"http://code.jquery.com/jquery-1.9.1.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"window"
>
<
p
>test</
p
>
</
div
>
<
p
>
<
script
>
$(document).ready(function() {
console.log($("html").css("overflow")); // Visible
var kendoWindow = $("#window").kendoWindow({}).data("kendoWindow");
kendoWindow.maximize();
kendoWindow.destroy();
console.log($("html").css("overflow")); // Hidden
});
</
script
>
</
body
>
</
html
>
Thanks,
Ben
Hi
I want to add the results from an AutoComplete, into the Multiselect on the fly (ie as you select it in autocomplete, it adds it to multi-select)
Are there any examples of this?
This is Kendo UI for MVC
OK, so let's assume we have two makes and two models, like this
Makes: Ford, Chevy
Models: (Ford, Pinto), (Ford, Fiesta), (Chevy, Silverado), (Chevy, Citation)
I want to have a data grid. On that data grid, there will be an 'Add' button. Each time that add button is clicked a new row is added to the grid, and the user chooses a make and a model.
After adding all their makes and models the user hit a big GO button and the whole smash is sent to the server to be saved.
I cannot figure out how to make this happen. I am new to Kendo, completely worthless with JavaScript, and have absolutely no idea what I'm doing.
Thanks