Basic itemrenderer widget

July 22, 2011 by Acatl Pacheco

This widget is to be used as a definition of the basic options itemrenderer widgets will have.

Definition ir.itemrenderer.js widget:

    
      
        
        
          $.widget("ir.itemrenderer", {
    options: {
        /** type string, name of widget to use as renderer */
        itemRenderer:null,
        /** type function, function that will be executed on each iteration*/
        rendererFunction:null,
        /** type function, function to process the label that will be used */
        labelFunction:null,
        /** type string, name of the field to use as the label */
        labelField:null,
        /** type Object, data source for the widget */
        dataProvider:null
    }
});

        
      

  

          view raw
          gistfile1.js
          This Gist brought to you by GitHub.
        

Examples

Examples of the use of this widget are as follow:

Example 1

The most basic way to use this widget would be just passing a simple array to the options’s dataProvider.

    
          $(function () {
	var itemrendererOptions = {
		dataProvider: ["lorem", "lipsum", "dolor", "sit"]
	};
	$("#itemrenderer").itemrenderer(itemrendererOptions);
});

          view raw
          gistfile1.js
          This Gist brought to you by GitHub.

Example 2

You may also use objects as items of your dataProvider, the default object’s field that the itemrenderer will take as a label is “label”.
Example:{ label: "lorem" }

    
      
        
        
          $(function () {
	var itemrendererOptions = {
		dataProvider: [ 
			{
				label: "lorem"
			}, 
			{
				label: "lipsum"
			},
			{
				label: "dolor"
			},
			{
				label: "sit"
			}
		]
	};
	$("#itemrenderer").itemrenderer(itemrendererOptions);
});

        
      

  

          view raw
          gistfile1.js
          This Gist brought to you by GitHub.
        

Example 3: labelField

If you wish to specify a different field you may use the option labelField es shown below:

    
      
        
        
          $(function () {
  var itemrendererOptions = {
    labelField: "name",
    dataProvider: [ 
    {
      name: "lorem"
    }, 
    {
      name: "lipsum"
    },
    {
      name: "dolor"
    },
    {
      name: "sit"
    }
    ]
  };
  $("#itemrenderer").itemrenderer(itemrendererOptions);
});

        
      

  

          view raw
          gistfile1.js
          This Gist brought to you by GitHub.
        

Example 4.1: labelFunction

You may use labelFunction to apply process your label output.

Top option labelFunction is a function with the following signature:

labelFunction(data, options);

data: the current item from the iteration object of the dataProvider
options: a reference to the widget’s options

    
      
        
        
            var itemrendererOptions = {
    labelFunction: function (data, options) {
      return "$ " + data.price;
    },
    dataProvider: [ 
    {
      name: "lorem",
      price: 123.34
    }, 
    {
      name: "lipsum",
      price: 33.34
    },
    {
      name: "dolor",
      price: 23.34
    },
    {
      name: "sit",
      price: 623.34
    }
    ]
  };
  $("#itemrenderer").itemrenderer(itemrendererOptions);

        
      

  

          view raw
          gistfile1.js
          This Gist brought to you by GitHub.
        

Example 4.2: labelFunction, using the options argument

    
      
        
        
            var itemrendererOptions = {
    labelField: "name",
    labelFunction: function (data, options) {
      return data[options.labelField] + " is $ " + data.price;
    },
    dataProvider: [ 
    {
      name: "lorem",
      price: 123.34
    }, 
    {
      name: "lipsum",
      price: 33.34
    },
    {
      name: "dolor",
      price: 23.34
    },
    {
      name: "sit",
      price: 623.34
    }
    ]
  };
  $("#itemrenderer").itemrenderer(itemrendererOptions);

        
      

  

          view raw
          gistfile1.js
          This Gist brought to you by GitHub.
        

Example 5: rendererFunction

If you wish to go even further on the processing of your output of each iteration you may use the option rendererFunction which gives you more control on how the DOM element being iterated will be treated.

The function’s signature goes as follows:
rendererFunction(container, listData)

container: reference to the container’s jQuery object of the current iteration
listData: Object with the definition options of the current iteration

listData definition:
This object usually contains the following properties:

owner: A reference to the widget’s instance (this)
label: the current label already processed by any definitions passed to the options
data: the raw data item of the current iteration
options: the options of the itemrenderer
index: the index of item’s current position in the dataProvider’s collection

    
      
        
        
            var itemrendererOptions = {
    labelField: "name",
    rendererFunction: function (container, listData) {
      if(listData.data.price > 100) {
        container.css("color","red");
      }
      container.html(listData.label);
    },
    dataProvider: [ 
    {
      name: "lorem",
      price: 123.34
    }, 
    {
      name: "lipsum",
      price: 33.34
    },
    {
      name: "dolor",
      price: 23.34
    },
    {
      name: "sit",
      price: 623.34
    }
    ]
  };
  $("#itemrenderer").itemrenderer(itemrendererOptions);

        
      

  

          view raw
          gistfile1.js
          This Gist brought to you by GitHub.
        

Example 6: itemRenderer

Let’s take the rendering of the items to the next level, itemrenderer is a string that holds the name of a widget’s id you wish to attach to each item on the iteration.

when the widget is attached to the element one object is passed:
{ listData: listData }
Where listData as mention previously will contain information necessary to render the item.

    
      
        
        
          // create a custom widget to be attached to each of the items created.
$.widget("ui.customwidget", {
  options: {
    listData:null
  },
  _create: function (){
    this.element.addClass("ui-customwidget");
 
    $("<span></span>")
    .text(this.options.listData.data.name + " is $" + this.options.listData.data.price)
    .appendTo(this.element);
 
    $("<button>+ Add to Cart</button>")
    .appendTo(this.element)
    .click($.proxy(this._addToCart_clickHandler, this));
  },
 
  _addToCart_clickHandler: function(e){
    alert("do something here..");
  },    
 
  destroy: function(){
    $.Widget.prototype.destroy.apply(this, arguments);
    this.element.removeClass("ui-customwidget");
  }    
});
 
$(function () {
 
  var itemrendererOptions = {
    // asign the widget's name to be used as the itemRenderer
    itemRenderer: "customwidget",
    dataProvider: [ 
    {
      name: "lorem",
      price: 123.34
    }, 
    {
      name: "lipsum",
      price: 33.34
    },
    {
      name: "dolor",
      price: 23.34
    },
    {
      name: "sit",
      price: 623.34
    }
    ]
  };
  $("#itemrenderer").itemrenderer(itemrendererOptions);
});

        
      

  

          view raw
          gistfile1.js
          This Gist brought to you by GitHub.
        

Tags: jquery Widgets
Categories: Widget
Permalink

http://itemrenderer.com/?p=93 jQuery Grid Widget « itemrenderer

[...] further reading on this option check out the description at theBasic itemrenderer widget [...]