Sigma grid with Drupal

[kdeepalakshmi]

Hello Everyone,

I am a new user of Sigma grid. As a first step, I executed the first lesson of Sigma Grid tutorial 1 (http://sigmawidgets.com/forum/ajax-data-grid-view/sigma-grid-2-1-tutorial-1-get-started/) and it worked fine.

Now I want to run the same function from within drupal framework. The grid is loaded fine but there is a huge a gap between the column headers. The gap is so much that I am able to see the second column header only if I increase the container width to 1000px. Is this because of any conflict between the sigma js and drupal jquery framework?

Please let me know how to proceed further.

Thanks in advance
Deepa

[kdeepalakshmi]

Please find below my module file and js file:

Module file
<?php

// $Id$

/**

 * Included files

 */
drupal_add_js_library('sigma.grid');

/**

 * Implementation of hook_menu().

 */

function wbs_effort_menu() { 



  //1 Displays all the wri and provides links/buttons for the user to
  //Add ,edit,view and delete wri from this form

  $items['pmt/wbs/effort'] = array(

   'title'           => t('WBS - Effort'),

   'page callback'   => 'wbs_effortgrid',   

   'access callback' => TRUE,

   'type'            => MENU_CALLBACK

  );


  return $items;



}
 

/**
 * Function : wbs_effortgrid
 *

 * @param

 *   <none>

 *

 * @return

 *   <none>

 * 

 */


function wbs_effortgrid() {



  global $base_url;

  drupal_add_js('sites/all/modules/pmt/wbs_effort/effort_grid.js');

  //Set title
  drupal_set_title(t('WBS - Effort Forecast'));   


  $output = '<div id="gridbox" style="width:700px;height:300px"></div>';


  //Return the page

  return $output;

}

js file

var data1 = [
 {serialNo:"010-0",country:"MA",employee:"Jerry",customer:"Keith",order2005:50,order2006:57,order2007:80,order2008:46,lastDate:"2008-10-02"} ,   {serialNo:"010-1",country:"SP",employee:"Charles",customer:"Marks",order2005:79,order2006:37,order2007:40,order2008:90,lastDate:"2008-04-24"} ,   {serialNo:"010-2",country:"SP",employee:"Vincent",customer:"Harrison",order2005:91,order2006:75,order2007:31,order2008:40,lastDate:"2008-02-17"} ,    {serialNo:"020-3",country:"RA",employee:"Edward",customer:"Sidney",order2005:61,order2006:31,order2007:80,order2008:47,lastDate:"2008-10-16"}
];
 
var data2 = [ ["010-0","MA","Jerry-dee","Keith",50,57,80,46,"2008-10-02"], ["010-1","SP","Charles-dee","Marks",79,37,40,90,"2008-04-24"], ["010-2","SP","Vincent-dee","Harrison",91,75,31,40,"2008-02-17"], ["020-3","RA","Edward-dee","Sidney",61,31,80,47,"2008-10-16"]];
 

var dsOption = {



    fields :[
        {name : "serialNo"},
        {name : "country"},
        {name : "customer"},
        {name : "employee"},       
        {name : "order2005" ,type: 'float' },
        {name : "order2006" ,type: 'float' },
        {name : "order2007" ,type: 'float' },
        {name : "order2008" ,type: 'float' },
        {name : "lastDate" ,type:'date'}   
    ],

   recordType : 'array',
        data : data2


}


var colsOption = [
     {id: 'serialNo' , header: "Order No" , width : 60},     
     {id: 'employee' , header: "Employee" , width : 60, editor:{type:'text'}},
     {id: 'country' , header: "Country" , width : 70},
     {id: 'customer' , header: "Customer" , width : 80},
     {id: 'order2005' , header: "2005" , width : 30},
     {id: 'order2006' , header: "2006" , width : 30},
     {id: 'order2007' , header: "2007" , width : 30},
     {id: 'order2008' , header: "2008" , width : 30},
     {id: 'lastDate' , header: "Delivery Date" , width : 100}

];

//var grid_demo_id = "grid1";


var gridOption={

   id : "grid1",
   container : 'gridbox',
   dataset : dsOption ,

   columns : colsOption,
       
        skin: 'vista'

};

var mygrid=new Sigma.Grid( gridOption );

Sigma.Util.onLoad(Sigma.Grid.render(mygrid));

[kdeepalakshmi]

If anyone has used sigma grid within drupal, can you please post a sample code. I am desperate to get this working.

Thank you

[steven]

hello kdeepalakshmi,
I am willing to help you out. but I am not familiar with dupal model developement.
you may visite
http://your-dupal-modul/ in your  browser,
and then you will get generated pure html by browser menu "view source"
then you could past code here for me

[kdeepalakshmi]

Thank you very much Steven for your time.

I have attached the following files:

1. sigmagrid_snapshot.jpg => A snapshot of the grid that is generated. (Please note that only the first column header is displayed.)
2. viewsource.txt => html using "View source" option in IE.
3. wbs_effort.module => Drupal module where I am having the grid container.
4. effort_grid.js => js which has the grid definition

Would the behaviour be as a result of conflict in css?

Thanks again

[kdeepalakshmi]

Hi Steven,

I managed to display all the column headers by altering the gt_grid.css (but I do not know the impact!!)

before:
.gt-head-wrap {
   float:left;
   width:10000px;
}

I deleted the width parameter and now my gt-head-wrap looks like mentioned below:

.gt-head-wrap {
   float:left;
}

After the above mentioned change, the column headers are displayed properly. But the column resize line is displayed in the center of the column header. (and not next to the right border of the column)

Kindly advise me on how to solve this.

Thank you in advance
Deepa

[ugesh]

Hi  kdeepalakshmi and Moderator,

Your tutorial was nice and worked for me. Can you just specify how drupal interacts with database using sigma grid and json.Right now you are dealing with static files loaded from Js.Is there any way to load data dyamically and manupulated.How did you give connetion via effort_data.php

Thankyou in advance