This is a migrated thread and some comments may be shown as answers.

KendoUI chart in Office 365

3 Answers 175 Views

Charts

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 12 Feb 2013, 01:35 PM

I've finally got round to working on this and have indeed managed to get a Kendo UI grid and chart working inside Office 365 having made use of various posts on your forums for instruction/assistance. I can now easily extend it on to provide more of the functionality I want. However, there remains one issue which I can't find any advice on. While this works perfectly inside a page in Office 365 if I use the exact same code in a web page outside of the Office 365 Sharepoint site I get my grid or data showing but no data. This will be a requirement of our customer as they want their clients to be able to view the data without having to be given direct user access to the Office 365 system. I'm assuming that this is going to be an issue of authentication as I am not providing any means of authentication to request the data. In my test set up I'm using a Windows Live ID and I believe the client will be too. Do you have any idea on how I would go about adding authentication so an external site can get access to the Office 365 data in the same way? I've searched far and wide but have so far failed to find anything useful.

For your reference, my code for a sample grid looks is like the following (obviously I've "anonymised" the actual Office 365 web address):

<head runat="server">

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.default.min.css" rel="stylesheet" />

<script src="js/jquery.min.js" type="text/javascript"></script>

<script src="js/jquery.tmpl.min.js" type="text/javascript"></script>

<script src="js/kendo.web.min.js"></script>

<title>Office 365 Chart/Grid Demo</title>

</head>

<body>

<form id="form1" runat="server">

<script id="SupplierTemplate" type="text/x-kendo-tmpl">

<span> ${ Supplier.Name } </span>

</script>

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

<script>

$(document).ready(function () {

var ds = new kendo.data.DataSource({

type: "odata",

transport: {

read: {

url: "http://office365webaddress/TeamSite/Demonstration/_vti_bin/listdata.svc/PurchaseInvoices?$expand=Supplier",

contentType: "application/json; charset=utf-8",

type: "GET",

dataType: "json"

},

schema: {

data: "d.results",

model: {

fields:

{

Title: { type: "string" },

InvoiceDate: { type: "date" },

InvoiceNumber: { type: "string" },

Supplier:

{

Name: { type: "string" }

}

},

pageSize: 10,

serverPaging: true,

serverFiltering: true,

serverSorting: true

});

$("#grid").kendoGrid({

dataSource: ds,

filterable: true,

sortable: true,

pageable: true,

columns:

[

{

title: "Supplier",

template: kendo.template($("#SupplierTemplate").html())

},

{ field: "InvoiceNumber", title: "Inv No" },

{ field: "InvoiceDate", title: "Inv Date", format: "{0:dd/MM/yyyy}", sortable: true },

{ field: "Title", title: "Title" }

],

});

</script>

</form>

</body>

Any assistance would be greatly appreciated.