Creating a custom view style

The listview item view class is a custom defined class set over a pre defined template, which returns the visual layout and design of each listview item.

The listview is supplied with 5 different views as default:

• Detailed view
• Small icons
• Medium icons
• Large icons
• Gallery view

It is possible to add new view styles by modifying this sample code:

//Small icon item
var Custom_small_icon = function(listview, item)
{
    this.ViewName='Small icons'; //This is the visual name for the style
    if(!listview || !item) return this;
   
    this.Control = listview.Document.createElement('DIV');
    var span = listview.Document.createElement('SPAN');
       
    this.Control.style.display=listview.__InlineBlock; //This property contain the difference between Internet Explorer and other browsers, when using the display CSS property.
    this.Control.style.width=listview.ColumnHeaders[0].__Width + (listview.isIE ? '' : 'px');
   
    if(listview.isIE) span.style.width=this.Control.style.width;
   
    this.Control.appendChild(span);
    span.innerHTML=item.Items[0];
   
    span.className='listviewSMIconText';
   
    if(item.Icon16!=null &&item.Icon16!='')
    {
        span.style.backgroundImage='url(' + item.Icon16 + ')';
    }
    this.Control.className='listviewSMIcon' + (item.IsSelected ? '_s' : '');
   
    this.Control.title = item.Items[0]; 

    //EVENTS
    this.SelectionChanged = function(item)
                                {
                                    item.Control.className='listviewSMIcon' + (item.IsSelected ? '_s' : '');
                                };
                               
    this.OnMouseOver = function(item)
                                {
                                    if(!item.IsSelected) item.Control.className='listviewSMIcon_h';
                                };
    this.OnMouseOut = function(item)
                                {
                                    if(!item.IsSelected) item.Control.className='listviewSMIcon';
                                };
                               
                               
    this.OnTextChanged = function(item)
                                {
                                    item.Control.childNodes[0].innerHTML = item.Items[0];
                                };
                               
    this.OnIconChanged = function(item)
                                {
                                     item.Control.childNodes[0].style.backgroundImage = 'url(' + item.Icon16 + ')';
                                };
    //Return self
    return this;
};

Once modified to your needs, add it to the listviews, viewstyles by invoking this code:

Listview.ViewStyles.push(Custom_small_icon);

Note, the value added to the viewstyles is the name of the function declared above.

To use your new viewstyle, simply invoke:

Listview.ChangeView(Listview.ViewStyles.length-1);

You can also list all available view styles by using the following code:

Insert a <SELECT> on your html page:

<select id="selViewStyle" name="selViewStyle"></select>

Add the following to your init() statement in your javascript code:

var selViewStyle = document.getElementById('selViewStyle');

for(var i=0;i<listview.ViewStyles.length;i++)
{
    selViewStyle.options.add(new Option(listview.ViewStyles[i]().ViewName, i));
}

This will populate the <SELECT> with all the available view styles.

Enjoy!