We have been asked to produce a page within Office 365 for a client and he really wants a fairly sophisticated chart within the page reporting data from some of his Sharepoint lists. The page will also contain other information as well as including a grid of data all of which we feel we can do with the tools provided. As I understand it's not possible to use AJAX controls in Office 365 can KendoUI be used in this way?
Thanks in advance for any advice you can provide.
Thanks in advance for any advice you can provide.
3 Answers, 1 is accepted
0
Hi,
Tsvetomir Tsonev
the Telerik team
We don't have any concrete experience with Office 365, but as far as I understand most limitations are related to the server-side code. Kendo UI runs entirely in the browser and should not be affected by these limitations.
The next step would be to expose the SharePoint lists to the widgets. The OData API provided by Office 365 should be sufficient for this task. Please, see this example of a Kendo UI Grid bound to an OData data source.
I hope this helps.
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
PaulH
Top achievements
Rank 1
Rank 1
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):
Any assistance would be greatly appreciated.
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>0
Hello,
Tsvetomir Tsonev
the Telerik team
I don't think we'll be able to help here. You've got everything set up correctly, but the access control is entirely in the hands of the Office 365 team.
Your best bet is to address this question to the Office 365 support staff. They should at least confirm if this is possible before getting to the technical details.
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!