Questions on Kendo UI for jQuery Forum

6 answers

162 views

Need help with binding external data and setting up connections

Hi,

I am trying to create a diagram hierarchy for some company data. I started with the demo "Editing" diagram posted on the site (http://dojo.telerik.com/uNUrU) and tried to update the data service. But, my diagram is not working. My code and the data returned by my services is shown below. I have commented out the connections piece to debug the data source issue. Appreciate your help in fixing the data issue and also pointers on how to defined the connections object and schema -

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: "https://Service/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

});

JSON sample from 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}]

JSON sample from 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":"Austria","F_LE_Code":"CO780","Function":7,"LE_Code":"CO746","Label":"Royalty","PID":57,"Performed":1,"Return":0,"Treatment":"% Sales","TreatmentID":1},{"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}]

Diagram

answered on 27 Oct 2017

3 answers

149 views

Issue Accessing Nested Object Properties in SharePoint 2013

I'm experiencing issues accessing properties of an object nested (a couple levels down). The REST call is pulling in a couple lookup columns using $expand.
I seem to be able to access a couple layers, but I'm not able to access the needed property.

Schema

schema: {

data: "d.results",

}

The lookup Column is (e.g.) "team_Info", and the 2 linked columns are "Team_MemberName" (Text) & "Team_Branch" (Calculated).

I'm using this data in a comboBox, so I'd set up...

ComboBox Definition

$("#combobox_teamInfo").kendoComboBox({

dataSource: $myDataSource,

dataTextField: "team_Info.results[0].Team_MemberName",

dataValueField: "",

});

The problem is team_Info.results[0].Team_MemberName is returned as undefined.
On testing, team_Info[0] does return a series of objects, but I'm unable to access any sub-property of that object.

Thx!

Data Source

answered on 27 Oct 2017

1 answer

2.1K+ views

Dropdonw: Multi column support in dropdown list

HI ,

I have a requirement where I need to show drop down options is a table format with headers and data(i.e like combox with mutiple columns in windows) and user should be able to select a row from the options. is it feature is supported in kendo UI dropdown .if yes can you please help me with a sample.

please find the attached screen shot .

General Discussions

answered on 26 Oct 2017

2 answers

100 views

How to stop gridlines from crossing Y axis?

There's a "feature" of the chart where the horizontal gridlines cross the Y axis and lead to the labels. I'd like them to terminate at the .

It looks like the attached now and the circled bit is the area (on each line) like to remove/terminate at the .

Any ideas how to do this?

Charts

answered on 26 Oct 2017

2 answers

453 views

Spreadsheet List of format specifiers

Hi!

Please have a look at this demo: notice that rows 5 and 6 have custom format, where I want to add currencies (exotic ones). However, I discover that "S" and "H" seem to be custom format specifiers.

Can you provide a list of this special specifiers to know what special characters to escape?

Thanks!

Spreadsheet

answered on 26 Oct 2017

1 answer

131 views

Grid loses resized column widths

I have a kendo grid and few actions buttons top of the kendo grid. When I resized the column widths and then mouse over on action button, the grid loses it adjusted widths.

Note : It happens on all the browsers.

Grid

answered on 26 Oct 2017

2 answers

214 views

How to change the name of the excel toolbar for all grids?

Grid

answered on 26 Oct 2017

3 answers

399 views

Making a clickable calendar with ListView

Hey,

We're trying to implement a clickable calendar view. The idea is that a user can see a month as a grid with each grid element representing a day. And each day can contain a record (or several) of their work that day ; i.e. that they worked from 08-16 that day . We would like that when the user clicks on a day, it would open a list of their records for that day (right below the day they clicked, so that the calendar would "split in two" in order for the list to be placed just below the day.

I attached a picture for reference. Is this something that would be possible the ListView component? I can imagine the calendar wouldn't be much of an issue to make, but I'm more uncertain if it's possible to show the list (when clicking a day) in the manner described.

ListView

answered on 26 Oct 2017

4 answers

1.1K+ views

Double-click prevention

I have a kendo grid with its dataSource, the grid has an editor dialogue with save button. I need to prevent the save button being double clicked. The onSave functions fire when the save button is clicked. I have a requestEnd event that fires when the save is to be re-enabled.

The problem: onSave1 fails 1 time in 100 (I think, its proving very difficult to test). It's based on adding an additional click handler, invoking preventDefault(). Is it fundamentally flawed?

Is onSave2 any better?

onSave1: function (e) {

$(event.srcElement)

.addClass("k-state-disabled")

.bind("click", disable = function (e) { e.preventDefault(); return false; })

this.dataSource.one("requestEnd", function () {

$("[data-role=window] .k-grid-update").off("click", disable).removeClass("k-state-disabled");

})

}

onSave2: function (e) {

$(event.srcElement).removeClass(".k-grid-update").addClass("k-state-disabled").addClass("disabledMarker");

this.dataSource.one("requestEnd", function () {

$("[data-role=window] .disabledMarker").addClass(".k-grid-update").removeClass("k-state-disabled").removeClass("disabledMarker");

})

}

Grid

answered on 26 Oct 2017

3 answers

2.7K+ views

Kendo Grid - Update in cell edit data

I have editable grid and wants to update (using Rest API) edited value in two cases 1) Call update function in specific time interval 2) Call update function when cell focus out.

I have separate JavaScript function to update remote data.

How to achieve this?

Grid

answered on 26 Oct 2017