jQuery Grid Plugin - jqGridForum

27/06/2008
05:23

josepk

Member

Members

Forum Posts: 44

Member Since:
16/06/2008

Offline

1

Hi,

I have a problem: I need sortable columms but I need too that with the push of one button the grid will reload the data that's comming from server, but if I put reloadOnce="true" the call to the

$(

"#listCC").trigger("reloadGrid");

don't reload the data from server and the data of the screen is out of date.

If I put reloadOnce="false" then it work correctly, but the columns are not sortable.

is there any solution?

thanks a lot.

Josep Escofet

27/06/2008
07:00

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

2

Josep,

Check your logic again. To sort this way you need to pass additional parameters to sort. Example:

$("#mygrid").setGridParam({sortname:'myname',sortorder:'asc'}).trigger("reloadGreid)

Also in module inlineedit there is a very useful method sortGrid(colname,reload)

where the colname is the colname and reload is boolean which tells if the grid should be reloaded.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

01/07/2008
01:59

josepk

Member

Members

Forum Posts: 44

Member Since:
16/06/2008

Offline

3

Hi Tony,

I have tested your solutions but it not work for me.

When It is default option loadonce:false, every time that I click in one

column it is calling to server and asking the file.xml of the rows, the server charges the file correctly but it is not ordered.

When I put loadOnce:true , every time I click the column the list is displayed ordered, but not is calling to server for refreshing data. I have tryed too

put loadOnce:true and when the user push a button :

$(”#mygrid”).setGridParam({loadonce:'false'}).trigger(”reloadGrid")

but it is not calling to the server for refreshing data.

I send you the jQgrid defiition and the xml file. I dont understand what is happening.

jqgrid definition:

jQuery(document).ready(function(){
              jQuery("#listCC").jqGrid({
                            url:'${urlLlista}?tipo=CC',
                            datatype: 'xml',
                            colNames:['${sit}','${convenio}', '${asegurado}','${ccc1}','${ccc2}','${ccc3}','${acciones}'],
                            colModel :[
                                {name:'numSituacion',index:'numSituacion', align:'right', width:40, editable:false, sortable:true},
                                {name:'tipo',index:'tipo', width:130, editable:false},
                                {name:'nombre',index:'nombre', width:85,align:'left', editable:false},
                                {name:'ccc1',index:'ccc1', width:90, align:'right',sortable:true, editable:true, editoptions:{size:"10",maxlength:"11",'class':"campForm2RigthGrid"}},
                                {name:'ccc2',index:'ccc2', width:90, align:'right',sortable:true, editable:true, editoptions:{size:"10",maxlength:"11",'class':"campForm2RigthGrid"}} ,
                                {name:'ccc3',index:'ccc3', width:90, align:'right',sortable:true, editable:true, editoptions:{size:"10",maxlength:"11",'class':"campForm2RigthGrid"}} ,
                                {name:'acciones',index:'acciones', width:75, sortable:false, editable:false, align:'center'}
                            ],
                           // pager: jQuery('#pagerCC'),
                            rowNum:10,
                            sortname: 'numSituacion',
                            sortorder: 'desc',
                            viewrecords: true,
                            imgpath: '${jgridImgPath}',
                            caption: 'Tipo CC',
                            toolbar: [true,"bottom"],
                            loadonce: false,
                            loadComplete: function(){
                               var ids = jQuery("#listCC").getDataIDs();
                               for(var i=0;i<ids.length;i++){
                                   var cl = ids[i];
                                   //alert(cl+" "+ids[i]);
                                   be = "<img src='${editImg}' width='16' height='16' border='0' onclick=jQuery('#listCC').setSelection('"+cl+"'); />";
                                   jQuery("#listCC").setRowData(ids[i],{acciones:be})
                               }
                           },
                            onSelectRow: function(id){
                           if (numEdit == 0){
                               //alert("selectRow "+numEdit);
                               //lastsel2 = jQuery('#listCC').getRowData(id);

                               checkRowEdit('#listCC',id,'${urlModificarAsegurado}&tipo=CC');
                           }else {
                               if (id != lastsel2){
                                   alert("${avisoGuardar}");
                               }
                           }
                           },
                           editurl: "${urlModificarAsegurado}&tipo=CC",
                           loadError: function (xhr,st,err){
                               alert("error");
                               alert(xhr.responseText()+" "+st+" "+err);
                           },
                           afterSubmit: function (response, postData){
                               alert(response);
                           }

});
$("#t_listCC").html(${actualizarCC});

Result xml file from server:

<rows>

				 <page>1</page>

		         <total>10</total>

		         <records>10</records>

			<row id = "0">

		       <cell>0</cell>

		       <cell></cell>

		       <cell>nombre0</cell>

		       <cell>c1_0</cell>

		       <cell>c2_0</cell>

		       <cell>c3_0</cell>

		       <cell></cell>

		    </row>

			<row id = "1">

		       <cell>1</cell>

		       <cell></cell>

		       <cell>nombre1</cell>

		       <cell>c1_1</cell>

		       <cell>c2_1</cell>

		       <cell>c3_1</cell>

		       <cell></cell>

		    </row>

			<row id = "2">

		       <cell>2</cell>

		       <cell></cell>

		       <cell>nombre2</cell>

		       <cell>c1_2</cell>

		       <cell>c2_2</cell>

		       <cell>c3_2</cell>

		       <cell></cell>

		    </row>

			<row id = "3">

		       <cell>3</cell>

		       <cell></cell>

		       <cell>nombre3</cell>

		       <cell>c1_3</cell>

		       <cell>c2_3</cell>

		       <cell>c3_3</cell>

		       <cell></cell>

		    </row>

			<row id = "4">

		       <cell>4</cell>

		       <cell></cell>

		       <cell>nombre4</cell>

		       <cell>c1_4</cell>

		       <cell>c2_4</cell>

		       <cell>c3_4</cell>

		       <cell></cell>

		    </row>

			<row id = "5">

		       <cell>5</cell>

		       <cell></cell>

		       <cell>nombre5</cell>

		       <cell>c1_5</cell>

		       <cell>c2_5</cell>

		       <cell>c3_5</cell>

		       <cell></cell>

		    </row>

			<row id = "6">

		       <cell>6</cell>

		       <cell></cell>

		       <cell>nombre6</cell>

		       <cell>c1_6</cell>

		       <cell>c2_6</cell>

		       <cell>c3_6</cell>

		       <cell></cell>

		    </row>

			<row id = "7">

		       <cell>7</cell>

		       <cell></cell>

		       <cell>nombre7</cell>

		       <cell>c1_7</cell>

		       <cell>c2_7</cell>

		       <cell>c3_7</cell>

		       <cell></cell>

		    </row>

			<row id = "8">

		       <cell>8</cell>

		       <cell></cell>

		       <cell>nombre8</cell>

		       <cell>c1_8</cell>

		       <cell>c2_8</cell>

		       <cell>c3_8</cell>

		       <cell></cell>

		    </row>

			<row id = "9">

		       <cell>9</cell>

		       <cell></cell>

		       <cell>nombre9</cell>

		       <cell>c1_9</cell>

		       <cell>c2_9</cell>

		       <cell>c3_9</cell>

		       <cell></cell>

		    </row>

</rows>

thanks.

Josep Escofet

01/07/2008
02:08

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

4

My simple question is?

What you have? already constructed xml file or a data constructed from

a SQL query?

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

01/07/2008
02:24

josepk

Member

Members

Forum Posts: 44

Member Since:
16/06/2008

Offline

5

This data is a sample constructed from server, Struts action populates a

List and the list is putted on session and after there is a jsp file that renders

this list as xml file. The original data comes from database thru sql, but

too it is putted on list and after there is a jsp file that renders this data.

An example with original data is here :

<rows>

				 <page>1</page>

		         <total>13</total>

		         <records>13</records>

			<row id = "0">

		       <cell>8</cell>

		       <cell>*CIAL.TEXTIL ARBITEX/3 PROD.ACCIDENTES</cell>

		       <cell></cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell>45103397577</cell>

		       <cell></cell>

		    </row>

			<row id = "1">

		       <cell>9</cell>

		       <cell>*CIAL.TEXTIL ARBITEX/4 PROD.ACCIDENTES</cell>

		       <cell></cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell></cell>

		    </row>

			<row id = "2">

		       <cell>12</cell>

		       <cell>*CIAL.TEXTIL ARBITEX/7 PROD.ACCIDENTES</cell>

		       <cell></cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell></cell>

		    </row>

			<row id = "3">

		       <cell>13</cell>

		       <cell>*CIAL.TEXTIL ARBITEX/8 PROD.ACCIDENTES</cell>

		       <cell></cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell></cell>

		    </row>

			<row id = "4">

		       <cell>14</cell>

		       <cell>*CIAL.TEXTIL ARBITEX/10 PROD.ACCIDENTES</cell>

		       <cell></cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell>45103397577</cell>

		       <cell></cell>

		    </row>

			<row id = "5">

		       <cell>21</cell>

		       <cell>*CIAL.TEXTIL ARBITEX/12 PROD.ACCIDENTES</cell>

		       <cell></cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell></cell>

		    </row>

			<row id = "6">

		       <cell>24</cell>

		       <cell>*CIAL.TEXTIL ARBITEX/14 PROD.ACCIDENTES</cell>

		       <cell></cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell></cell>

		    </row>

			<row id = "7">

		       <cell>28</cell>

		       <cell>*CIAL.TEXTIL ARBITEX/1 PROD.ACCIDENTES</cell>

		       <cell></cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell></cell>

		    </row>

			<row id = "8">

		       <cell>29</cell>

		       <cell>*CIAL.TEXTIL ARBITEX/5 PROD.ACCIDENTES</cell>

		       <cell></cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell></cell>

		    </row>

			<row id = "9">

		       <cell>30</cell>

		       <cell>*CIAL.TEXTIL ARBITEX/6 PROD.ACCIDENTES</cell>

		       <cell></cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell></cell>

		    </row>

			<row id = "10">

		       <cell>35</cell>

		       <cell>*CIAL.TEXTIL ARBITEX/2 PROD.ACCIDENTES</cell>

		       <cell></cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell></cell>

		    </row>

			<row id = "11">

		       <cell>37</cell>

		       <cell>*CIAL.TEXTIL ARBITEX/11 PROD.ACCIDENTES</cell>

		       <cell></cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell></cell>

		    </row>

			<row id = "12">

		       <cell>38</cell>

		       <cell>*CIAL.TEXTIL ARBITEX/16 PROD.ACCIDENTES</cell>

		       <cell></cell>

		       <cell>01000000128</cell>

		       <cell>01000000128</cell>

		       <cell>45103397577</cell>

		       <cell></cell>

		    </row>

</rows>

01/07/2008
02:37

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

6

You should pass in your SQL a ORDER BY cluse to sort have effect.

Example (php code)

$sorcol = $_GET['sortname']; // this is taken from grid and then

$sortorder = $_GET['sortorder'];

$SQL = "SELECT * FROM mytable ORDER BY ".$sortcol." ".$sortorder;

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

01/07/2008
02:44

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

7

Sorry there is mistake

the right is:

$sortname = $_GET['sidx'];

$sortorder = $_GET['sord'];

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

01/07/2008
02:51

josepk

Member

Members

Forum Posts: 44

Member Since:
16/06/2008

Offline

8

thanks Tony,

But if you put loadonce=true the data is sorted when you click some col,

is it done for the javascript in the client side?

Josep Esofet

01/07/2008
02:58

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

9

loadonce parameter load the data from server only once and then the processing is at client side - i.e. the datatype is set automatically to clientSide

Refer to docs for more info

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

01/07/2008
04:39

josepk

Member

Members

Forum Posts: 44

Member Since:
16/06/2008

Offline

10

Thanks tony,

I have made the sort at the server side, and now it is working perfectly.

thanks a lot.

Josep Escofet