Introduction
While SharePoint Lists have their own user interface out of the box, using third-party components has its merits. SharePoint UI is very particular, and I do not always want to train my users how to maintain data in a unique way just because it is in SharePoint. Generally, my customers, and more often their internal UI/UX designers, want something that "doesn’t look like SharePoint"; a UI that fits the overall vision of their application.
This article is a review of Kendo UI by Progress through an example of creating the user interface for a SharePoint Online site, part of the Microsoft Office 365 Suite.
As a .NET Windows and ASP.NET developer for many years, I am experienced in using the Telerik UI controls for those platforms, including for custom ASP.NET Web Forms development for SharePoint On-Premise. More recently, I have successfully used Kendo UI in projects involving "modern" web front-end technologies including HTML5/CSS3 and JavaScript frameworks. Coincidentally, this is also the push we, SharePoint developers, are getting from Microsoft as we develop applications for SharePoint Online.
For this review, I will assume you have some experience at least using a SharePoint Team Site, most likely for the purpose of document collaboration. I will also assume you have some type of web development background, preferably with ASP.NET and Visual Studio as well as working knowledge of jQuery / JavaScript frameworks. I will also assume you have some experience developing solutions for some version of SharePoint.
What is Kendo UI and How It Fits in SharePoint/Office 365
Kendo UI provides the SharePoint developer with a comprehensive library of advanced, responsive HTML5 widgets, such as a powerful data grid, charts and scheduler. Importantly, it includes an Office 365-inspired theme to help developers customize Office 365 without having to spend time to write custom CSS and not have your custom UI look out of place. Kendo UI is not a replacement for your favorite JS framework; rather, it is designed to work alongside jQuery and Angular and make web developers more productive. It can even work alongside Office UI Fabric.
Kendo UI can be used not only in SharePoint Online, but also in SharePoint 2010 / 2013 / 2016 on-premise as well. This makes it a suitable choice for your "application modernization strategy." In fact, use Kendo UI now to develop in your current environment, knowing this will benefit you as you plan to migrate your applications from on-remise to the cloud.
You need not be a JavaScript guru before you can consider the benefits of Kendo UI. Kendo UI will boost your development productivity regardless of your current skill level. Both the beginner and expert will benefit. In fact, Kendo UI has helped accelerate my own modern web development learning curve.
Example Objectives
Often clients want a custom user interface experience for data that is ultimately stored in SharePoint lists. In fact, the client may not even know or care that you decided SharePoint was the best location to store this data, and further may even wish to hide this "internal detail" from the users. In this example, we’ll use the Kendo UI Grid control to display the data stored in a SharePoint Contact List. I also wish to complete this programming within hours, with as much configuration as possible, and ideally no coding.
If you wish to follow along with this review, create an OOTB Team Site and download Kendo UI. Using "Add an App" from the menu, add a "Contacts" list called "MyContacts," and create a few entries in this list.
Your site should be similar to the following:
And your MyContacts list should appear similar to the following:
Deploy Kendo UI References
No matter what JS framework you want to work with in SharePoint Online (e.g. Angular), you would need to inject any related JS and CSS references into SharePoint’s OOTB ASP.NET Master page. Kendo UI is no different, so I will use Visual Studio’s SharePoint tools to create a Declarative Sandbox Solution (WSP) with a "Kendo UI References" feature that will use Custom Actions to inject the references into the ASP.NET Master Page. At this point, I would be able to use Kendo UI controls on any page within my site collection. The following Kendo UI JS files are required, and will be deployed using a Module into a Kendo UI sub-folder of the SharePoint site’s Style Library:
- /js/jquery.min.js
- /js/kendo.all.min.js
Here is a sample of one Custom Action for the JS files:
<CustomAction
ScriptSrc="~SiteCollection/Style Library/KendoUI/js/jquery.min.js"
Location="ScriptLink"
Sequence="110" />
The following set of Kendo UI CSS files is required, as referenced from the Content Delivery Network (CDN):
- http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-office365.min.css
- http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.office365.min.css
- http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.dataviz.min.css
- http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.dataviz.office365.min.css
And here is a sample of one Custom Action to inject the CSS reference into the master page:
<CustomAction Location="ScriptLink"
ScriptBlock="document.write('<link rel="stylesheet" type="text/css" href="http: Sequence="100" />
This is how my Visual Studio Solution looks:
Please remember for a declarative sandbox solution to set the "Include Assembly in Package" property to False. After building the project, publish the WSP and then upload it to the Solutions Gallery (in Site Settings) and activate it:
From Site Collection Features, ensure the Kendo UI References feature appears and has been activated.
You can also verify from a View Source in the web browser that the file references above have indeed been injected into the page.
Get a Kendo UI Online Sample to Work
To test if our Kendo UI references are working, let’s refer to the Kendo UI basic grid sample. The steps required to get the sample working in our SharePoint Online Team Site:
- Add a new page, call it "Basic Grid Sample"
- The page will appear in edit mode. Use the Ribbon to "Edit Source" and place the following HTML snippet. Click Ok.
<div id="grid"></div>
- Using the ribbon, choose to "Insert a Web Part". Choose the Script Editor Web Part from the "Media and Content" group and place it on the page.
- Using the Web Part drop-down menu, choose to "Edit Web Part". Choose the "Edit Snippet" link.
- Paste in the following, which is an exact cut and paste from the Telerik web page:
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script
- Close the editor, Click OK in the web part edit pane, and save the page.
Your page should now appear similar to the following:
I admit to being pleasantly surprised at how quickly I got to this point!
Hooking Kendo UI up to Read from SharePoint Lists
The last section just showed that you can take just about any Kendo UI sample you find on their web site and get it running pretty much "as is" in SharePoint Online. But of course we have our UI there because we want to be reading from SharePoint lists. Have a look at the following modifications to the Data Source to have it reading from a SharePoint List:
dataSource: {
type: "json",
transport: {
read: {
url: "http://kendoui.office365.teleriknext/sites/kendoui/_api/lists/getbytitle('MyContacts')/items",
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json; odata=verbose")
}
}
},
schema: {
data: function (data) {
return data.d && data.d.results ? data.d.results : [data.d];
}
},
pageSize: 20
},
The important changes are to modify the Accept header to specify JSON return format with "odata=verbose", as SharePoint returns Atom (RSS) formatted data by default. And then to specify a schema that targets the "data.d" node.
The column names were changed to reflect the equivalent internal names of SharePoint contacts List, which you can discover for yourself by inspecting a response using Fiddler. In this case, the desired columns are Title (Last Name), FirstName, JobTitle, Company, and WorkCountry.
Following the same steps as above in adding the "Basic Grid Sample", we can create a "MyContacts Sample" page, add the grid DIV, and the Script Editor web part with the updated JavaScript. The resulting page should look like:
No Styling Required!
You may notice that I spent exactly zero time on the styling of these controls. Let’s say I had elected instead to use the jQuery DataTables plugin for this task instead. I would now have been faced with the styling work to get my grid / data table to "fit in" with the Office 365 UI. And since CSS styling is definitely not one of my strong points, this would have meant many frustrating hours of absolutely no value added work to my task. This addresses one control of many I might use in a typical application. What about a type ahead search? A better calendar? A scheduler control? Charts and graphs?
The Kendo UI DataGrid blended in seamlessly with the Office 365 UI because Progress (formerly Telerik) has provided an Office 365 theme that works with all of the controls. So in summary, many tedious hours were eliminated, allowing the SharePoint developer to focus on the functionality and business value without having to worry about how it is going to look.
Conclusion
My goal was to create a Kendo UI Grid control to display the data for a SharePoint Contact List. I was able to accomplish my task within a day even with the learning curve involved. On top of this, there was absolutely no coding, just configuration of the widgets. Finally, I can re-use much of what I have created for future applications, now cutting my development time down to mere hours.
A final and significant reason for choosing Telerik controls and Kendo UI to boost my developer productivity is the "per developer" licensing model. It allows me to create as many applications as I want using the tools and distribute them royalty-free. The licensing includes technical support I believe is second to none in the developer tools industry. However, you may often find the answer before having to engage support, whether in the meticulous documentation or the active customer forums. A favorite resource for technical articles and information is Telerik Developer Network, where you can also find an excellent getting-started article, Building SharePoint Add-ins with Kendo UI.
For proper evaluation of Kendo UI, download the free trial.
