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:
AdvancedREI helps investors to see the value of their own properties without having to share them with others. Instead of being like other sites, we let you create different financial scenarios, and then using a proprietary algorithm, establish 10-year projections that provides an accurate model of what your cash flow is likely to be. It does this by taking into account the lease cycles on a unit-by-unit basis. It also allows you to see the data change in real-time, and share these scenarios with others, so that everyone involved in the transaction can see the source data.
AdvancedREI is currently accepting beta account registrations at advancedrei.com.
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:
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:
Another example is the use of Navs to pivot on the financial data that's bound to the Grid:
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 out AdvancedREI 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!
John Bristowe is a member of the Developer Relations team at Progress. He specialises in web and mobile app development.