By ugesh.gali on

Hi

I want to implement grid view in drupal so that i can perform operations like view,edit and delete in that grid. I searched in drupal for it it is possible by jqp and sevices modules to load external javascript libraries.any examples?

⋅ Categories: Drupal 6.x

Comments

jaypan’s picture

jaypan
Location Victoria, BC
commented

There are many modules that load external libraries. One is the Jquery Colorpicker module (shameless plug - it's my module!). You can pull it (or others) apart to see how they include the external libraries.

Contact me to contract me for D7 -> D10/11 migrations.

ugesh.gali’s picture

ugesh.gali commented

Hi ,
I have installed jqgrid using external libraies but i was not able to edit and update through the grid.
Can you just give direction in doing this module.

duckzland’s picture

duckzland commented

have u check that jqgrid can be used with the version of the jquery that drupal ships with?

--------------------------------------------------------------------------------------------------------
if you can use drupal why use others?
VicTheme.com

ugesh.gali’s picture

ugesh.gali commented

I got the grid functionality in drupal but i was not able to update the database through events in jqgrid.

Rajan M’s picture

Rajan M commented

Build one menu item in hook_menu,
Process ajax request with menu item url in your grid event, which will pass your data you wanted to save (Method may be GET OR POST).
You need to handle logic in the function calling for menu item. Which will take data from request and process accordingly.

Best Regards,
Rajan

ugesh.gali’s picture

ugesh.gali commented

hi
i have written a code in another modue can you look at this ang give me the direction in implementing this module.

<?php
// $Id$
/**
 * Included files
 */
drupal_add_library('sigma.grid');

/**
 * Implementation of hook_menu().
 */
function wbs_effort_menu() {

  $items['pmt/wbs/effort'] = array(
   'title'           => t('WBS - Effort'),
   'page callback'   => 'wbs_effortgrid',
   'access callback' => TRUE,
   'type'            => MENU_CALLBACK
  );

  return $items;

}
 
function wbs_effortgrid() {

  global $base_url;
  drupal_add_js(drupal_get_path('module', 'wbs_effort').'/effort_grid.js');

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

  $output .= '<div id="a_tabbar" class="dhtmlxTabBar" imgpath="sites/all/js_libraries/tabbar/2.5/codebase/imgs/" style="width:1000px; height:500px;">';

  $output .= '<div id="a1" name="Effort" width="100px" style="margin:15px;">';

  $output .= '<div><table id="myHead1" style="display:none"><tr><td rowspan="2" columnId="no" resizable="false">Order No</td><td rowspan="2" columnId="employee" resizable="false">Employee</td><td colspan="7">Order Info</td></tr><tr><td columnId="country">Country</td><td columnId="customer">Customer</td><td columnId="bill2005">2005</td><td columnId="bill2006">2006</td><td columnId="bill2007">2007</td><td columnId="bill2008">2008</td><td columnId="orderDate">Ship Date</td></tr></table></div>';

   $output .= '<div id="bigbox" style="margin:15px;display:!none;"><div id="gridbox" height=450px width=970px></div></div></div>';

  $output .= '<div id="a2" name="Tab 2" width="100px">Content 2</div>';
  $output .= '<div id="a3" name="Tab 3" width="100px">Content 3</div>';
  $output .= '</div>';

  //Return the page
  return $output;
}

it is the module file
and the jsfile is

dhtmlx.skin = "modern";

var dsOption = {

    fields :[
        {name : "order_no"},
        {name : "country"},
        {name : "customer"},
        {name : "employee"},        
        {name : "order2005" ,type: 'float' },
        {name : "order2006" ,type: 'float' },
        {name : "order2007" ,type: 'float' },
        {name : "order2008" ,type: 'float' },
        {name : "delivery_date" ,type:'date'}
    ],
	recordType : 'object'
}

var colsOption = [
     {id: 'serialNo' , header: "Order No" , width : 60, fieldName: 'order_no', tooltip: true},
     {id: 'employee' , header: "Employee" , width : 60, editor:{type:'text'}},
     {id: 'country' , header: "Country" , width : 70, editor : { type :"select" ,options : {'US': 'US' ,'FR':'FR', 'BR':'BR'} ,defaultText : 'US' }},
     {id: 'customer' , header: "Customer" , width : 80, editor:{type:'text' ,validRule : ['R'] }},
     {id: 'order2005' , header: "2005" , width : 30, editor: { type :"text" ,validRule : ['R','F'] }},
     {id: 'order2006' , header: "2006" , width : 30, editor: { type :"text" ,validRule : ['R','F'] }},
     {id: 'order2007' , header: "2007" , width : 30, editor: { type :"text" ,validRule : ['R','F'] }},
     {id: 'order2008' , header: "2008" , width : 30, editor: { type :"text" ,validRule : ['R','F'] }},
     {id: 'lastDate' , header: "Delivery Date" , width : 150, fieldName: 'delivery_date', editor: { type :"date" }}

];

var gridOption={
	id : "grid1",
	container : 'gridbox',
	width : "950",  //"100%", // 700,
	height : "400",  //"100%", // 330,
        loadURL : "sites/all/modules/pmt/wbs_effort/effort_data.php",
        saveURL : "sites/all/modules/pmt/wbs_effort/effort_data.php",
	dataset : dsOption ,
        columns : colsOption,
        replaceContainer : true,
        pageSize : 15,
        pageSizeList : [5,10,15,20],
	defaultRecord : {'order_no':"00",'employee':"",'country':"",'customer':"",'order2005':0,'order2006':0,'order2007':0,'order2008':0,'delivery_date':"2008-01-01"},
        skin : 'vista',
        showGridMenu : true,
        resizable : true
//        customHead : 'myHead1',
//	toolbarPosition : null,
//	showIndexColumn : true,
};


var mygrid=new Sigma.Grid( gridOption );
Sigma.Util.onLoad(Sigma.Grid.render(mygrid));

the basic thing is i cannot load the LOADURL and SAVEURL lines through the js file.i used JQP and services modules to load this grid.

Rajan M’s picture

Rajan M commented

I dont know on which event you want to save data.
But i would like to give one little example ...

// implementation of hook_menu

function wbs_effort_menu() {
----------
----------

$item['pmt/wbs/savedata'] = array(
   'page callback'   => 'wbs_effort_savadata',
   'access callback' => TRUE,
   'type'            => MENU_CALLBACK
}

return $item;
}

// your wbs_effortgrid function ...i think you want to call event for any grid action

function wbs_effortgrid() {

  global $base_url;
  drupal_add_js(drupal_get_path('module', 'wbs_effort').'/effort_grid.js');
   
  // access url to javascript 
  $storedata_url = $base_path .'pmt/wbs/savedata';
  drupal_set_html_head("<script language='javascript' type='text/javascript' > var storedata_url = '". $storedata_url ."'; </script>" );
  
   -----------------------
   -----------------------
 
}

In your js file, call ajax in your grid event (http://api.jquery.com/jQuery.ajax/) .
pass parameters through url , that you want to save.

call following in within your grid event.
suppose you want param1 and param2 to be save.

var dataurl = storedata_url + "?param1='value1'&param2='value2'";
$.ajax({
  url: dataurl,
  success: function(data) {
   // you can show success notification using this.
  }
});

get request data, and process accordingly

function wbs_effort_savadata( ) {
$param1 = $_GET['param1'];
$param2 = $_GET['param2'];

// save/process your data here
}

Best Regards,
Rajan

duckzland’s picture

duckzland commented

Try this tutorial http://www.viziontech.co.il/tutorial1
it surely can help you in doing ajax in drupal

--------------------------------------------------------------------------------------------------------
if you can use drupal why use others?
VicTheme.com

WorldFallz’s picture

WorldFallz commented

Please don't crosspost. I've deleted the other post (and added your code here). You've already got people helping you here, there's no need to confuse the matter by splitting it across multiple threads. Thanks.

Rajan M’s picture

Rajan M commented

Hello Folks,

I have created one simple example for this, you can read my post at http://rajanmayekar.co.cc/jquery-grid-in-drupal.
Demo is available here http://testsandbox.iblogger.org/jqgrid_example/showgrid.

Cheers,
Rajan

giorgio79’s picture

giorgio79 commented

http://www.drupal.org/project/datatables

My Drupal sites: