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

KendoUI chart in Office 365

3 Answers 70 Views
Charts
This is a migrated thread and some comments may be shown as answers.
PaulH
Top achievements
Rank 1
PaulH asked on 04 Jan 2013, 04:26 PM
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.

3 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 09 Jan 2013, 09:20 AM
Hi,

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.

Kind regards,
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
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.
0
T. Tsonev
Telerik team
answered on 14 Feb 2013, 12:04 PM
Hello,

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.

All the best,
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!
Tags
Charts
Asked by
PaulH
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
PaulH
Top achievements
Rank 1
Share this question
or