Fork me on GitHub

ddSlick - new plugin for Custom Drop Down with Images and Description

A friend of mine recently needed help in including images and description in HTML drop down list. Since it wasn’t possible with regular HTML <select> options, so I wrote some javascript to help him set up his custom drop down list, which I later converted into a jquery plugin of its own, named ddSlick!

ddSlick is a free jquery plugin to create a custom drop down list with images and description. The plugin:

  • Adds images and description to otherwise boring drop downs.
  • Uses JSON to populate the drop down options.
  • Uses Minimum css and no external stylesheets to download.
  • Supports callback functions on selection.
  • Works as good even without images or description!

ddSlick - drop down with images

Visit ddSlick plugin page for complete documentation and live demos

Happy Friday!
PC

1 note

How to set up your first basic Kendo UI Grid

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.

1 note

Setting up your first basic Kendo Datasource object!

Kendo UI

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:

1 note

Speed up your HTML rendering with Kendo UI Templates

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.

2 notes

Indian e-commerce website designs inspired by Amazon.com

In year 2011 India saw a huge uprising in e-commerce with a 30% growth rate, and reaching $10 billion market size. India is undoubtedly on its way to become one of the biggest e-commerce market but its still sad to see no design innovation in the industry. Most of the famous Indian online retailers still follow the same design trend set by Amazon.com years ago. 

Take a look at some leading Indian websites and notice the striking similarity with the Amazon.com:

  • the vertical expanding menu on side, 
  • search with category drop down, 
  • website layout.

Flipkart.com

www.flipkart.com
Alexa rank India: 27



IndiaPlaza.com
www.indiaplaza.com
Alexa Rank India: 317



InfiBeam.com
www.infibeam.com
Alexa rank India: 202



NaapTol.com
www.naaptol.com
Alexa rank India: 159



Tradus.In
www.tradus.in
Alexa rank India: 169



SabseBest.com
www.sabsebest.com
Alexa rank India: 15040




Samaan.com
www.samaan.com
Alexa rank India: 43156




TVCSkyShop.com
www.TVCSkyShop.com
Alexa rank India: 13413

0 notes

Usability: What one think you look for when buying a milk?

The ‘Sell By' date. And you'll be highly impressed with Kroger taking a note of this and making it easily readable from a distance! Readability/Usability Win! 

0 notes

Restaurant style menu with CSS. No Images.

This is also called ‘Dot Readers’ - the rows of dots that connect columns in table. We can easily get something like this using just CSS. Here’s a snapshot of what we are trying to achieve: 

The approach:
  • Each <li> consists of <label>,<span>, and <div>
  • <label> floating left with white background for the name,
  • <span> floating right also with white background for the price/info
  • <div> absolutely positioned with negative index and a dotted border
Check this fiddle http://jsfiddle.net/BNV2w/1/ for working example. Here’s the HTML and CSS:

HTML:

<li>
     <div class=”dotted-bg”></div>    
     <label>Beer Basted Boar Ribs</label><span>4g 2s 11c</span>
</li>
<li>
     <div class=”dotted-bg”></div>    
     <label>Carrion Gizzard Surprise</label><span>2g 6s 11c</span>
</li>


CSS:

li{
   list-style:none;    
   overflow:hidden;
   padding:5px 0;
   position:relative;
}
li label{
   float:left;
   background:#fff;
   padding-right:10px;
}
li span{
   float:right;
   background:#fff;
   padding-left:10px;
}
.dotted-bg{
   border-top:dotted 2px #ccc;
   position:absolute;   
   top:15px;
   left:0;
   width:100%;
   z-index:-1;
}
0 notes

Display full screen image across any monitor resolution using just CSS.

This is easily possible with the CSS3  property “background-size: cover”. Let’s look at an example on how to use this. We’ll use the following image for our example:

When using this image as background for the body:

CSS:
body
{
    background:url(“http://dl.dropbox.com/u/40036711/Images/BeerSpill.jpg”) fixed no-repeat centercenter transparent;
    -moz-background-size: cover;
    background-size: cover;    
}

Working example: http://jsfiddle.net/callmepc/zm3pq/5/embedded/result/

When using an element other than body (like div):

CSS:
#fullPageBG
{
    background:url(“http://dl.dropbox.com/u/40036711/Images/BeerSpill.jpg”) fixed no-repeat center centertransparent;
    -moz-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
    position:absolute;
}

Here’s the jsFiddle: http://jsfiddle.net/callmepc/DbVVy/3/embedded/result/

Enjoy the beer!

2 notes

UX challenge: How to deal with very long and wide tables?

One way to handle a wide range of columns is to merge the related columns into one. This can come handy when you don’t necessarily require to have your data listed in excel (tabular) format. 
In a recent project I merged all address related columns into one, and avoided any cluttering. This way I was at ease to add in even more functionality with each row than possible with the original grid format. Here are some screenshots:

Before:


After:

If you look at the image you’ll see you still have fields available to be able to sort or add any filtering. You can obviously get away from that if you don’t need sorting on all fields.

3 notes

A little fun with CSS!

Was monkeying around with CSS3 transform and transition properties this morning, ended up with this!

0 notes