KendoUI: Understanding ToDataSourceResult

Using server filtering is rather easy with Kendo UI MVC, unless your new to it.  Then that first couple hours is pretty frustrating untill you find the right article, information and samples.  I have very few gripes with Telerik and Kendo UI but they do have a problem with the Kendo UI Demos.  They do not include enough sample code from controllers and web services.  So hopefully this will help out those newbies to KendoUI.

When would I use this?

Server-side Filtering, Paging, and Sorting with the Grid or ListView.

How to use it?

When would I use this?  Server-side Filtering with the Grid or ListView.

First thing you want to do is add the following the following using statement to you Controller or API Controller:

using Kendo.Mvc.Extensions;

Now, you can easily take advantage of ToDataSourceResult extension method to convert any IQueryable or IEnumerable to a DataSourceResult object.  It will help you page, filter, sort or group your data using the information provided by the DataSourceRequestObject.

Your AJAX action will take one parameter:  DataSourceRequest.

public ActionResult GetAllOrders([DataSourceRequest] DataSourceRequest request)

Now in the method, you just call ToDataSourceResult on your IQueryable or IEnumerator.  Pretty simple, although you have to be careful when dealing with large volumes of data o make sure your implementation does not return all the data before applying filter, sorting, and paging.

How is ToDataSourceResult being implemented under the hood by Telerik?  C# Extension Methods.  If you need a refresher, check it out here:

If you want to see the implementation, then use JustDecompile and run it against Kendo.MVC.dll.

Which Kendo UI Widgets

This is meant to be used with the following controls:

  • Grid
  • ListView

Other controls like ComboBox and AutoComplete expect just a simple array and will not work with DataSourceResult.

Does this only work with a ORM?

No, it does not.  Note:  Any IQueryable or IEnumerable so LINQ, List, Dictionary, etc…

Let’s dive into a simple example

In my sample, I have a Domain POCO Class called Order.

public class Order
 public int Id { get; set; }
 public string LastName { get; set; }

 public decimal TotalAmount { get; set; }

 public decimal TotalAmountUsd { get; set; }

 public string OrderCurrencyCode { get; set; }

 public string OrderCurrencyCultureCode { get; set; }

 public DateTime OrderDate { get; set; }

Then I have a Domain Class that contains a list of Orders.  This has data stubbed out for now.

public class Orders
   private readonly List orders = new List();
   private int nextId = -1;

   public Orders()
     Add(new Order() { LastName = "Federer", TotalAmount = 1023.23m, TotalAmountUsd = 400.23m, OrderCurrencyCode = "SEK", OrderCurrencyCultureCode = "sv-SE", OrderDate = DateTime.UtcNow.AddDays(-1) });
     // Add lots of data here........
     Add(new Order() { LastName = "Aikemo", TotalAmount = 1023.23m, TotalAmountUsd = 400.23m, OrderCurrencyCode = "JPY", OrderCurrencyCultureCode = "ja-JP", OrderDate = DateTime.UtcNow.AddDays(-8) });

 public Order Add(Order item)
   if (item == null)
     throw new ArgumentNullException("item");
   item.Id = nextId++;
   return item;

 public List GetAll()
  return orders;

Then, I have a ViewModel which looks just like my Order class.
public class OrderViewModel
 public int Id { get; set; }
 public string LastName { get; set; }

 public decimal TotalAmount { get; set; }

 public decimal TotalAmountUsd { get; set; }

 public string OrderCurrencyCode { get; set; }

 public string OrderCurrencyCultureCode { get; set; }

 public DateTime OrderDate { get; set; }

In the controller, I have the following Action (Note:  My controller is importing  Kendo.Mvc.Extensions):

public ActionResult GetAllOrders([DataSourceRequest] DataSourceRequest request)
   Orders orders = new Orders();
   List orderList = orders.GetAll();
   DataSourceResult result = orderList.ToDataSourceResult(request, 
     order => new OrderViewModel 
       Id = order.Id, LastName = order.LastName,
       OrderCurrencyCode = order.OrderCurrencyCode, OrderCurrencyCultureCode = order.OrderCurrencyCultureCode,
       TotalAmount = order.TotalAmount, TotalAmountUsd = order.TotalAmountUsd,
       OrderDate = order.OrderDate

   return Json(result);

The call to ToDataSourceResult is taking the request information and using that to filter, sort, etc the results and transform them into the ViewModel.  Pretty simple and straightforward.

Finally, in your Razor view you can call your AJAX method which will easily page, filter, sort, etc…

 .HtmlAttributes(new { style = "width:700px" })
 .Columns(columns =>
 columns.Bound(p => p.Id).Title("Order Id");
 columns.Bound(p => p.LastName).Title("Customer");
 columns.Bound(p => p.TotalAmount).Title("Total Amount");
 columns.Bound(p => p.TotalAmountUsd).Title("Total Amount (USD)");
 columns.Bound(p => p.OrderDate).Title("Ordered On");
 .DataSource(dataSource => dataSource
 .Read(read => read.Action("GetAllOrders", "Orders"))

Now the user can sort, page, filter, …

Grid Filtering

Grid Filtering

KendoUI Resources

Here are a couple helpful resources from Telerik:



This is pretty simple once you get the basics down so good luck coding up your solutions with it.

KendoUI: Formatting Dates, Numbers, Currency and Custom Formats

Ever need to format text in JavaScript?  Ok, dumb question.  Everyone has needed that functionality.  Well, if you use KendoUI, Telerik provides a pretty awesome framework for this.  There is a toString method which is documented here.

This method takes three parameters:

  • value –> the Date or Number to be formatted.
  • format –> string to format.
    • n –>  Format as a Number.  If you include a number after the n, then this will denote the number of decimal places.
    • p –> Format as a Percent
    • c –> format as the Currency including the symbol
    • date format like ‘yyyy/MM/dd’
    • Custom Formatter like ’00##’
  • culture –> the name of the culture which should be used to format the value.  If this parameter is not supplied, then the default culture is used

Now, this is pretty AWESOME.  Lets say you need to display a value in multiple currencies and formatted for each currency.

In your page, you need to register each KendoUI culture script.  For this example, let’s reference the following:

<script src=""></script>
<script src=""></script>
<script src=""></script>

You also need a reference to kendo.core.js.

Now, that you are referencing the cultures you need,  it is pretty easy to format your dates and string in JavaScript.

For instance:

kendo.toString(1234.23, ‘c’, ‘de-DE’)  –>   1.234,23 €

kendo.toString(1234.23, ‘c’, ‘sv-SE’)  –> 1.234,23 kr

kendo.toString(1234.23, ‘c’, ‘en-US’)  –> $1,234.23

This is pretty slick.  You can format the currency based on a culture which comes in very handy in some business application where you might need to display multiple currencies on the same page.

Other places to use this:

  • In a ClientTemplate on a column on a Grid so you could format one column for Swiss Franc then have another column for US Dollars.
  • For formatting date time when displaying multiple dates for more than one culture
  • Allowing the user to pick a culture and dynamically update the formats of the numbers, dates, etc without reposting the page.






Security Assessment 101: Skip HTTP and just use HTTPS

So you built this awesome business web app.  You sold it to your customer and it’s now in production.  You’re using SSL which is even configured for best practices.  See my previous post on securing SSL.  But what happens when a user goes to your web application.  It probably redirects them to HTTPS so the user can login over SSL.

Why do that???

That is the question to ask yourself.  Why redirect users from HTTP to HTTPS to login.  Why not ALWAYS use SSL???  I really do not believe you need HTTP or Port 80 turned on at all for business web applications.  Here are my assumptions with Business Web Application:

  • Most interactions with your site is behind the login page.  By most, I really mean like 99%.
  • The data is sensitive, company proprietary, etc…
  • You have employee information, financial information, etc…

So in this scenario, there is no real reason to have HTTP bindings setup in IIS for your site.  Turn port 80 off on the firewall and only allow Port 443.  Don’t even give the hacker a chance to see the traffic over HTTP or an avenue to hack your server over port 80.

But what about the customer???

They won’t know to use HTTPS…  For me this is pretty easy answer.  When sending the welcome package to your customer, explain to them why you did this and tell them the URL is only accessible over HTTPS.  I have been doing this for years and yes we have had a few calls to the help desk.  But VERY, VERY few calls.


Security Assessment 101: What gives? My SSL failed?!?

You delivered your awesome business application and it’s running in production.  You are a developer and have some limited System Admin skills so obviously your company decided you were the perfect person to set up your production environments.  The data is sensitive so obviously you have SSL turned on.  Everyone involved is in ecstatic!!!  Then out of the blue, your customer calls to schedule a security assessment.  First thought might be “I have SSL so that should be fine, but I’m nervous about my login page, XSS, CSRF, SQL Injection, etc.”  News flash:  SSL has vulnerabilities!!!  And it is very easy for third-parties to identify those issues with your site during a security assessment.  But even better, it is VERY easy for you to determine that your site has vulnerabilities so take the time to test your site (even if you are not the system admin) and fix it before your site goes live.

Due diligence/Disclaimer

This is to provide you guidance.  You must do your own due diligence and validation by testing first in a non-production environment.  Also, changing Cipher security in Windows Server may disable RDP so be very careful!!!  

This article is written based on Windows Server 2008 R2.  I have not tested with Windows Server 2012 but am fairly certain it should apply.

See my disclaimer.

Operating System

Which OS are you using in production?  I highly recommend having at least Windows Server 2008 R2.  If you only have Windows Server 2008 you will not be able to fix several items with your SSL.  You will probably need to start a migration plan.


The following resources are invaluable:

In addition, here are resources to help understand and fix items:

In addition, you need to understand the browsers you support.  That is rather easy for my specific scenario.  I only support IE.  My biggest problem has been getting users off of older versions of IE.  Here are a couple great links to read up on:

How concerned should you be about SSL

Well that is for you to decide based on your content and it’s sensitivity…  I believe anything that requires an account (username and password), bank information, credit card information, personal information, … then you should be very concerned and take this seriously.

If you want to be scared to death about using free WiFi at your local coffee shop or at the airport, then check out Troy Hunt’s site and read his articles about the “Pineapple“.  That concerns me the most due to some of the sensitive info my applications have.

Start by testing your site:

This is very easy to do.  Navigate to the following url:  Then click “Test your server” which will take you to a page like this:

Obviously, you do now want to see this:

Failed SSL

Failed SSL

Once your review your grade, there are additional details to review.  Normally, my certificate is not an issue.  So let’s jump ahead to the next section that is rather important:  “Protocols”.

Failed Protocols

Failed Protocols

Notice that TLS 1.2 and 1.1 are not turned on; however, modern browsers support them so it is important to have them turned on.  SSL 2.0 is not secure and has not been so for years; therefore, this protocol needs to be turned off.  In addition, I turn off SSL 3.0 too.  The next section to reviews is the Cipher Suites:

Failed Ciphers

Failed Ciphers

This order is not good.  It is the default out of the box for Windows Server 2008 R2.  It is so easy to fix.  More to come on that later.  Next, you should review  the “Handshake Simulation”.  I only support IE so I only review those.  You may support many browsers.  You want the browser to support Forward Secrecy which is denoted with FS.  You can see that none of the handshake simulation supports FS and some even support RC4 which is an issue too due to vulnerabilities discovered last year.

Failed Handshake

Failed Handshake

Next, is to review the Protocol Details.  This provides great information including links to read and review.

Failed Protocol Details

Failed Protocol Details

Before Fixing your server

You must be very careful.  If you turn off all of the RC4 protocols you may disable RDP.  See the following article:

In addition, your users may have TLS turned off by default or due to company policy.  They will need to turn it on in IE under the Advanced tab for Internet Options; otherwise they will not be able to connect to your site.

IE Internet Options Advanced

IE Internet Options Advanced

How to fix your SSL

Luckily, fixing your SSL issues is very easy for Window Server 2008 R2.  First start by downloading IISCrypto.exe from Nartac.

After downloading, I ran my virus scanner against the file just to make sure there is nothing suspicious.  You never know if that site was hacked.  If you are wary about using this executable, you could write your own by following the Microsoft Support article.

*****  TEST IN A UAT OR QA SITE FIRST!!!   *****

Follow these instructions for configuring SSL on your Windows 2008 R2 Server:

  1. Take any backup precautions as you see fit.  You will be changing the registry.
  2. Run IISCrypto.exe
  3. Click the configure Best Practices button.  Turn off SSL 3.0.
  4. Click Apply.
  5. The tool marks some registry keys incorrectly according to the Microsoft Support article.  It uses 0x99999999 which may be fine but I update them anyway to reflect the values in the support article.
  6. Click Start, click Run, type regedit, and then click OK.
  7. In Registry Editor, locate the following registry key/folder:  HKey_Local_Machine\System\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\SSL 2.0
  8. Ensure that the DisabledByDefault  key shows 0x00000000 (0) under the Data column (it should by default). If it doesn’t, right-click and select Modify and enter 0 as the Value data.
  9. Repeat step 8 for SSL 3.o.   If you want SSL 3.0 turned off, then make sure the “Enabled” value is 0x00000000 (0); otherwise, it should be 1.
  10. Then repeat for  TLS 1.0, 1.1, and 1.2 making sure “Enabled” is set to 1.
  11. Restart the computer.
  12. Re-validate your SSL using, or the Public SSL Server Database

Results using SSL Labs

Now that the server has been properly configured, you should see these results:

Passed SSL

Passed SSL

Now you can see that my production site only support TLS 1.0, 1.1 and 1.2.  I have turned off SSL 2.0 and SSL 3.0.

Passed Protocols

Passed Protocols

Next, check the Cipher Suites:

Passed Cipher Suites

Passed Cipher Suites

Notice the order that the Ciphers are in.  Note:  I keep the RC4 Cipher.  From what I understand this is necessary for RDP.  There may be a way to configure RDP to use a different Cipher but until I have time to figure that out, I am keeping this Cipher.

In addition, notice how the FS (Forward Secrecy) ciphers are at the top.

Next, check out the handshake:

Passed Handshake

Passed Handshake

Remember, I am only concerned about IE 7 and above.  We will be dropping support for IE 7 soon and IE 8 on XP.  The rest of the handshakes for IE are using FS which is great!  You may need to support multiple browsers so you will need to test accordingly.

Finally, check out the Protocol Details.

Passed Protocol Details

Passed Protocol Details


I hope this article helps those of you with limited System Admin skills.  It took me a while to figure all of this out since my main occupation is Software Architect/Sr Developer…   I am definitely not a System Admin but as a developer I do understand the importance of secure coding as well as following best practices on my production environments.

Getting started with Responsive Web Design for Business Web Applications

Finally getting time to make significant improvements to the UI of my business web applications.  One of the top priorities on my projects is UI Transformation using Responsive Web Design (RWD).  Should we have done this years ago???  Sure!!!!  So much to do so little time…

There are many different aspects to tackling UI improvement and RWD.  A lot of what I see on the web is about making web sites (IE. online stores, blogs, etc) responsive which is fine, but I live in the world of business web applications.  Lots of data, lots of backend processing etc.  Where to begin?!?  Especially with so much legacy code…  Right now, overall my company (like every other one) has been pushing for Mobile First.  Well that is a GREAT strategy but not all aspects of my business application will be implemented on a smart phone.  Main components of my application should be able to run on a iPad, Windows 8 Surface, Laptops with varying display sizes, and all the way up to desktops with large monitors.

Depending on your scenario, one great benefit of business applications is that you can determine what browsers you support.  Officially, we will be supporting IE, Chrome, and Firefox.   I don’t have to worry about supporting all browsers since not all are approved or installed in a corporate environment.  In addition, my applications should work on Safari but there is only so much time in the day and so much money in the budget so testing would be limited for that.

Where to start…

Now, how do you go about building out a business application to support RWD…  In my experience, most business web applications don’t have a Design team but rather one or two team members who are pretty good at laying out pages.  So for most business web developers the obviously place to start is learning the various technologies…

First, make sure you have or started learning HTML5 and CSS3.  If you are completely new to RWD, a basic but great article to kick-start with is the following:

If you have a PluralSight membership or a FrontEnd Masters membership, watch Ben Callahan’s video called “Responsive Web Design”.  Lots and lots of hours of learning.

In addition, there are many GREAT articles to read.  I found these useful:

Next, follow some folks on Twitter

Then follow a Usability Engineer or two…

Check out some real live Sites

All of these sites are responsive and as you resize the browser the content is resized, modified, and styled based on the screen size without having to refresh the page.  Pretty awesome!!!

Here is Penn State’s website responding based on the browser being resized:


All that is great except for one thing.  Those sites are content driven, not business apps.  But the same principles can be applied.  Showing samples of business applications is a little hard since most business web applications are behind login pages…

But Kendo UI does provide a demo site that is fairly nice to see how a potential business application could be tailored using RWD

Here is a screen shot showing how the same page resizes so easily…


Then, start picking your technology

Well you need to start with HTML5 and CSS3.  Learn about Media Queries, ems versus pixels, transitions.

Then, pick a framework.  So many to choose from.  Lots of good open source and lots of great third-party products.  Since I write business application, I tend to concentrate on the core which is the business and customer needs instead of how to write a currency control or creating a grid from scratch or tweaking an open source project.  Therefore, I bought a copy of Kendo UI.  It gives me a lot of controls that adhere to RWD making my life a lot easier.

Rules to live by when implementing RWD

  • Avoid inline styles at ALL costs.
  • Depending on your scenario, avoid using the ViewPort and use media queries.
    • Don’t forget — older versions of IE do not support media queries.
  • In addition to media queries, modern browsers also support matchMedia.  This allows you to bind to JavaScript callback but be careful since older browsers do not support this.  This can be very powerful.
    • window.matchMedia(“(min-width: 400px)”.addListner(function (e) {…}))
  • Start styling for your smallest supported width first.  In my case, that will be 1024px for an iPad in landscape.  Later, certain portions of the application will be style specifically for smartphones.
  • Use Percent on your widths instead of pixels or ems.
  • When necessary, use ems instead of pixels.
  • Use Transitions in your styles to handle resizing smoothly
  • When necessary, use shims like Modernizer and or Polyfills.
  • If you are writing JavaScript to handle resizing, step back, review what you are doing and see if CSS3 will solve your problem.  It’s amazing what CSS3 does!!!


Hopefully you found this rather helpful to start understanding how to build your business apps using RWD.  More to come soon on this topic.

Quick Tips – HTML5 FlowChart and Extract CSS

A couple quick tips…

HTML5 FlowChart

Found this HTML5 Element Flowchart by HTML 5 Doctor and wanted to share the link.  I think it’ll come in very handy when making choices with HTML5.  This chart has a basic flow chart for determining which HTML5 Element (<nav>, <article>, <section>, <aside>, <section>, <figure>, …) to use and when.

Extract CSS

Next, I think this tool written by Adnan Topal will come in handy for cleaning up HTML with inline styles, especially projects where developers did not follow best practices for styling, themes and using CSS style sheets.

Getting started with writing secure ASP.NET MVC Code

Over the last few years, I have become very focused on writing secure code.  One of the main driving forces for this is the number of security assessments my application has undergone over the last few years as well as the plethora of information now easily accessible.  So where does one start with writing secure code?  More than likely you already have already started.  But this is a question every developer needs to ask themselves and figure out how to keep up with the latest and greatest.


Unless you have been living under a rock for the past decade, then you should already know who OWASP is.  But since some still don’t know, OWASP stands for “Open Web Application Security Project”.

Note:   you cannot access the OWASP website over HTTP.  First lesson about securing your web applications.  Use HTTPS all the time!

Every year OWASP puts out a Top 10 list.

Troy Hunt

Troy Hunt is awesome! Who is he? Quoting from his web site, Troy Hunt is a “Software Architect and Microsoft MVP”. He writes about security concepts and process improvements for software delivery.

Visit his site ( and follow him on Twitter

I stumbled upon his book in early 2012. I am still amazed at how much information is in this book and the time and dedication he put into it. His book covers the Top 10 OWASP Issues for ASP.NET Web Applications. This awesome book is located here:

Read it! It is a quick read and will enlighten you to so many topics on security. The book was written for ASP.NET Web Forms; however, it can easily be adopted to ASP.NET MVC. Some of my future topics will cover this.

If you are a member of Pluralsight, you can watch his videos at:

Fiddler 2

I love Telerik! Almost as much as my wife and kids. That said, I was nervous when they took over Fiddler. Not anymore. It is still free and they continue to improve it. What is important about Fiddler? Well if you read Troy Hunt’s book or watched his video, then you know how easy it is to test aspects of your application and security using Fiddler. For those of you who do not know about Fiddler, it is a free web debugging proxy which logs all HTTP traffic between your local machine and web application. You can use it to debug traffic on a PC, Max or Linux. You can check cookies, headers and cache directives. You can use it to tamper with client requests and server responses to see how your application is working. Plus many more great features…

You can find fiddler at

Code Analysis in Visual Studio

Use it!!! All the time. Make it part of your process when checking in your code. It is very simple to do. The hardest part is making it a solid, consistent habit!


If you have a web application, use SSL. But unfortunately it is not that easy. You also have to make sure your server is configured properly. There HTTPS protocols that are not secure and allow “Man in the middle” attach or can easily be decrypted. To avoid that, you have to configure your server properly and keep up with the latest. Hard to do when you are a developer and should be something your system admins in production handle for you. More on this topic in a later blog…

Great Resources:


Hope this info is helpful.   More security article to follow very soon!!!