Questions on Kendo UI for jQuery Forum

1 answer

238 views

Hi There, I am new to Telerik but would like to get this working. I have a JSON URL and i am trying to drill down and show all the results of the child nodes under each entry section. THough i cant seem to get this schema defined correctly. If i want to show fields from the lowest node in xml/json how do i define it. The child node examples dont make it clear. Below url is test data so feel free to use.

Thanks

Brandon

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding">

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />

<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

<div id="grid"></div>

<script>

$(document).ready(function() {

$("#grid").kendoGrid({

dataSource: {

type: "odata",

transport: {

read: "http://fhir.healthintersections.com.au/open/Patient?&_format=json"

},

schema: {

model: {

fields: {

title: {type: "string" },

title: { type: "string" }

}

},

pageSize: 20,

serverPaging: true,

serverFiltering: true,

serverSorting: true

},

height: 550,

filterable: true,

sortable: true,

pageable: true,

columns: [{

field:"totalRsults",

filterable: false

}

]

});

</script>

</div>

</body>

</html>

Grid

answered on 02 Jun 2015

13 answers

570 views

SharePoint 2010 datasource

Hi,

I've been playing around with the Kendo UI datasource and have created a data plugin(?) for using the listdata.svc for SharePoint 2010, it is attached to this post as a zip file

it can be implemented using the following code

var dataSource = new kendo.data.DataSource({

type: "sharepoint",

transport: {

read: "_vti_bin/listdata.svc/Inventory"

},

schema: {

model: {

fields: {

Make: { type: "string" },

Model: { type: "string" },

Price: { type: "number" },

PictureUrl: { type: "string" }

}

},

pageSize: 5,

serverPaging: true,

serverFiltering: true,

serverSorting: true

});

I'm going to look at adding full CRUD functionality and will post any updates, this currently only does reading.

SharePoint 2010 listdata.svc ODATA implementation does not currently support JSONP, so this can only be used in the same domain.

Any comments or obvious errors please.

Data Source

answered on 01 Jun 2015

3 answers

645 views

Full Height PanelBar

Is there any way to achieve a full-height PanelBar with per-group scrolling? Specifically, what I'd like to achieve is to have the space available to the PanelBar be predefined. When the PanelBar starts all the items should be collapsed at the top (as usual). When you open an item, the content space should expand to fill up the entire allocated space, not just what's needed for the content. The other titles should end up at the bottom of the allocated space below the new content. If the content is to large for the space, then a scroll bar should be added inside the content area (not outside over the whole PanelBar - otherwise you have to scroll to get to the other PanelBar headings).

I'm looking for the exact same behavior as in this example for the ASP.NET Ajax PanelBar:
http://demos.telerik.com/aspnet-ajax/panelbar/examples/functionality/scrolling/defaultcs.aspx

Is this possible with the Kendo PanelBar?

PanelBar

answered on 01 Jun 2015

2 answers

140 views

Select() for The Second Grid On The Same Page Won't Work

Hello,

I have a situation where I need to put two grid on a same page. The problem is that when I try to select the first row in the grid, the select() for the second grid won't work. I used the example in the Telerik document and it does the same thing. Is there any way to work around this?

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/jszip.min.js"></script>
</head>
<body>

<div id="grid"></div>
<div id="grid2"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
selectable: "row"
});
var grid = $("#grid").data("kendoGrid");
grid.select("tr:eq(1)");

$("#grid2").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "bubba Doe", age: 40 },
{ name: "kate Doe", age: 21 }
],
selectable: "row"
});

var grid2 = $("#grid2").data("kendoGrid");
grid2.select("tr:eq(1)");

</script>
</body>
</html>

Thanks.

Grid

answered on 01 Jun 2015

1 answer

254 views

exportPDF and Embedded Base64 PNGs

Hi

I am currently trialing your product. Everything is working, with the sole exception of an issue that occurs when attempting to export a diagram to PDF, which is a crucial requirement.

Part of the requirement is that all PNGs used in the diagram must be embedded using Base64 Encoding, rather than the source URL of the image

i.e.

group.append(new dataviz.diagram.Image({
      source: "data:image/png;base64," + BASE64_STRING,
      x: 9,
      y: 20,
      width: 38,
      height: 38
    }));

This is working nicely both on screen and when exporting the diagram to SVG. However, when exporting to PDF, the chart is rendered without the embedded images.

Any advice would be very much appreciated.

Diagram

answered on 01 Jun 2015

1 answer

507 views

Page size dropdown hidden behind page footer.

We have a kendo grid that sits just above our page footer. The footer has a higher z-index than the grid. Because of this, when selecting the page size dropdown, some of the items are hidden behind the footer.

Is there a way to make the page size dropdown open upwards instead of down? We would prefer not to have to move the grid upwards away from the footer, as this would introduce empty space that is only there to give the page size dropdown something to open into.

Thanks!

Grid

answered on 01 Jun 2015

3 answers

159 views

Bindings cause leaks

Hello,

we have a problem with some memory leaks using the kendo MVVM Pattern. I try to explain it based on the following class:

var myClass = (function (_super) {

__extends(myClass, _super);

function myClass(ctx, folder, options) {

_super.call(this, ctx, folder, options);

this.containerRight = null;

this.viewModelRight = null;

}

myClass.prototype.init = function () {

var dfd = $.Deferred();

this.buildMenu().done(dfd.resolve).fail(dfd.reject);

return dfd.promise();

};

myClass.prototype.buildMenu = function () {

var _this = this;

var dfd = $.Deferred();

this.containerRight = this.container.find(".right");

this.viewModelRight = { items: new kendo.data.ObservableArray([]) };

kendo.bind(this.containerRight, kendo.observable(this.viewModelRight));

var selectViewViewModel = kendo.observable({

title: "test",

iconSource: "test",

iconStyle: "top: -270px; left: -73px;",

dataSource: [],

selectedValue: "",

selected: function (e) {

_this.doSomething();

}

});

this.viewModelRight.items.push(selectViewViewModel);

return dfd.resolve();

};

myClass.prototype.doSomething = function () {

};

myClass.prototype.destroy = function () {

_super.prototype.destroy.call(this);

kendo.unbind(this.containerRight);

};

return myClass;

})(vendor.Templates.TemplateBase);

The leak occures on

selected: function (e) {

_this.doSomething();

}

or on

selectViewViewModel.bind("selected", function() { _this.doSomething() });

//and

selectViewViewModel.bind("selected", _this.doSomething.bind(this));

Every access to a instancemethod or variable out of the viewmodel seams to cause a leak.

Directly in jQuery we could solve the problem with, but it has no impact on bindings within the kendo MVVM

something.bind("selected", _this.doSomething.bind(this));

Does someone know a solution for this problem?

Thanks in advance,

Michael

MVVM

answered on 01 Jun 2015

2 answers

287 views

[Solved] Simple example Html.Kendo().Map() is not displayed properly, how to troubleshoot?

I'm using prenty of Kendo controls in my asp.mvc application and there are no isssues. But when I try Map, on the separate page, with basic example http://demos.telerik.com/aspnet-mvc/map/index (just copy/paste) the map is 'broken'

How to find out what is the problem? Any ideas?

Map