Grid usage samples

This are some samples of the grid widget rendering different datastructures.
All this samples use the following function to render and display the grid:

      function loadGrid(data,id)
      {
        var g = Widget.grid.render(id,data);
        replaceChildNodes('container_'+ id,g);
      }
      

Minimal grid

This is a sample, showing the minimal data structure needed to render a grid

        var minimalGrid = {'rows':
                           [
                             ['1','Hannibal','Jaramillo','Hagen'],
                             ['2','Olivia','Jaramillo','Hagen']
                            ]
                          };
      

Grid with row selection

Define a select and a remove function to be called. The row id (if defined, otherwise the first cell on each row) will be appended to your parameter list

        var rowSelectGrid = {
                           'actions':{
                                      'select':{'function':'javascript:selectingRow','params':['hi ho']},
                                      'remove':{'function':'javascript:removingRow','params':['oh nej']}
                                     },
                           'rows':
                           [
                             ['1','Hannibal','Jaramillo','Hagen'],
                             ['2','Olivia','Jaramillo','Hagen']
                            ]
                          };
        function selectingRow(extraparam,id)
        {
          alert('Selecting row '+ id +', with extra param '+ extraparam);
        }
        function removingRow(extraparam,id)
        {
          if(!confirm('Are you shure you want to remove the row with id='+ id)) return;
          alert('Removing row '+ id +', with extra param '+ extraparam);
        }
        Widget.imagedir='../images/';
      

Grid with headers

        var headerGrid = {
                           'headers':['id','fistname','middlename','lastname'],
                           'rows':
                           [
                             ['1','Hannibal','Jaramillo','Hagen'],
                             ['2','Olivia','Jaramillo','Hagen']
                            ]
                          };
      

Grid with label headers and column sorting

        var headerLabelGrid = {
                           'actions':{ 'sort':'sortingBy' },
                           'headers':[
                                       {'column':'id','label':'ID','sort':'down' },
                                       {'column':'firstname','label':'First Name'},
                                       {'column':'middlename','label':'Middle Name'},
                                       {'column':'lastname','label':'Last Name'}
                                      ],
                           'rows':
                           [
                             ['1','Hannibal','Jaramillo','Hagen'],
                             ['2','Olivia','Jaramillo','Hagen']
                            ]
                          };
        function sortingBy(columnName,order)
        {
          alert('Sort by column:'+ columnName +', order:'+ order);
        }
        Widget.imagedir='../images/';
      

Grid with active column selection

        var colmanager = {
                           'actions':{ 'column_management':'toggleColumnState' },
                           'hidden_columns':['middlename','id'],
                           'headers':[
                                       {'column':'id','label':'ID'},
                                       {'column':'firstname','label':'First Name'},
                                       {'column':'middlename','label':'Middle Name'},
                                       {'column':'lastname','label':'Last Name'}
                                      ],
                           'rows':
                           [
                            [
                               {'column':'id','value':'1'},
                               {'column':'firstname','value':'Hannibal'},
                               {'column':'middlename','value':'Jaramillo'},
                               {'column':'lastname','value':'Hange'}
                             ],
                            [
                               {'column':'id','value':'3'},
                               {'column':'firstname','value':'Olivia'},
                               {'column':'middlename','value':'Jaramillo'},
                               {'column':'lastname','value':'Hagen'}
                             ]
                            ]
                          };
        function toggleColumnState(column)
        {
          var newHC = [];
          var rem = false;
          var hc = colmanager.hidden_columns;
          for(var i=0;i
    

    
    
    

    

    
    Load grid with support for column management