Design with PC

Steve Souders at OReilly’s Fluent 2012 (JavaScript and Beyond) talk about how loading third party scripts (like Twitter!) synchronously can kill your site. 

Now when we know how to setup a basic Kendo datasource object, our next step is to generate a Kendo UI Grid using a Kendo datasource. Grids are useful when displaying tabular data with features like sorting, paging, and grouping. Following is an example of setting up your first basic Kendo UI grid.

1. Create a placeholder for the grid

Create an empty div and assign it an id. We’ll turn this div into a grid by selecting this div via jquery selector and using .kendoGrid().

<div id="my-grid"></div>

2. Set up a Datasource for the grid

There are couple of ways to provide data to the grid

1. Either by using an already defined sharedDataSource on the page/view that is also used by other widgets

   var sharedDataSource = new kendo.data.DataSource({
       transport: {
           read: {
               url: "http://search.twitter.com/search.json",
               dataType: "jsonp",
               data: {
                   q: function () {
                       return $('#twitter-search-text').val();
                   }
               }
           }
       }            
   });
   
   //Using the shared data source with grid
   $("#my-grid").kendoGrid({
       dataSource: sharedDataSource 
   });
   
2. Or configuring the grid to use its own datasource

   $("#my-grid").kendoGrid({
        dataSource: { 
           transport: {
               read: {
                   url: "http://search.twitter.com/search.json",
                   dataType: "jsonp",
                   data: {
                   q: function () {
                       return $('#twitter-search-text').val();
                   }
               }
               }
           }    
        },
        selectable: false,
        groupable: true,
        sortable: true     
    });
   

3. Adding columns to the grid:

We’ll need to specify the column layout by passing an array of column definition objects to the columns property of the grid.

$("#my-grid").kendoGrid({
    columns: [ { title: "Party Id", field: "PartyId" }, 
               { title: "Name", field: "Carrier Name"}
               { title: "Description", field: "Carrier Description" } ]
});

Each column object has the following properties:

1. title: This is the text you want to appear as the column header
2. field: The field in the data set that this column should be bound to.
3. template: You can specify a template for the grid column to display instead of plain text.
4. width: The desired width of the column.

4. Configurable grid options

• height: eg. 100 height of the grid
• scrollable: eg. true enable scrolling in the grid in the grid
• scrollable: eg. { virtual: true } virtual scrolling will load in data from the remote data source as you scroll down the grid
• selectable: eg. true enable single row selection in the grid by default.
• pageable: eg. true paging setting within the grid is controlled by the pageable attribute
• groupable: eg. true once grouping is enabled, a new area will be exposed in the header informing you to drop a column there to group by that column

5. Working example of a Logix grid

Check the jsFiddle below to generate a dynamic grid displaying serached tweets and the users.

For further details, visit Kendo UI website.

The Kendo UI DataSource component is an abstraction for using local (arrays of JavaScript objects) or remote (JSON) data.

• Supports CRUD (Create, Read, Update, Destroy) data operations
• Supports Sorting, Paging, Filtering, Grouping, and Aggregates.

1. Creating a Datasource object

A DataSource can be created in-line with each UI widget configuration settings, or a shared DataSource can be created to enable multiple UI widgets to bind to the same, observable data collection.

1. Creating a shared DataSource using kendo.data.DataSource that can be used by multiple UI widgets

   var sharedDataSource = new kendo.data.DataSource({
       transport: {
           read: {
               url: "/Your/Reuquest/URL", // api url            
               data: { Id: $("#someId").val() }
           }
       }
   });
   
   //Using the shared data source with grid
   $("#my-grid").kendoGrid({
       dataSource: sharedDataSource 
   });
   
   $("#chart").kendoChart({
       title: { text: "Employee Sales" },
       dataSource: sharableDataSource 
   });
   
2. Creating in-line Datasource used by the widget

   $("#my-grid").kendoGrid({
        dataSource: { 
           transport: {
               read: {
                   url: "/Your/Reuquest/URL", // API url
                   data: { Id: $("#someId").val() }
               }
           }    
        },
        selectable: false,
        groupable: true,
        sortable: true     
    });
   

This should look familiar to you if you have been using jquery.ajax! Also since behind the scenes read passes all these options to jquery.ajax, you should still be able to use any available options with .ajax. For example: success, error callbacks, datatype, traditional etc. View more details on the Kendo website.

2. Working example:

Templates offer way of generating html chunks (especially repeatable) by binding to a data array or a datasource. There are multiple templating engines available on web (including jquery templates beta), however this document demonstrates the one provided by Kendo. 

To begin with you’ll obviously need to reference both jquery.min.js and kendo.web.min.js

1. Syntax:

JavaScript blocks are denoted by a ‘#’ on either side.

# for (var i= 0; i < data.length; i++) {#
    //some code here 
# } #

Template substitution values in the HTML are denoted by a ‘#=’ and the front and a closing ‘#’

#= item.text #

2. Creating a New Template:

You may want to create a template.kendo.js file so all your templates reside at one place and scoped to the ‘templates’ namespace. Another advantage of keeping the templates in its own separate file is browser caching speeds up the rendering.

Here’s an example of how to create a new template:

//Namespacing templates
var templates = {    
    tweet: kendo.template(
    '<a class="tweet" href="https://twitter.com/\\#!/#= from_user #/status/#= id_str #" target="_blank">'+            
        '#= text #<br/>' +                
        '<label class="weak">#= from_user # |' +
        '#= kendo.toString(new Date(Date.parse(created_at)), "dd MMM HH:mm") #</label>' +            
    '</a>'
    )
};

3. Using a Template:

You can either use these templates like templateName(data), or use kendo.render(templateName, data) for the dynamic/repeated data:

var mySingleObjectData = {
    text : "This is the text of the tweet", 
    from_user : "chaudharyp"    
};
$("#some-div").html(templates.tweet(mySingleObjectData));

var myRepeatedData = [
    {text : "This is my text", from_user : "pc"},
    {text : "This is my text", from_user : "brad"},
    {text : "This is my text", from_user : "tom"},
    {text : "This is my text", from_user : "bradley"}
];
$("#some-div").html(kendo.render(templates.tweets, myRepeatedData));

4. Check out the live demo:

For further reference, visit Kendo UI Templates demo here.

So far the initial release for Hovercard plugin has received a decent traction with increased traffic and page ranks. And now its time for another release (version 2.0) with fixes and updates based on user’s suggestions and feedbacks. 

What’s new with version 2.0:

1. Built in Twitter card: (with follow button)
   
2. Built in Facebook card: (with like button)
   

When hovered over the text, the hovercard emerges with the twitter or facebook profile for the hovered name. The username to be displayed can also be passed via plugin options. Click here to read more and view demo on how to use Twitter and Facebook hover cards.

What’s fixed:

1. Hovercard attempts to adjusts itself to the available viewport width 
2. Z-index issue with adjacent hovercards
3. Minor CSS changes

Update:The following technique is also available as a Hovercard plugin.

We’ll use Twitter REST API in json format to look up any twitter user by its username. We’ll create a twitter card for President Barack Obama (@barackobama) as an example:

Resource url: 
http://api.twitter.com/1/users/lookup.json?screen_name=barackobama 
We’ll make an ajax request to this url.

Ajax request:

$.ajax({
    url: 'http://api.twitter.com/1/users/lookup.json?screen_name=barackobama&callback=?',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
       //Profile name will be data[0].name 
       //Location will be data[0].location
       //Profile pic will be data[0].profile_image_url
       //Bio will be data[0].description
       //Tweets will be data[0].statuses_count
       //Followers will be data[0].followers_count
       //Visit https://dev.twitter.com/docs/api/1/get/users/lookup for all options   
    }
 });    

Live Demo: (including html and css for twitter card)

IMPORTANT UPDATE: Please visit the new hovercard plugin page. This plugin has a new home and all the documentation, demos, and updates are available there. No future updates will be made here. Thank you - PC.

After finishing up last post on simple yet sexy hovercard with minimum css I decided to wrap up its functionality into a plugin itself. So if you don’t want to do the extra work of showing and hiding details with your hovercard, this plugin is for you! 

Download: http://dl.dropbox.com/u/40036711/jquery.hovercard.js 

Live Demo: Live Demo for Hovercard jQuery plugin

Screenshot:

How to use, example: (Visit Hovercard plugin’s page for full documentation)

$("#some-id-for-name").hovercard({
    detailsHTML : 'your html mark up for the details, or even a simple string would do',
    width: 400,
    cardImgSrc: 'someImageToBeDisplayedWithCard.jpg',
    background: "#ffffff"
});

Remember don’t forget to reference the latest version of jquey from http://jquery.com/.

That’s it!

Update: This hovercard is now available as a plugin too!

So you’ve seen and loved Twitter’s and Facebook’s hovercard, now its time to make one for your website! A hovercard is a way to show related information in card format when you hover over some username, text or a link. 

Lets build:

So you have a user and his bio that you want to display using hovercard. To add a further slickness to our design, instead of showing a new card we’ll just make the name fade into a detailed card (in place). The only trick with this approach is positioning:

• Preview card - (position:relative):
  
  • Name - (position: relative, z-index: higher than details)
  • Details - (position: absolute)

Details are initially hidden and displayed (or loaded via ajax) on hover. The absolute positioned details will now fade in to a card with enough top padding i.e. 2em to overlay the name (with higher z-index) in card itself. You may either use jQuery to add fadein effect or straight forward CSS to toggle display.

HTML:

<span id="preview-card">
    <label class="name">Prashant Chaudhary</label>
    <span class="details">
        <img src="http://30.media.tumblr.com/avatar_d3eadb3e29f8_128.png" alt="PC"/>        
        Web developer. Loves UI/UX.<br/>
        Indianapolis IN<br/>
        <a href="#">http://callmepc.com</a>
    </span>
</span>

CSS:

#preview-card
{
    position:relative;            
}
.name
{    
    font-weight:bold;    
    position:relative;    
    z-index:100; /*greater than details, to still appear in card*/
}
.details
{            
    background:#fff ;    
    border:solid 1px #ddd;      
    position:absolute ;
    width:300px;
    left:-10px;
    top:-10px;
    z-index:50; /*less than name*/
    padding:2em 10px 10px; /*leave enough padding on top for the name*/   
    display:none;
}
.details img
{
    width:70px;    
    float:right;
    margin-top:-1em;
}

Hover on the name in this jsFiddle to view a live demo.

Some ways you can use hovercard to delight your users:

1. Show Person bio, book author and price, etc.
2. Offer a link preview before navigating.
3. Edit in place options.
4. Load related information with Ajax.
5. Use it for ‘word-meanings’ and what not!