Blog


Random thoughts about development on the Microsoft platform

KendoUI - Grid - Footer Template Formatting

Comment

KendoUI - Grid - Footer Template Formatting

Ran into an issue today whereby I was showing an aggregated Sum in the footer of a column. This worked correctly but the number was not formatted and showed 6 decimal places.

Looking through the KendoUI docs and forums yielded plenty of results, but this was all for client side binding and formatting.

Comment

Javascript Corner - Font Awesome

Comment

Javascript Corner - Font Awesome

I have been Font Awesome over the last year for all my web projects. It's goal is to do away with all the images that you need for a modern web application and replace them with a single font.

Why replace images with a font you may ask?

There are several advantages:

  • Fonts are scalable, so they look crisp at whatever size you want them
  • You can use all your font styles on these icons to style them (like size and colour)
  • All modern browsers support the download of custom fonts (there is a fallback to image sprites for old browsers)

Using it on your project is easy, just add the following stylesheet to your app:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Then you have access to over 350 icons. Here are a few that I use all the time: 

Comment

Comment

Javascript Corner - jquery.lazyload

I've used this usefully little plugin on several projects, and Scott Hansleman recently highlighted it in his Pinching pennies when scaling in The Cloud blog post. It's useful for situations where:

  • ou want to load images based on some convention but aren't sure if they exist
  • You want to load only images that the use is able to see on their page

 

ake this example that I've been working on this week. It's a leader board for our timesheeting application that shows the current top biller for the year

Figure: Bad Example - Broken images everywhere

n this instance, the employee profile images are being loaded by convention, and not all employees have photos, that's why you see broken images here. Now there's a few ways of solving this:

  1. heck the file system for the employee file (this has a few problems)
  2. heck via HTTP the image exists on the external server

The problem with checking the file system is, that the file can still be broken if it is trying to get an image served from a CDN instead, 

Checking via HTTP headers is possible and can be done without downloading the file but as always, if you have lots of files this can slow down the rending of your page.

jQuery.LazyLoad is a great client side solution as we first render a placeholder image and then (on the client side) request the actual image and then replace the placeholder with the downloaded image. It's very lightweight and simple to use.

    • Reference the jquery.lazyload.min.js file

     

     

     

    <script src="@Url.Content("~/Scripts/jquery.lazyload.min.js")"></script<
    
    • Render the image tags as follows:
     <img class="full lazy" data-original="@emp.PhotoUrl" src="@Url.Content("~/Content/EmpPhotos/placeholder.png")" />
    
    • Call the lazyload() method on document ready
       <script>
            $(function() {
                $("img.lazy").lazyload();
            });
        </script>
    

    Now all the broken images have a place holder image by default, and the client downloads and replaces the employee photos for employees who actually do have a photo.

    26-04-2013 9-04-48 AM.jpg

    Figure: Good Example - Image placeholders show up instead of broken images

    Comment

    Comment

    Javascript Corner - jquery.cookie

    I'm trying to do a regular post on useful javascript libraries and plugins to existing frameworks such as jQuery, knockoutJs etc...

    So to kick things off, let me introduce jquery.cookie. This usefully little library allows you to get and set cookies on the client side. Now why might you want to do this?

    • Serve up a generic cached page and personalize based on cookie information (a lot of sites do this, like eBay shows your name, but will still require you to sign in)
    • Retrieve some information via AJAX and save it to a cookie

    I've used this on several projects in the past, and it's nice and easy to use.

      <script src="/path/pto/jquery.cookie.js"></script>
      
      • .Set a cookie
      var userProfile = {
          Name: 'Eric Phan',
          Age: 28,
          LastLogin: '2013-04-22 11:24 PM' 
      };
      
      var cookieOptions = {
          expires: 7, // expire in 7 days	
          path: '/', // path of the cookie
          domain: 'ericphan.net', // domain the cookie is valid for
          secure: false // whether to transmit the cookie over HTTPS
      };
      
      // Need to store the JSON data as string
      $.cookie('UserProfile', JSON.stringify(userProfile), cookieOptions);
      
      • Get a cookie
      var cookie = $.cookie('UserProfile');
      
      // Convert the string value back to JSON
      var userProfileData = JSON.parse(cookie);
      
      console.log(userProfileData.Name)
      
      • Delete a cookie
      $.removeCookie('UserProfile', { path: '/', domain: 'ericphan.info'});
      

      Really simple and easy to use. Props to Klaus Hartl for developing such a handy little plugin.

      Comment