Telerik Forums
Kendo UI for jQuery Forum
1 answer
132 views

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,

Stefan
Telerik team
 answered on 23 Oct 2017
1 answer
271 views

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!

Plamen
Telerik team
 answered on 20 Oct 2017
1 answer
148 views

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:

 

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

 

 

 

 

 

Veselin Tsvetanov
Telerik team
 answered on 20 Oct 2017
2 answers
2.0K+ views

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
}
});

Cedric Gaines
Top achievements
Rank 2
 answered on 19 Oct 2017
6 answers
1.9K+ views

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?

Ivan Danchev
Telerik team
 answered on 19 Oct 2017
3 answers
223 views

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

 

Misho
Telerik team
 answered on 19 Oct 2017
2 answers
390 views

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".

Yifan
Top achievements
Rank 1
 answered on 19 Oct 2017
3 answers
306 views

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>
 
 
  <script src="http://code.jquery.com/jquery-1.9.1.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

Plamen
Telerik team
 answered on 19 Oct 2017
1 answer
2.0K+ views

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?

Nencho
Telerik team
 answered on 19 Oct 2017
1 answer
157 views

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

Georgi
Telerik team
 answered on 19 Oct 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?