HTML 5 JavaScript DataGrid and CodeMash 2015 Speakers/Sessions Demo

Check out this example of how the versatile DevExtreme DataGrid Widget can easily bind to a WebAPI service and give you great client-side UI and functionality:

Background

My friend Jason Follas is one of the organizers that puts on the excellent CodeMash conference.

One of the many tasks of managing a conference is to setup the sessions and speakers. And Jason wanted to create a fast client-side (JavaScript) user interface to display the sessions and speakers.

So Jason took the excellent DevExpress DevExtreme DataGrid widget and bound it to this WebAPI feed that returns a list of speakers and session data.

By using the DevExtreme DataGrid widget, you get features like sorting, filtering, and much more.

How can I do that?

1. Create a simple HTML page like this: DevExtreme Documentation: Configure DataGrid. You'll notice that you don't even need to host the DevExtreme libraries on your server. You can use our CDN!
   
2. You'll need a source of data. The data could be local but it makes sense to put it on a web server when you have a large amounts of data. I recommend you create an OData feed using ASP.NET (WebAPI or WCF). *
   The CodeMash WebAPI feed is hosted on Azure and bound to the DevExtreme DataGrid using the getJSON call:
   *$.getJSON("https://cmprod-speakers.azurewebsites.net/api/sessionsdata").then(function processSessionData(data)
3. And deploy! You could setup a few more options and features of the DevExtreme DataGrid but at this point, you're ready to deploy. And because the libraries are hosted on our CDN, you only need to deploy one file!

Online sample and source code

Try the DevExtreme DataGrid that displays the CodeMash 2015 speakers and sessions online here:

DevExtreme DataGrid and CodeMash 2015 Speakers/Sessions Demo

(For the source, simply right click and select view-source).

Learn more

Watch this 9 minute YouTube video to learn about DevExtreme DataGrid:

DevExpress DevExtreme - HTML5 DataGrid

Then watch this webinar to learn about different ways to databind the DevExtreme DataGrid:

Sipping from the Data Firehose with DevExtreme