Watching your customers being successful with your framework is tremendously gratifying. That's one of the perks of my role as a Developer Evangelist for Kendo UI; working closely with customers, I have a unique view of the amazing solutions that are being built by developers targeting Kendo UI. In this blog post, I wanted to share one such example, AdvancedREI.
Dubbed as a solution for "the next generation of commercial real estate", AdvancedREI (@AdvancedREI) is an Anaheim-based and BizSpark-supported startup founded by Jeff Yrueta and Robert McLaws that launched earlier this month. It provides a solution that's designed to help real estate professionals to market, share, and analyze commercial property investment opportunities. Here's how Robert described it:
Behind the Music with AdvancedREI and Kendo UI
Our story begins earlier this year when I received a message from Robert McLaws who was experiencing some rendering issues with the Grid of Kendo UI Web. After some back-and-forth over email, I decided to connect with Robert on Skype for some pair debugging. (I often employ a Morpheus-like "show me" approach when troubleshooting issues with our customers.) After a 2-hour code review, which included the use the 3D view of page inspector in Firefox to troubleshoot a funky CSS z-indexing issue, we had a good workaround. At the time, I didn't realize what Robert had built. However, after a few emails and Skype calls relating to Kendo UI, I started to see a pretty awesome-looking application taking shape.
Looking at its technical underpinnings, AdvancedREI uses a combination of Windows Azure, ASP.NET 4.5, Kendo UI Web, and Bootstrap from Twitter. As you can see in these screenshots, AdvancedREI takes advantage of various widgets in Kendo UI Web to deliver a compelling solution to its users. These widgets include the Calendar, DropDownList, Grid, Splitter, TabStrip, and Window. Furthermore, it utilizes the DataSource throughout the entire site to facilitate two-way data binding between the browser and the web server. The data comes from a set of JSON-based endpoints that route to action methods in ASP.NET MVC.
Let's take a closer look at how AdvancedREI uses Kendo UI Web:
This view provided a detailed listing of all the financials relating to the property. This financial data bound through a DataSource component to the Grid of Kendo UI Web. The Grid is configured to support paging, sorting, and filtering. Users can perform inline edits to residential units for columns that contain dates. For these updates, the Grid provides a Calendar for selecting when a lease has started and when a tenant has vacated a property.
This view allows the user to manage listing attributes. These are the characteristics and/or features that make up a property. In this view, you can see the effective use of a Grid to display a grouped list of attributes. Inline editing is also enabled on this Grid, which enables user to perform actions such as selecting attribute types (i.e. Elevator Type). These types are provided through a DropDownList that's bound via a DataSource component. Just like the previous view, users may also sort via column headings.
Here are some highlights that Robert shared with me in an email:
- Combining Kendo UI Web and Bootstrap lets us support all kinds of devices and resolutions
- The outer tabs of each view feature the TabStrip of Kendo UI Web but inner "pills" are Bootstrap
- Each Grid was initially used without the ASP.NET MVC server wrappers, but we've already begun the transition to the server wrappers, which are currently used when adding a new Property and on the Details tab
- The new "RequestEnd" event in the latest Q2 release will allow us to only refresh the Reports Tab only when we know data has been pushed back to the server, which will greatly reduce unnecessary requests
- Uses Bootstrap Popovers attached to Grid labels to inform the user about the purpose of the column
- Clicking the green "Scenario" button automatically refreshes the Grid in the current tab with information from the Scenario you selected
- We use a combination of HTML5 data attributes and an "Edit" mode Grid function (plus server-side checks, of course) to immediately cancel out of Grid editing if you are looking at a financial scenario that was shared with you (read-only mode)
- We will switch to using a WebAPI back-end and the ODataMediaFormatter in combination with the ASP.NET MVC server wrappers to power each Grid
- We use the Editor of Kendo UI Web to edit our email templates that then run through the Razor parser for our data-driven emails; these are combined with our Bootstrap for email CSS and then pre-processed with PreMailer before being sent through SendGrid
- As you can see, we're still in the process of tweaking our Bootstrap for Kendo UI template, but it is coming along nicely
- Our next major release will include several graphs powered by Kendo UI DataViz, which will go on the Property Details page and the Reports and Statistics sections
- Bootstrap for ASP.NET Razor - which we built - will be released shortly and will also be pushed to NuGet
One of the things that caught my attention with AdvancedREI was its combined use of Bootstrap and Kendo UI Web in the site's design. Here, you can see how Popovers are used to provide more contextual information for columns in the Grid of Kendo UI Web:
Bootstrap is a popular front-end framework for web developers. As a consequence of people liking the look of Bootstrap, web developers have started producing Bootstrap themes for frameworks. As a result of the work accomplished, the AdvancedREI development team has produced a Bootstrap theme for Kendo UI. You can check out the source up on their GitHub repository, BootstrapForKendoUI. It's definitely worth checking out if you're considering a design that combines the styling of Bootstrap with the power of Kendo UI.
So, there you have it; another example of developer awesomeness with Kendo UI. Please do check outAdvancedREI and sign up for a beta account to kick the tires for yourself. And if you have a story of being awesome with Kendo UI that you'd like to share with us, please let us know!