Mehul Harry's DevExpress Blog

This Blog

News


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)

Archives

October 2014 - Posts

  • 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:

    DevExpress DevExtreme Web DataGrid - CodeMash 2015 Sessions and Speakers

    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

    Cross-platform HTML 5/JS tools for next-generation mobile and web development

    DevExtreme tools deliver an innovative solution for developers who want to create stunning, multi-screen applications across platforms and devices, from Windows 8 devices and the iPad to smartphones like the iPhone and Android. With the power of HTML5, CSS and JavaScript tools in DevExtreme developers can also build interactive and engaging web applications that push the boundaries of user experiences to a new level.

    Download a free and fully-functional version now: http://js.devexpress.com/

LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners