Jqgrid

Jqgrid
Javascript code
jQuery("#grid_id").jqGrid(options)
HTML
<html>
....
<body>
...
<table id="grid_id"></table>
...
</body>
<html>
Grid id id table code html
Options HH
n
Query(document).ready(function(){
jQuery("#ist").jqGrid({
ur!"e#ampe.p$p"% // n
datatype! "#m"% // #m
mtype! "G&'"%
co(ames!)"*n+ (o"%",ate"% "-mount"%"'a#"%"'ota"%"(otes".% // coumn
co/ode !)// Hnn parameter coumn
{name!"in+id"% inde#!"in+id"% 0idt$!112%
{name!"in+date"% inde#!"in+date"% 0idt$!342%
{name!"amount"% inde#!"amount"% 0idt$!54% aign!"rig$t"2%
{name!"ta#"% inde#!"ta#"% 0idt$!54% aign!"rig$t"2%
{name!"tota"% inde#!"tota"% 0idt$!54% aign!"rig$t"2%
{name!"note"% inde#!"note"% 0idt$!614% sorta7e!false2
.%
pager! "#pager"% // pager bar u u record
layer (the pager div) code html
ro0(um!64% // record grid
ro08ist!)64%94%:4.% // seect 7o# eement nn
ro0(um
sortname! "in+id"% //sort #m json parameter u
ur
sortorder! "desc"% // sort H n n
+ie0records! true% // n jqgrid record
grid record query
caption! "/y ;irst grid" // ayer grid _n H $eader
ayer n string _
2)<
2)<
</script>

grid n n option
Option
Property Type Description
Defau
lt
1)
Can
be
chang
ed?
aja#Grid
=ptions
o7ject
set aja# setting HH go7a
H grid option
n H aja# setting H
set grid n error n
empty
o7ject
>es
aja#?eect
=ptions
o7ject
set aja# setting HH go7a
H seect eement seect u
data@r option editoptions
searchoptions objects
empty
o7ject
>es
atcass string
H n n
cass
option altRows options set
true
uiA
priorit
yA
secon
dary
>es.
Bequir
es
reoad
atBo0s 7ooean ?et a Ce7raAstriped grid ;ase
>es.
-;ter
reoad
autoencod
e
7ooean
set true encode code
$tm ( ser+er)
data ( )
auto
Dy e#ampe < 0i 7e con+erted to
Et<
;ase >es
auto0idt$ 7ooean
set true grid
nn auto
parent eement n
grid n
nn n siCe
grid parent eement n
setrid!idth method n code
;ase (o
caption string
ayer grid _n
H $eader ayer n string
_
empty
string
(o./
et$od
a+ai.
ce8ayou
t
integer
padding " border width o# the cell n
n n td element grid css #ile
( n ) $
n
n paddingLe#%"paddingRight%"borderLe#t&'$
1 (o
ce&dit 7ooean
'rue n ce n ;ase

;ase >es
cesu7mi
t
string
H ce
sa+e ! "remote" or "cient-rray".
"remot
e"
>es
ceur string ur ce n sa+e nu >es
co/ode array
-rray H parameter
coumn g
grid
empty
array
(o
co(ames array).
array Hn coumn
te#t _ Feader ayer
coumn n n comma
array H
co/ode array.
empty
array)
.
(o
datastr string
'$e string o; data datatype
parameter n set
to #mstring or jsonstring
nu >es
datatype string
#m %
#mstring % json % oca A cient side
(array data) % ja+ascript
#m >es
deepempt
y
7ooean
'$is option s$oud 7e set to true i; a
e+ent or a pugin is attac$ed to t$e
ta7e ce. '$e option uses jQuery
empty ;or t$e t$e ro0 and a its
c$idren eements. '$is $a+e o;
course speed o+er$ead% 7ut pre+ent
memory eaGs
;ase >es
deseect-
;ter?ort
7ooean
-ppica7e ony 0$en 0e use
datatype ! oca. ,eseects currentyA
seected ro0(s) 0$en a sort is
appied.
true >es
direction string
,etermines t$e anguage direction in
grid. '$e de;aut is HtrI (8e;t 'o
Big$t anguage). J$en set to HrtI
(Big$t 'o 8e;t) t$e grid
automaticay do t$e needed. *t is
important to note t$at in one page 0e
can $a+e t0o (or more) grids 0$ere
t$e one can $a+e direction HtrI
0$ie t$e ot$er can $a+e direction
HrtI. '$is option 0orG ony in
KireKo# :.# +ersions and *nternet
&#porer +ersions >=L. Murrenty
?a;ai and Googe M$rome does not
support ;uy direction HrtI. -so t$e
same appy to =pera 7ro0sers. '$e
most common pro7em in KireKo# is
t$at t$e de;aut settings o; t$e
7ro0ser does not support B'8. *n
order c$ange t$is see F=J
tr (o
'= section in t$is c$apter .
editur string ur edit nu >es
emptyrec
ords
string
,ispay t$e in;ormation 0$en t$e
returned (or t$e current) num7er o;
records is Cero. '$is option is +aid
ony i; +ie0records option is set to
true.
see
ang
;ie
>es
&#pandM
oMicG
7ooean
0$en true% t$e treeGrid is e#panded
and/or coapsed 0$en 0e cicG on
t$e te#t o; t$e e#panded coumn% not
ony on t$e image
true (o
&#pandM
oumn
string
indicates 0$ic$ coumn (name ;rom
co/ode) s$oud 7e used to e#pand
t$e tree grid. *; not set t$e ;irst one is
used. Naid ony 0$en treeGrid
option is set to true.
nu (o
;ooterro0 7ooean
*; set to true t$is 0i pace a ;ooter
ta7e 0it$ one ro0 7eo0 t$e gird
records and a7o+e t$e pager. '$e
num7er o; coumns equa o; t$ese
;rom co/ode
;ase (o
;orceKit 7ooean
*; set to true% and resiCing t$e 0idt$
o; a coumn% t$e adjacent coumn (to
t$e rig$t) 0i resiCe so t$at t$e
o+era grid 0idt$ is maintained
(e.g.% reducing t$e 0idt$ o; coumn 9
7y :4p# 0i increase t$e siCe o;
coumn : 7y :4p#). *n t$is case t$ere
is no $oriConta scro7ar. (ote! t$is
option is not compati7e 0it$
s$rinG'oKit option A i.e i;
s$rinG'oKit is set to ;ase% ;orceKit is
ignored.
;ase (o
gridstate string ,etermines t$e current state o; t$e
grid (i.e. 0$en used 0it$ $iddengrid%
+isi7
e
(o
$idegrid and caption options). Man
$a+e eit$er o; t0o states! "+isi7e" or
"$idden"
grid+ie0 7ooean
*n t$e pre+ious +ersions o; jqGrid
incuding :.O.P%reading a reati+ey
7ig data sets (Bo0s >=644 ) caused
speed pro7ems. '$e reason ;or t$is
0as t$at as e+ery ce 0as inserted
into t$e grid 0e appied a7out 1AL
jQuery cas to it. (o0 t$is pro7em
is reso+ed< 0e no0 insert t$e entry
ro0 at once 0it$ a jQuery append.
'$e resut is impressi+e A a7out :A1
times ;aster. J$at 0i 7e t$e resut
i; 0e insert a t$e data at onceQ >es%
t$is can 7e done 0it$ a $ep o;
grid+ie0 option 0$en set to true.
'$e resut is a grid t$at is 1 to 64
times ;aster. =; course 0$en t$is
option is set to true 0e $a+e some
imitations. *; set to true 0e can not
use treeGrid% su7Grid% or
a;ter*nsertBo0 e+ent. *; you do not
use t$ese t$ree options in t$e grid
you can set t$is option to true and
enjoy t$e speed.
;ase >es
$eadertit
es
7ooean
*; t$e option is set to true t$e tite
attri7ute is added to t$e coumn
$eaders
;ase (o
$eig$t mi#ed
'$e $eig$t o; t$e grid. Man 7e set as
num7er (in t$is case 0e mean pi#es)
or as percentage (ony 644R is
acceped) or +aue o; auto is
accepta7e.
614
(o./
et$od
a+ai.
$iddengri
d
7ooean *; set to true t$e grid initiay is
$idden. '$e data is not oaded (no
;ase (o
request is sent) and ony t$e caption
ayer is s$o0n. J$en t$e s$o0/$ide
7utton is cicGed t$e ;irst time to
s$o0 grid% t$e request is sent to t$e
ser+er% t$e data is oaded% and grid is
s$o0n. Krom t$is point 0e $a+e a
reguar grid. '$is option $as e;;ect
ony i; t$e caption property is not
empty and t$e $idegrid property (see
7eo0) is set to true.
$idegrid 7ooean
&na7es or disa7es t$e s$o0/$ide
grid 7utton% 0$ic$ appears on t$e
rig$t side o; t$e Maption ayer. 'aGes
e;;ect ony i; t$e caption property is
not an empty string.
true (o
$o+erro0
s
7ooean
J$en set to ;ase t$e mouse
$o+ering is disa7ed in t$e grid data
ro0s.
;ase >es
inine,at
a
empty
o7ject
an array used to add content to t$e
data posted to t$e ser+er 0$en 0e
are in inine editing.
{2 >es
jsonBead
er
array
-rray 0$ic$ descri7es t$e structure
o; t$e e#pected json data. Kor a ;u
description and de;aut setting%
see Betrie+ing ,ata S?=( ,ata
(o
astpage integer
Beadony property. ,etermines t$e
tota num7er o; pages returned ;rom
t$e request.
4 (o
astsort integer
inde# o; ast sorted coumn
7eginning ;rom 4
4 (o
oadonce 7ooean *; t$is ;ag is set to true% t$e grid
oads t$e data ;rom t$e ser+er ony
once (using t$e appropriate
datatype). -;ter t$e ;irst request t$e
;ase (o
datatype parameter is automaticay
c$anged to oca and a ;urt$er
manipuations are done on t$e cient
side. '$e ;unctions o; t$e pager (i;
present) are disa7ed.
oadte#t string
'$e te#t 0$ic$ appear 0$en
requesting and sorting data. '$is
parameter is ocated in anguage ;ie
8oadi
ngT
(o
oadui string
'$is option contros 0$at to do
0$en an aja# operation is in
progress.
disable A disa7es t$e jqGrid
progress indicator. '$is 0ay you can
use your o0n indicator.
enable (de;aut) A ena7es H8oadingI
message in t$e center o; t$e grid.
block A ena7es t$e H8oadingI
message and 7ocGs a actions in t$e
grid unti t$e aja# request is ;inis$ed.
(ote t$at t$is disa7es paging%
sorting and a actions on too7ar% i;
any.
ena7e>es
mtype string
,e;ines t$e type o; request to maGe
(HU=?'I or HG&'I)
G&' >es
mutiGey string
'$is parameter $a+e sense ony
mutiseect option is set to true.
,e;ines t$e Gey 0$ic$ 0i 7e
pressed 0$en 0e maGe
mutiseection. '$e possi7e +aues
are!shiftKey A t$e user s$oud press
?$i;t Vey altKey A t$e user s$oud
press -t VeyctrlKey A t$e user
s$oud press Mtr Vey
empty
string
>es
muti7o#o
ny
7ooean '$is option 0orGs ony 0$en
mutiseect = true. J$en mutiseect
is set to true% cicGing any0$ere on a
;ase >es
ro0 seects t$at ro0< 0$en
muti7o#ony is aso set to true% t$e
mutiseection is done ony 0$en t$e
c$ecG7o# is cicGed (>a$oo stye).
MicGing in any ot$er ro0 (suppose
t$e c$ecG7o# is not cicGed)
deseects a ro0s and t$e current
ro0 is seected.
mutiseec
t
7ooean
*; t$is ;ag is set to true a muti
seection o; ro0s is ena7ed. - ne0
coumn at e;t side is added. Man 7e
used 0it$ any datatype option.
;ase
(o.
see
F=J
'=
mutiseec
tJidt$
integer
,etermines t$e 0idt$ o; t$e
mutiseect coumn i; mutiseect is
set to true.
94 (o
page integer
?et t$e initia num7er o; page 0$en
0e maGe t$e request.'$is parameter
is passed to t$e ur ;or use 7y t$e
ser+er routine retrie+ing t$e data
6 >es
pager mi#ed
,e;ines t$at 0e 0ant to use a pager
7ar to na+igate t$roug$ t$e records.
'$is must 7e a +aid $tm eement< in
our e#ampe 0e ga+e t$e di+ t$e id
o; HpagerI% 7ut any name is
accepta7e. (ote t$at t$e (a+igation
ayer (t$e HpagerI di+) can 7e
positioned any0$ere you 0ant%
determined 7y your $tm< in our
e#ampe 0e speci;ied t$at t$e pager
0i appear a;ter t$e 'a7e Dody
ayer. '$e +aid cas can 7e (using
our e#ampe) "pager"% "#pager"%
jQuery("#pager"). * recommend to
use t$e second one. ?ee Uager
empty
string.
Murre
nty
ony
one
page7
ar is
possi7
e.
(o
pagerpos string ,etermines t$e position o; t$e pager
in t$e grid. Dy de;aut t$e pager
center (o
eement 0$en created is di+ided in :
parts (one part ;or pager% one part ;or
na+igator 7uttons and one part ;or
record in;ormation)
pg7uttons 7ooean
,etermines i; t$e Uager 7uttons
s$oud 7e s$o0n i; pager is
a+aia7e. -so +aid ony i; pager is
set correcty. '$e 7uttons are paced
in t$e pager 7ar.
true (o
pginput 7ooean
,etermines i; t$e input 7o#% 0$ere
t$e user can c$ange t$e num7er o;
requested page% s$oud 7e a+aia7e.
'$e input 7o# appear in t$e pager
7ar.
true (o
pgte#t string
?$o0 in;ormation a7out current
page status. '$e ;irst +aue is t$e
current oaded page. '$e second
+aue is t$e tota num7er o; pages
?ee
ang
;ie
>es
prm(ame
s
array ,e;aut +aues prm(ames!
{page!HpageI%ro0s!Hro0sI% sort!
Hsid#I%order! HsordI%
searc$!H_searc$I% nd!HndI%
id!HidI%oper!HoperI%editoper!HeditI%a
ddoper!HaddI%deoper!HdeI2
MustomiCes names o; t$e ;ieds sent
to t$e ser+er on a Uost! de;aut
+aues ;or t$ese ;ieds are HpageI%
Hro0sI% Hsid#I% HsordI% Hsearc$I and
HndI. Kor e#ampe% 0it$ t$is setting%
you can c$ange t$e sort order
eement ;rom Hsid#I to HmysortI!
prm(ames! {sort! HmysortI2. '$e
string t$at 0i 7e posted to t$e
ser+er 0i t$en 7e myur.p$pQ
page=6Ero0s=64Emysort=myinde#
Esord=asc rat$er t$an myur.p$pQ
none >es
page=6Ero0s=64Esid#=myinde#Es
ord=asc
J$en some parameter is set to nu
t$ey 0i 7e not sended to t$e ser+er.
Dy e#ampe i; 0e set prm(ames!
{ nd!nu2 t$e nd parameter 0i not
7e sended. Kor npage option see
scro option.
'$e options meaning t$e ;oo0ing
page A t$e t$e requested page%
ro0s A t$e num7er o; ro0s
requested%
sort A t$e sorting coumn%
order A t$e sort order%
searc$ A t$e searc$ indicator%
nd A t$e time passed to t$e request
(;or *& 7ro0sers not to cac$e t$e
request)%
id A t$e name o; t$e id 0$en post
data in editing modues%
oper A t$e operation parameter%
editoper A t$e name o; operation
0$en t$e data is posted in edit
mode%
addoper A t$e name o; operation
0$en t$e data is posted in add mode%
deoper A t$e name o; operation
0$en t$e data is posted in deete
mode%
post,ata array
'$is array is passed directy to t$e
ur. '$is is associati+e array and can
7e used t$is 0ay!
{name6!+aue6T2.
?ee -U* met$ods ;or manipuation.
empty
array
>es
reccount integer Beadony property. ,etermines t$e
e#acty num7er o; ro0s in t$e grid.
,o not mi# t$is 0it$ records
4 (o
parameter. *nstead t$at in most cases
t$ey are equa t$ere is a case 0$ere
t$is is not true. Dy e#ampe you
de;ine ro0(um parameter 61% 7ut
you return ;rom ser+er records
parameter = 94% t$en t$e records
parameter 0i 7e 94% t$e reccount
parameter 0i 7e 61% and in t$e grid
you 0i $a+e 61 records.
recordpos string
,etermines t$e position o; t$e record
in;ormation in t$e pager. Man 7e e;t%
center% rig$t
rig$t (o
records integer
num7er o; returned records in grid
;rom t$e request
none (o
recordte#t string
Bepresent in;ormation t$at can 7e
s$o0n in t$e pager. -so t$is option
is +aid i; +ie0records option is set
to true. '$is te#t appear ony i; t$e
totta num7er o; recreds is greater
t$en Cero.*n order to s$o0 or $ide
some in;ormation t$e items in {2
mean t$e ;oo0ing! {42 t$e start
position o; t$e records depending on
page num7er and num7er o;
requested records< {62 A t$e end
position {92 A tota records returned
;rom t$e data
see
ang
;ie
>es
resiCecas
s
string
-ssigns a cass to coumns t$at are
resiCa7e so t$at 0e can s$o0 a
resiCe $ande ony ;or ones t$at are
resiCa7e
empty
string
(o
ro08ist array). -n array to construct a seect 7o#
eement in t$e pager in 0$ic$ 0e can
c$ange t$e num7er o; t$e +isi7e
ro0s. J$en c$anged during t$e
empty
array
A ).
(o
e#ecution% t$is parameter repaces
t$e ro0(um parameter t$at is passed
to t$e ur. *; t$e array is empty t$e
eement does not appear in t$e pager.
'ypica you can set t$is iGe
)64%94%:4.. *; t$e ro0(um parameter
is set to :4 t$en t$e seected +aue in
t$e seect 7o# is :4.
ro0num7
ers
7ooean
*; t$is option is set to true% a ne0
coumn at e;t o; t$e grid is added.
'$e purpose o; t$is coumn is to
count t$e num7er o; a+aia7e ro0s%
7eginning ;rom 6. *n t$is case
co/ode is e#tended automaticay
0it$ ne0 eement 0it$ name A "rn".
-so% 7e care;u not to use t$e name
"rn" in co/ode
;ase (o
ro0(um integer
?ets $o0 many records 0e 0ant to
+ie0 in t$e grid. '$is parameter is
passed to t$e ur ;or use 7y t$e
ser+er routine retrie+ing t$e data.
(ote t$at i; you set t$is parameter to
64 (i.e. retrie+e 64 records) and your
ser+er return 61 t$en ony 64 records
0i 7e oaded. ?et t$is parameter
to -1 (unimited) to disa7e t$is
c$ecGing.
94 >es
ro0num
Jidt$
integer
,etermines t$e 0idt$ o; t$e ro0
num7er coumn i; ro0num7ers
option is set to true.
91 (o
sa+edBo
0
array
'$is is read ony property and is
used in *nine and ce editing
modues to store t$e data% 7e;ore
editing t$e ro0 or ce. ?ee Me
editing and *nine editing.
empty
array
(o
searc$dat array {2 '$is property contain t$e searc$ed empty >es
a data in pair name!+aue.
array{
2
scro
7ooean
or
integer
Mreates dynamic scroing grids.
J$en ena7ed% t$e pager eements
are disa7ed and 0e can use t$e
+ertica scro7ar to oad data. J$en
set to true t$e grid 0i a0ays $od
a t$e items ;rom t$e start t$roug$ to
t$e atest point e+er +isited.
J$en scro is set to +aue (eg 6)% t$e
grid 0i just $od t$e +isi7e ines.
'$is ao0 us to oad t$e data at
portions 0$itout to care a7out t$e
memory eaGs. -dditionay t$is 0e
$a+e optiona e#tension to t$e ser+er
protoco! npage (see prm(ames
array). *; you set t$e npage option in
prm(ames% t$en t$e grid 0i
sometimes request more t$an one
page at a time% i; not it 0i just
per;orm mutipe gets.
;ase (o
scro=;;s
et
integer
,etermines t$e 0idt$ o; t$e +ertica
scro7ar. ?ince di;;erent 7ro0sers
interpret t$is 0idt$ di;;erenty (and it
is di;;icut to cacuate it in a
7ro0sers) t$is can 7e c$anged.
65
(o./
et$od
a+ai.
scro'im
eout
integer
(miise
conds)
'$is contro t$e timeout $ander
0$en scro is set to 6.
944 >es
scroro0
s
7ooean J$en ena7ed% seecting a ro0 0it$
set?eection scros t$e grid so t$at
t$e seected ro0 is +isi7e. '$is is
especiay use;u 0$en 0e $a+e a
+ertica scroing grid and 0e use
;orm editing 0it$ na+igation 7uttons
(ne#t or pre+ious ro0). =n
;ase >es
na+igating to a $idden ro0% t$e grid
scros so t$e seected ro0 7ecomes
+isi7e.
searrro0 arrayA).
'$is options is read ony.
,etermines t$e currenty seected
ro0s 0$en mutiseect is set to true.
'$is is one dimensiona array and
t$e +aues in t$e array correspond to
t$e seected id"s in t$e grid.
empty
array
).
(o
sero0 string
'$is option is read ony. Montain t$e
id o; t$e ast seected ro0. *; you sort
or appy a pagging t$is options is set
to nu
nu (o
s$rinG'o
Kit
7ooean
'$is option descri7es t$e type o;
cacuation o; t$e initia 0idt$ o;
eac$ coumn against 0it$ t$e 0idt$
o; t$e grid. *; t$e +aue is true and
t$e +aue in 0idt$ option is set t$en!
&+ery coumn 0idt$ is scaed
according to t$e de;ined option
0idt$. &#ampe! i; 0e de;ine t0o
coumns 0it$ a 0idt$ o; 54 and 694
pi#es% 7ut 0ant t$e grid to $a+e a
:44 pi#es A t$en t$e coumns are
recacuated as ;oo0! 6A coumn =
:44(ne0 0idt$)/944(sum o; a
0idt$)W54(coumn 0idt$) = 694 and
9 coumn = :44/944W694 = 654. '$e
grid 0idt$ is :44p#. *; t$e +aue is
;ase and t$e +aue in 0idt$ option is
set t$en! '$e 0idt$ o; t$e grid is t$e
0idt$ set in option. '$e coumn
0idt$ are not recacuated and $a+e
t$e +aues de;ined in co/ode.
true (o
sorta7e 7ooean J$en ena7ed t$is option ao0
coumn reordering 0it$ mouse.
;ase (o
?ince t$is option uses jQuery @*
sorta7e 0idget% 7e a sure t$at t$is
0idget and t$e reated to 0idget ;ies
are oaded in $ead tag. -so 7e a
sure too t$at you marG t$e
grid.jqueryui.js 0$en you do0noad
t$e jqGrid.
sortname string
'$e initia sorting name 0$en 0e
use datatypes #m or json (data
returned ;rom ser+er). '$is
parameter is added to t$e ur. *; set
and t$e inde# (name) matc$ t$e
name ;rom co/ode t$en to t$is
coumn 7y de;aut is added a image
sorting icon% according to t$e
parameter sortorder (7eo0). ?ee
prm(ames.
empty
string
>es
sortorder string
'$e initia sorting order 0$en 0e
use datatypes #m or json (data
returned ;rom ser+er).'$is parameter
is added to t$e ur A see prn(ames.
'0o possi7e +aues A asc or desc.
asc >es
su7Grid 7ooean
*; set to true t$is ena7es using a
su7grid. *; t$e su7Grid is ena7ed a
additiona coumn at e;t side is
added to t$e 7asic grid. '$is coumn
contains a "pus" image 0$ic$
indicate t$at t$e user can cicG on it
to e#pand t$e ro0. Dy de;aut a
ro0s are coapsed. ?ee ?u7grid
;ase (o
su7Grid/
ode
arrayA).
'$is property% 0$ic$ descri7es t$e
mode o; t$e su7grid% $as an e;;ect
ony i; t$e su7Grid property is set to
true. *t is an array in 0$ic$ 0e
descri7e t$e coumn mode ;or t$e
su7grid data. Kor more in;o
empty
array
(o
see ?u7grid.
su7Grid'
ype
mi#ed
'$is option ao0 oading su7grid as
a ser+ice. *; not set% t$e datatype
parameter o; t$e parent grid is used.
nu >es
su7Grid@
r
string
'$is option $as e;;ect ony i;
su7Grid option is set to true. '$is
option points to t$e ;ie ;rom 0$ic$
0e get t$e data ;or t$e su7grid.
jqGrid adds t$e id o; t$e ro0 to t$is
ur as parameter. *; t$ere is a need to
pass additiona parameters% use t$e
params option in su7Grid/ode.
?ee ?u7grid
empty
string
>es
su7Grid
Jidt$
integer
,etermines t$e 0idt$ o; t$e su7Grid
coumn i; su7grid is ena7ed.
94 (o
too7ar array
'$is option de;ines t$e too7ar o; t$e
grid. '$is is array 0it$ t0o +aues in
0$ic$ t$e ;irst +aue ena7es t$e
too7ar and t$e second de;ines t$e
position reati+e to 7ody 8ayer.
Uossi7e +aues HtopI%I7ottomI%
H7ot$I. J$en 0e set too7ar!
)true%I7ot$I. t0o too7ars are
created X one on t$e top o; ta7e data
and one o; t$e 7ottom o; t$e ta7e
data. J$en 0e $a+e t0o too7ars
t$en 0e create t0o eements (di+).
'$e id o; t$e top 7ar is constructed
iGe Ht_IYid o; t$e grid and t$e
7ottom too7ar t$e id is Ht7_IYid o;
t$e grid. *n case 0$en ony one
too7ar is created 0e $a+e t$e id as
Ht_I Y id o; t$e grid% independent o;
0$ere t$is too7ar is created (top or
7ottom)
);ase%
"".
(o
toppager 7ooean J$en ena7ed t$is option pace a ;ase (o
pager eement at top o; t$e grid
7eo0 t$e caption (i; a+aia7e). *;
anot$er pager is de;ined 7ot$ can
coe#ists and are re;res$ed in sync.
'$e id o; t$e ne0 created pager is a
com7ination o; t$e
grididYH_toppagerI.
totatime integer
Beadony parameter. /easure t$e
oading time o; t$e records A
currenty a+aia7e ony 0$en 0e
oad #m or json data. -so t$e c$ecG
7egin 0$en t$e request is compete
and 0e 7egin to insert data into t$e
grid and ends 0$en t$e ast ro0 is
added.
4 (o
treedataty
pe
mi#ed
,etermines t$e initia datatype (see
datatype option). @suay t$is s$oud
not 7e c$anged. ,uring t$e reading
process t$is option is equa to t$e
datatype option.
nu (o
treeGrid 7ooean
&na7es (disa7es) t$e tree grid
;ormat. Kor more detais see 'ree
Grid
;ase (o
treeGrid
/ode
string
,eteremines t$e met$od used ;or t$e
treeGrid. Man 7e nested or
adjacency. ?ee'ree Grid
nested (o
tree*cons array
'$is array set t$e icons used in t$e
tree. '$e icons s$oud 7e a +aid
names ;rom @* t$eme roer images.
'$e de;aut +aues are! {pus!"uiA
iconAtriangeA6Ae"%minus!"uiAiconA
triangeA6As"%ea;!"uiAiconAradioAo;;"2
(o
treeBeade
r
array
e#tends t$e co/ode de;ined in t$e
7asic grid. '$e ;ieds descri7ed $ere
are added to end o; t$e co/ode
(o
array and are $idden. '$is means
t$at t$e data returned ;rom t$e ser+er
s$oud $a+e +aues ;or t$ese ;ieds.
Kor a ;u description o; a +aid
+aues see 'ree Grid.
tree_root_
e+e
numeric
,etermines t$e e+e 0$ere t$e root
eement 7egins 0$en treeGrid is
ena7ed
4 (o
ur string
'$e ur o; t$e ;ie t$at $ods t$e
request
nu >es
user,ata array
'$is array contain custom
in;ormation ;rom t$e request. Man 7e
used at any time.
empty
array
(o
user,ata
=nKooter
7ooean
J$en set to true 0e directy pace
t$e user data array user,ata at
;ooter. '$e rues are as ;oo0! *; t$e
user,ata array contain name 0$ic$
is equa to t$ose o; co/ode t$en
t$e +aue is paced in t$at coumn.*;
t$ere are no suc$ +aues not$ing is
paced. (ote t$at i; t$is option is
used 0e use t$e current ;ormatter
options (i; a+aia7e) ;or t$at coumn
;ase >es
+ie0recor
ds
7ooean
*; true% jqGrid dispays t$e 7eginning
and ending record num7er in t$e
grid% out o; t$e tota num7er o;
records in t$e query. '$is
in;ormation is s$o0n in t$e pager
7ar (7ottom rig$t 7y de;aut)in t$is
;ormat! HNie0 P to > out o; ZI. *;
t$is +aue is true% t$ere are ot$er
parameters t$at can 7e adjusted%
incuding "emptyrecords" and
"recordte#t".
;ase (o
+ie0sortc array '$e purpose o; t$is parameter is to (o
os
de;ine di;;erent ooG and 7e$a+ior o;
sorting icons t$at appear near t$e
$eader. '$is parameter is array 0it$
t$e ;oo0ing de;aut options
+ie0sortcos ! );ase%"+ertica"%true..
'$e ;irst parameter determines i; a
icons s$oud 7e +ie0ed at t$e same
time 0$en a coumns $a+e sort
property set to true. '$e de;aut o;
;ase determines t$at ony t$e icons
o; t$e current sorting coumn s$oud
7e +ie0ed. ?etting t$is parameter to
true causes a icons in a sorta7e
coumns to 7e +ie0ed.
'$e second parameter determines
$o0 icons s$oud 7e paced A +ertica
means t$at t$e sorting icons are one
under anot$er. "$oriConta" means
t$at t$e icons s$oud 7e one near
ot$er.
'$e t$ird parameter determines t$e
cicG ;unctionaity. *; set to true t$e
coumns are sorted i; t$e $eader is
cicGed. *; set to ;ase t$e coumns
are sorted ony 0$en t$e icons are
cicGed.
*mportant note! J$en set a t$ird
parameter to ;ase 7e a sure t$at t$e
;irst parameter is set to true%
ot$er0ise you 0i oose t$e sorting.
0idt$ num7er
*; t$is option is not set% t$e 0idt$ o;
t$e grid is a sum o; t$e 0idt$s o; t$e
coumns de;ined in t$e co/ode (in
pi#es). *; t$is option is set% t$e
initia 0idt$ o; eac$ coumn is set
according to t$e +aue o; s$rinG'oKit
option.
none
(o.
/et$o
d
a+ai.
#mBeade
r
array
-rray 0$ic$ descri7es t$e structure
o; t$e e#pected #m data. Kor a ;u
description re;er to Betrie+ing ,ata
P/8 ,ata.
(o
Method
<script>
...
jQuery("#grid_id").jqGrid/et$od( parameter6%...parameter( )<
...
</script>
grid_id id u jqgrid
jqGridMethod met$od H jqgrid
parameter1,parameterN A ist parameters
n met$od n met$od n n .
<script>
...
jQuery("#grid_id").setGridUaram({...2).$ideMo("someco").trigger("r
eoadGrid")<
...
</script>
or using the new ()*
<script>
...
jQuery("#grid_id").jqGrid("met$od"% parameter6%...parameter( )<
...
</script>
grid_id id u grid
jqGrid j+rid instance,
method j+rid H method -ote method n ..
parameter1,parameterN / list parameters
n
<script>
...
jQuery("#grid_id").jqGrid("setGridUaram"%
{...2).jqGrid("$ideMo"%"someco").trigger("reoadGrid")<
...
</scrip
Method
Method
Paramete
rs
etur
ns
Description
addS?=(,at
a
data none Uopuates a grid 0it$ t$e passed data (an
array).'$is met$od s$oud 7e used t$is 0ay A
&#ampe! ?uppose 0e $a+e data ;rom a
particuar 0e7ser+ice (jsonresponse)% t$en
+ar mygrid = jQuery(I#IYgrid_id))4.<
+ar myjsongrid =
e+a(I(IYjsonresponse.response'e#tYI)I)<
mygrid.addS?=(,ata(myjsongrid)<
myjsongrid = nu<
jsonresponse =nu<
0i popuate t$e data to t$e grid. -nd% o;
course% t$e data in myjsongrid can 7e
manipuated 7e;ore 7eing passed to
addS?=(,ata.
addBo0,ata
ro0id%
data%
position%
srcro0id
true on
succes
s%
;ase
ot$er0
ise
*nserts a ne0 ro0 0it$ id = rowid containing
t$e data in data (an o7ject) at
t$e positionspeci;ied (;irst in t$e ta7e% ast in
t$e ta7e or 7e;ore or a;ter t$e ro0 speci;ied
in srcrowid). '$e synta# o; t$e data o7ject is!
{name6!+aue6%name9! +aue9T2 0$ere name
is t$e name o; t$e coumn as descri7ed in t$e
co/ode and t$e +aue is t$e +aue.
'$is met$od can insert mutipe ro0s at once.
*n t$is case t$e data parameter s$oud 7e array
de;ined as
){name6!+aue6%name9! +aue9T2%
{name6!+aue6%name9! +aue9T2 . and t$e
;irst option ro0id s$oud contain t$e name
;rom data o7ject 0$ic$ s$oud act as id o; t$e
ro0. *t is not necessary t$at t$e name o; t$e
ro0id in t$is case s$oud 7e a part ;rom
co/ode.
addP/8,ata data none
Uopuates a grid 0it$ t$e passed data. '$is
met$od s$oud 7e used t$is 0ay A &#ampe!
?uppose 0e $a+e data ;rom a particuar
0e7ser+ice (#mresponse)% t$en
+ar mygrid = jQuery(I#IYgrid_id))4.<
mygrid.addPm,ata(#mresponse.responseP/
8)<
0i popuate t$e data into t$e grid. -nd% o;
course% t$e data in #mresponse can 7e
manipuated 7e;ore 7eing passed to
addPm,ata.
cearGrid,at
a
cear;ooter
jqGrid
o7ject
Mears t$e currenty oaded data ;rom grid. *;
t$e cear;ooter parameter is set to true% t$e
met$od cears t$e data paced on t$e ;ooter
ro0.
deBo0,ata ro0id true on
succes
s%
;ase
ot$er0
,eetes t$e ro0 0it$ t$e id = rowid. '$is
operation does not deete data ;rom t$e ser+er.
ise
;ooter,ata
action%
data%
;ormat
jqGrid
o7ject
'$is met$od gets or sets data on ;ooter. ?ee
;ooterro0 in options array.
action A can 7e "get" or "set". '$e de;aut is get.
"get" returns an o7ject o; type name!+aue%
0$ere t$e name is a name ;rom co/ode. '$is
0i return data ;rom t$e ;ooter. '$e ot$er t0o
options $a+e no e;;ect in t$is case.
"set" taGes a data array (o7ject) and paces t$e
+aues in t$e ;ooter. '$e o7ject s$oud 7e in
name!+aue pair% 0$ere t$e name is t$e name
;rom co/ode
format A de;aut is true. '$is instruct t$e
met$od to use t$e ;ormatter (i; set in
co/ode) 0$en ne0 +aues are set. - +aue o;
;ase 0i disa7e t$e using o; ;ormatter
getMe
ro0id%
iMo
ce
conten
t
Beturns t$e content o; t$e ce speci;ied 7y id
= rowid and coumn = iCol. iMo can 7e eit$er
t$e coumn inde# or t$e name speci;ied in
co/ode.
,o not use t$is met$od 0$en you editing t$e
ro0 or ce. '$is 0i return t$e ce content
and not t$e actua +aue o; t$e input eement
getMo coname%
returntype%
mat$opera
tion
array).
or
+aue
'$is met$od returns an array 0it$ t$e +aues
;rom t$e coumn. colname can 7e eit$er a
num7er t$at represents t$e inde# o; t$e coumn
or a name ;rom co/ode. returntype
determines t$e type o; t$e returned array.
J$en set to ;ase (de;aut) t$e array contain
ony t$e +aues.
J$en set to true t$e array contain a set o;
o7jects. '$e o7ject is de;ined as {id!ro0id%
+aue!ce+aue2 0$ere t$e ro0id is t$e id o;
t$e ro0 and ce+aue is t$e +aue o; t$e ce.
Kor e#ampe% suc$ output can 7e
){id!6%+aue!62%{id!9%+aue!92T.
'$e +aid options ;or mat$operation are A "sum%
"a+g"% "count". *; t$is parameter is set and is
+aid% t$e returned +aue is a scaar
representing t$e operation appied to t$e a
+aues in t$e coumn. *; t$e parameter is not
+aid t$e returned +aue is empty array
get,ata*,s none array).
'$is met$od returns an array o; t$e id"s in t$e
current grid +ie0. *t returns an empty array i;
no data is a+aia7e.
getGridUaram name
mi#ed
+aue
Beturns t$e +aue o; t$e requested
parameter. name is t$e name ;rom t$e options
array. *; t$e name is not set% t$e entry options
are returned. Kor a+aia7e options% see options.
get*nd
ro0id%
ro0conten
t
mi#ed
'$is met$od returns t$e inde# o; t$e ro0 in t$e
grid ta7e speci;ied 7y
id= rowid 0$enrowcontent set to ;ase
(de;aut). *; ro0content is set to true% it returns
t$e entry ro0 o7ject. *; t$e ro0id can not 7e
;ound% t$e ;unction returns ;ase.
getBo0,ata
ro0id or
none
array{
2
Beturns an array 0it$ data o; t$e requested id
= rowid. '$e returned array is o; type
name!+aue% 0$ere t$e name is a name ;rom
co/ode and t$e +aue ;rom t$e associated
coumn in t$at ro0. *t returns an empty array i;
t$e ro0id can not 7e ;ound.
,o not use t$is met$od 0$en you editing t$e
ro0 or ce. '$is 0i return t$e ce content
and not t$e actua +aue o; t$e input eement
*; t$e ro0id is not set t$e met$od return a t$e
data ;rom t$e grid in array
$ideMo
coname
or
)conames
.
jqGrid
o7ject
Gi+en a singe coname% it $ides t$e coumn
0it$ t$at name. Gi+en an array o; conames
)Hname6I%Iname9I.% it $ides t$e coumns 0it$
t$ose names% "name6" and "name9"% in t$e
e#ampe. '$e names in coname or conames
must a 7e +aid names ;rom t$e co/ode.
(D! '$e 0idt$ o; t$e grid is not c$anged.
remapMoum
ns
permutatio
n%
updateMe
s%
GeepFead
er
none Beorder t$e grid coumns 7ased on t$e
permutation array. '$e inde#es o;
t$e permutationarray are t$e current order%
t$e +aues are t$e ne0 order. Dy e#ampe i; t$e
array $as +aues )6%4%9. a;ter caing t$is
met$od t$e ;irst coumn 0i 7e reordered as
second. updateCells i; set to true 0i reorder
t$e ce data. keepHeader i; set to true 0i
reorder t$e data a7o+e t$e $eader ces.
reset?eection none
jqGrid
o7ject
Besets (unseects) t$e seected ro0(s). -so
0orGs in mutiseect mode.
setMaption caption
jqGrid
o7ject
?ets a ne0 caption o; t$e grid. *; t$e Maption
ayer 0as $idden% it is s$o0n.
setMe
ro0id%
coname%
data%
cass%
properties%
;orceup
jqGrid
o7ject
'$is met$od can c$ange t$e content o;
particuar ce and can set cass or stye
properties. J$ere!
rowid t$e id o; t$e ro0%
colname t$e name o; t$e coumn (t$is
parameter can 7e a num7er (t$e inde# o; t$e
coumn) 7eginning ;rom 4
data t$e content t$at can 7e put into t$e ce. *;
empty string t$e content 0i not 7e c$anged
class i; cass is string t$en 0e add a cass to
t$e ce using addMass< i; cass is an array 0e
set t$e ne0 css properties +ia css
properties sets t$e attri7ute properies o; t$e
ce%
forceup *; t$e parameter is set to true 0e
per;orm update o; t$e ce instead t$at t$e
+aue is empty
setGridUaram o7ject
jqGrid
o7ject
?ets a particuar parameter. (ote A ;or some
parameters to taGe e;;ect a
trigger(HreoadGridI) s$oud 7e e#ecuted. (ote
t$at 0it$ t$is met$od 0e can o+erride e+ents.
'$e name (in t$e name!+aue pair) is t$e name
;rom options array. Kor a particuar options%
see options.
setGridFeig$
t
ne0_$eig$
t
jqGrid
o7ject
?ets t$e ne0 $eig$t o; t$e grid dynamicay.
(ote t$at t$e $eig$t is set ony to t$e grid ces
and not to t$e grid. new_height can 7e in
pi#es% percentage% or "auto".
setGridJidt$
ne0_0idt
$%
s$rinG
jqGrid
o7ject
?ets a ne0 0idt$ to t$e grid dynamicay. '$e
parameters are!
new_width is t$e ne0 0idt$ in pi#es.
shrink !true or false" $as t$e same
7e$a+ior as s$rinG'oKit A see options. *; t$is
parameter is not set 0e taGe t$e +aue o;
s$rinG'oKit.
set8a7e
coname%
data%
cass%
properties
jqGrid
o7ject
?ets a ne0 a7e in t$e $eader ;or t$e speci;ied
coumn< can aso set attri7utes and casses .
'$e parameters are!
colname t$e name o; t$e coumn (t$is
parameter can 7e a num7er (t$e inde# o; t$e
coumn) 7eginning ;rom 4
data t$e content t$at can 7e put into t$e a7e.
*; empty string t$e content 0i not 7e c$anged
class i; cass is string t$en 0e add a cass to
t$e a7e using addMass< i; cass is an array 0e
set t$e ne0 css properties +ia css
properties sets t$e attri7ute properies o; t$e
a7e
setBo0,ata
ro0id%
data%
cssprop
true on
succes
s%
;ase
ot$er0
ise
@pdates t$e +aues (using t$e data array) in
t$e ro0 0it$ rowid. '$e synta# o; data array
is! {name6!+aue6%name9! +aue9T2 0$ere t$e
name is t$e name o; t$e coumn as descri7ed in
t$e co/ode and t$e +aue is t$e ne0 +aue.
*; t$e cssprop parameter is string 0e use
addMass to add casses to t$e ro0. *; t$e
parameter is o7ject 0e use css to add css
properties. (ote t$at 0e can set properties and
casses 0it$out data% in t$is case 0e s$oud set
data to ;ase
set?eection
ro0id%
onseectro
0
jqGrid
o7ject
'ogges a seection o; t$e ro0 0it$ id
= rowid< i; onselectrow is true (t$e de;aut)
t$en t$e e+ent on?eectBo0 is aunc$ed%
ot$er0ise it is not.
s$o0Mo coname jqGrid
o7ject
?$o0s a coumn 0it$ a gi+en colname. *; t$e
coname is a string 0e s$o0 ony t$e speci;ied
coumn. *; coname is array o; type
)Hname6I%Iname9I. t$en t$e coumns 0it$
names "name6" and "name9" 0i 7e s$o0n at
t$e same time '$e names in coname must 7e
+aid names ;rom co/ode. '$e 0idt$ does
not c$ange.
trigger(Hreoa
dGridI)
none none
Beoads t$e grid 0it$ t$e current settings. '$is
means t$at a ne0 request is send to t$e ser+er
i; datatype is #m or json. '$is met$od s$oud
7e appied to an areadyAconstructed grid. Uay
attention t$at t$is met$od does not c$ange
F&-,&B in;ormation% t$at means t$at any
c$anges to co/ode 0oud not 7e a;;ected.
>ou s$oud use grid@noad to reoad ne0
con;iguration 0it$ di;;erent co/ode
updateMoum
ns
none none
t$is sync$roniCes t$e 0idt$ o; t$e $eaders 0it$
t$e data. @se;u 0$en used 0it$ ta7e drag and
drop. '$is met$od s$oud 7e used t$is 0ay A
&#ampe!
+ar mygrid=jQuery(I#grid_idI))4.<
mygrid.updateMoumns()<
0ommon #unctions and settings
These #unctions can be used anywhere in the project and are not related
to the j+rid object, This mean the the synta1 is2
<script>
...
jQuery.jgrid.jqGridKunction( parameter6%...parameter( )<
...
</script>
jgrid.jqGridFunction #unction,
parameter1,parameterN 3 list parameters
-ote the namespace jgrid
!unction" Parame eturns Description
#ption ters
aja#=ption
s
empty
o7ject
none
'$is option ao0 to set go7a aja# settings ;or
a aja# requests used in t$e grid. (ote t$at 0it$
t$is option is possi7e to o+er0rite a current
aja# setting ;or t$e particuar modue. ?tarting
;rom +ersion :.L 0e $a+e a : e+e aja#
settings.
'$e ;irst e+e is speci;ic ;or t$e modue 0$en
0e use aja#.
'$e second e+e is determined ;rom t$is
option% and t$e
t$ird e+e can 7e passed as additiona
parameter ;or t$e particuar met$od. '$e t$ird
e+e aja# setting $as a $ig$er priority. '$is
means t$at 0e use t$is go7a rue ;or a aja#
settings!
jQuery.e#tend(jQuery.aja#({met$od speci;ic
options2% aja#=ptions%
'$ird8e+eaja#?ettinds))<
-dditiona to t$is 0e $a+e a possi7iity to
de;ine on e+ery aja# request seriaiCe ;unction
0$ic$ ao0 to con+ert t$e parameters passed
to t$e ser+er.
jq*, string
parsed
string
&scapes t$e specia string c$aracters 0it$ t0o
7acGsas$es ([[) so t$at a singe 7acGsas$ 0i
7e put into t$e string and can 7e interpreted
correct 0$en used in jQuery seector.
jgrid.$tm,
ecode
string
decoded_s
tring
'$e $tm,ecode ;unction decodes
an F'/8 encoded string 7acG into t$e origina
$tm code.
jgrid.$tm&
ncode
string
encoded_s
tring
'$e $tm&ncode ;unction encodes
an F'/8 string A opposite to $tm,ecode
jgrid.;ormat string
;ormated_
string
?impe stringAtempating. -ccepts a string
tempate as t$e ;irst argument. '$e second is
optiona! *; speci;ied% it is used to repace
pace$oders in t$e ;irst argument.
&#ampe jQuery.jqg;ormat(HUease enter a
+aue 7et0een {42 and {62.I% O% 5)
resut ! HUease enter a +aue 7et0een O and 5.I
jgrid.getMe
*nde#
ce inde# '$is met$od is used to correct t$e 7ug in
*nternet &#porer +ersions \ 0$ere Me*nde#
is cacuated in ,ispay =rder and not in rea
one. cell is t$e ce content (i.e.) td eement
jgrid.string
'o,oc
#mstrin
g
#m,oc
Mon+ert #mlstring to dom document.
Beturn #ml$oc A dom document.
jgrid.stripF
tm
content
ne0_conte
nt
Kunction ;or stripping out F'/8 tags ;rom a
gi+en content.
jgrid.parse
json?tri
ng
o7ject
'$is ;unction parses a json?tring (S?=( te#t)
to produce an o7ject or array.
'o pre+ent Sa+a?cript $ijacGing attacGs% 0e7
appication aut$ors are encouraged to use t$is
;unction. '$is returns a S?=( representation o;
t$e +aria7e.
Mycic structures are detected and sa;ey
interrupted% 7ut coud not 7e ;urt$er restored.
6. '$e 0$ie(6)< construct% ocated at t$e
7eginning o; S?=( te#t%
9. Momments at t$e 7eginning and end o; t$e
te#t.
S?=( data pro+iders are encouraged to use one
or 7ot$ o; t$ese met$ods to pre+ent data
e#ecution. ?uc$ S?=( response may t$en ooG
iGe t$is
0$ie(6)</W{)
{HnameI!Hsa;e +aue 6I2%
{HnameI!Hsa;e +aue 9I2% T
.2W/
jqGrid uses t$is ;unction 0$en o7taining a data
0it$ datatype!"json"
(dd on rid Methods
grid,custom,js,
Method
Parame
ters
eturns Description
;iterGrid
grid_id%
params
F'/8o
7ject
'$is met$od can 7e caed to construct an custom
searc$ ;orm ;or t$e grid and s$oud 7e not appied
to t$e grid 7ut to a +aid F'/8 eement.
grid_id is t$e id o; t$e grid to 0$ic$ t$e searc$
0i 7e appied.
parms is an array o; parameters (see 7eo0). Kor
more detais re;er to custom searc$ing
;iter'oo7
ar
params
jqGrid
o7ject
'$is met$od is t$e same as ;iterGrid% e#cept t$at
t$e searc$ input eements are paced in t$e grid just
7eo0 t$e $eader eements. J$en t$e $eader
eements are resiCed t$e input searc$ eements are
aso resiCed according to t$e ne0 0idt$. -not$er
di;;erence to t$e ;iterGrid is t$at t$e ;iter too7ar
uses de;initions ;rom co/ode. Kor more
in;ormation re;er to 'oo7ar searc$ing
getMoUro
p
conam
e
array{2
Beturn an array o; t$e properties o; t$e gi+en
coumn name ;rom co/ode
Grid,estr
oy
grid_id
true on
success%
;ase
ot$er0is
e
,estroys t$e entry grid 0it$ id= grid_id ;rom
t$e ,=/ (cears a t$e $tm associated 0it$ t$e
grid and un7inds a e+ents)
Grid@noa
d
grid_id
true on
success%
;ase
ot$er0is
e
'$e ony di;;erence to pre+ious met$od is t$at t$e
grid is destroyed% 7ut t$e ta7e eement and pager
(i; any) are e;t ready to 7e used again.
setGrid?ta
te
state
jGrid
o7ject
?$o0 or $ide t$e grid depending and state
parameter. J$en t$e state is set to "+isi7e" t$e grid
0i 7e s$o0n. J$en t$e parameter is set to
"$idden" t$e grid 0i 7e $idden. (ote t$at t$e
met$od does not ca onFeaderMicG e+ent and t$e
caption o; t$e grid is a0ay +isi7e
setMoUro
p
conam
e%
properti
es
jGrid
o7ject
?ets ne0 properties in co/ode. '$is met$od is
idea ;or dynamicay c$anging properties o; t$e
coumn. (ote t$at some properties A $a+e no e;;ect
see co/ode options. Kor e#ampe!
jQuery(I#grid_idI).setMoUrop("coname"%
{editoptions!{+aue!H'rue!KaseI22)<
0i c$ange t$e editoptions +aues.
sortGrid conam
e%
reoad
jqGrid
o7ject
?orts t$e gi+en coname and s$o0s t$e appropriate
sort icon. '$e same (0it$out sorting icon) can 7e
done using
setGridUaram({sortname!"myname"2).trigger("reoa
dGrid"). *; t$e reoad is set to true% t$e grid reoads
0it$ t$e current page and sortorder settings.
updateGri
dBo0s
data%
ro0idna
me%
jsonrea
der
true on
success%
;ase
ot$er0is
e
'$is met$od update t$e e#isting data in t$e grid 7y
gi+en rowidname.
data is a array o; data in ;ormat
){name!+aue%name6!+aue6T2%
{name!+aue%name9!+aue9T2.
0$ere t$e name is t$e name ;rom co/ode and
+aue is t$e actua +aue. *t is not neccessary t$at
a coumns are present in t$e data item o7ject (t$e
same as setBo0,ata met$od)
rowidname (string) A is t$e name o; t$e ro0
0$ic$ s$oud acts as id *; not set t$e name HidI is
used.
jsonreader (7ooean) de;aut ;ase. *; set to true a
jsonBeader de;inition is used to set t$e data. (ote
t$at t$is 0orG ony i; t$e item in jsonBeader o7ject
"repeatitems" is set to true.*n t$is case t$e data
s$oud 7e not in pair name!+aue% 7ut ony +aues
0$ere t$e num7er o; coumns s$oud 7e equa o;
t$ose in co/ode.
Event
$ar ast?e<
jQuery("#gridid").jqGrid({
...
on?eectBo0! function(id){ // action nn cicG
i;(id EE id]==ast?e){ // id id n
jQuery("#gridid").restoreBo0(ast?e)<
ast?e=id<
2
jQuery("#gridid").editBo0(id% true)<
2%
...
2)<
n Event row n
Event
%$ent
Paramet
ers
Description
a;ter*nsertB
o0
ro0id
ro0data
ro0eem
'$is e+ent ;ires a;ter e+ery inserted ro0.
rowid is t$e id o; t$e inserted ro0
rowdata is an array o; t$e data to 7e inserted into t$e
ro0. '$is is array o; type name! +aue% 0$ere t$e name is
a name ;rom co/ode
rowelem is t$e eement ;rom t$e response. *; t$e data is
#m t$is is t$e #m eement o; t$e ro0< i; t$e data is json
t$is is array containing a t$e data ;or t$e ro0
(ote! t$is e+ent does not ;ire i; grid+ie0 option is set to
true
7e;oreBequ
est
none
'$is e+ent ;ire 7e;ore requesting any data. -so does not
;ire i; datatype is ;unction
7e;ore?eec
tBo0
ro0id% e '$is e+ent ;ire 0$en t$e user cicG on t$e ro0% 7ut 7e;ore
seect t$em.
rowid is t$e id o; t$e ro0.
e is t$e e+ent o7ject
'$is e+ent s$oud return 7ooean true or ;ase. *; t$e e+ent
return true t$e seection is done. *; t$e e+ent return ;ase
t$e ro0 is not seected and any ot$er action i; de;ined does
not occur.
gridMompe
te
none
'$is ;ires a;ter a t$e data is oaded into t$e grid and a
ot$er processes are compete. -so t$e e+ent ;ires
independent ;rom t$e datatype parameter and a;ter sorting
paging and etc.
oadDe;ore
?end
#$r
- preAca7acG to modi;y t$e P/8FttpBequest o7ject
(#hr) 7e;ore it is sent. @se t$is to set custom $eaders etc.
'$e P/8FttpBequest is passed as t$e ony argument.
oadMomp
ete
#$r
'$is e+ent is e#ecuted immediatey a;ter e+ery ser+er
request.
#hr P/8FttpBequest o7ject
oad&rror
#$r%
status%
error
- ;unction to 7e caed i; t$e request ;ais. '$e ;unction
gets passed t$ree arguments! '$e P/8FttpBequest o7ject
(#hr)% a string descri7ing t$e type o; error (satus) t$at
occurred and an optiona e#ception o7ject (error)% i; one
occurred.
onMe?ee
ct
ro0id%
iMo%
ceconte
nt%
e
Kires 0$en 0e cicG on particuar ce in t$e grid.
rowid is t$e id o; t$e ro0
iCol is t$e inde# o; t$e ce%
cellcontent is t$e content o; t$e ce%
e is t$e e+ent o7ject eement 0$ere 0e cicG.
((ote t$at t$is a+aia7e 0$en 0e not use ce editing
modue and is disa7ed 0$en using ce editing).
ond7MicG
Bo0
ro0id%
iBo0%
iMo%
e
Baised immediatey a;ter ro0 0as dou7e cicGed.
rowid is t$e id o; t$e ro0%
i%ow is t$e inde# o; t$e ro0 (do not mi# t$is 0it$ t$e
ro0id)%
iCol is t$e inde# o; t$e ce.
e is t$e e+ent o7ject
onFeaderM
icG
gridstate
Kire a;ter cicGing to $ide or s$o0 grid ($idegrid!true)<
gridstate is t$e state o; t$e grid A can $a+e t0o +aues A
+isi7e or $idden
onUaging
pgDutto
n
'$is e+ent ;ires a;ter cicG on )page 7utton. and 7e;ore
popuating t$e data. -so 0orGs 0$en t$e user enters a
ne0 page num7er in t$e page input 7o# (and presses
)&nter.) and 0$en t$e num7er o; requested records is
c$anged +ia t$e seect 7o#. 'o t$is e+ent 0e pass ony one
parameter pg&utton ?ee pager.
*; t$is e+ent return "stop" t$e processing is stopped and you
can de;ine your o0n custom paging
onBig$tMi
cGBo0
ro0id%
iBo0%
iMo%
e
Baised immediatey a;ter ro0 0as rig$t cicGed.
i%ow is t$e inde# o; t$e ro0 (do not mi# t$is 0it$ t$e
ro0id)%
iCol is t$e inde# o; t$e ce.
e is t$e e+ent o7ject.
(ote A t$is e+ent does not 0orG in =pera 7ro0sers% since
=pera does not support onconte#tmenu e+ent
on?eect-
aBo0ids
%
status
'$is e+ent ;ires 0$en mutiseect option is true and you
cicG on t$e $eader c$ecG7o#.
a%owids array o; t$e seected ro0s (ro0id"s).
status A 7ooean +aria7e determining t$e status o; t$e
$eader c$ecG 7o# A true i; c$ecGed% ;ase i; not c$ecGed.
(ote t$at t$e aBo0ids a0ay contain t$e ids 0$en $eader
c$ecG7o# is c$ecGed or unc$ecGed.
on?eectBo
0
ro0id%
status
Baised immediatey a;ter ro0 0as cicGed.
status is t$e status o; t$e seection. Man 7e used 0$en
mutiseect is set to true. true i; t$e ro0 is seected% ;ase i;
t$e ro0 is deseected.
on?ortMo
inde#%
iMo%
sortorder
Baised immediatey a;ter sorta7e coumn 0as cicGed and
7e;ore sorting t$e data.
inde# is t$e inde# name ;rom co/ode%
iCol is t$e inde# o; coumn%
sortorder is t$e ne0 sorting order A can 7e "asc" or "desc".
*; t$is e+ent return "stop" t$e sort processing is stopped and
you can de;ine your o0n custom sorting
resiCe?tart
e+ent%
inde#
&+ent 0$ic$ is caed 0$en 0e start resiCe a
coumn. e'ent is t$e e+ent o7ject% inde# is t$e inde# o;
t$e coumn in co/ode.
resiCe?top
ne00idt
$% inde#
&+ent 0$ic$ is caed a;ter t$e coumn is
resiCed. newwidth is t$e is t$e ne0 0idt$ o; t$e
coumn % inde# is t$e inde# o; t$e coumn in co/ode.
seriaiCeGri
d,ata
post,ata
*; set t$is e+ent can seriaiCe t$e data passed to t$e aja#
request. '$e ;unction s$oud return t$e seriaiCed data.
'$is e+ent can 7e used 0$en a custom data s$oud 7e
passed to t$e ser+er A e.g A S?=( string% P/8string and
etc.
'o t$is e+ent 0e pass t$e post,ata array.
n import jquery set
<],=M'>U& $tm U@D8*M "A//J:M//,', PF'/8 6.4 ?trict//&("
"$ttp!//000.0:.org/'B/#$tm6/,',/#$tm6Astrict.dtd">
<html #mns="$ttp!//000.0:.org/6333/#$tm" #m!ang="en" ang="en">
<head>
<meta $ttpAequi+="MontentA'ype" content="te#t/$tm< c$arset=ut;A5" />
<title>/y Kirst Grid</title>

<link re="styes$eet" type="te#t/css" media="screen" $re;="css/uiA
ig$tness/jqueryAuiA6.\.6.custom.css" />
<link re="styes$eet" type="te#t/css" media="screen" $re;="css/ui.jqgrid.css"
/>

<script src="js/jqueryA6.:.9.min.js" type="te#t/ja+ascript"></script>
<script src="js/i65n/grid.ocaeAen.js" type="te#t/ja+ascript"></script>
<script type="te#t/ja+ascript">
jQuery.jgrid.no_egacy_api = true<
</script>
<script src="js/jquery.jqGrid.min.js" type="te#t/ja+ascript"></script>

</head>
<body>
...
</body>
</html>
jQuery.jgrid.no_egacy_api = true<
</script>
-avigation
Pager
The -avigation 4ar pager
HTML n Pager n div
..
<body>
...
<table id="ist"></table>
<di$ id="gridpager"></di$> // pager gridpager
...
</body>
java 5cript code
jQuery("#grid_id").jqGrid({
...
pager ! "#gridpager"%
...
2)<
n ! HH
pager : '#gridpager'
pager : 'gridpager'
pager : jQuery('#gridpager')
n #ile grid,locale/en,js
pager grid pager H
grid pager nnn body grid
body grid
n pager n n set pager
grid
^.jgrid = {
de;auts ! {
recordte#t! "Nie0 {42 A {62 o; {92"%
emptyrecords! "(o records to +ie0"%
oadte#t! "8oading..."%
pgte#t ! "Uage {42 o; {62"
2%
...
2
n n n grid
jQuery.e#tend(jQuery.jgrid.de;auts%{emptyrecords! "(ot$ing to dispay"%...2)<
n n nu grid "u pager#
...
emptyrecords! "(ot$ing to dispay"%
...
2)<
pager _ n grid duplicate pager n_ grid
)roperties
Proper
ty
Type Description Default
Can be
change
d?
astpag
e
integ
er
Beadony property. ,etermines t$e tota
num7er o; pages returned ;rom t$e request.
4 (o
pager
mi#e
d
,e;ines t$at 0e 0ant to use a pager 7ar to
na+igate t$roug$ t$e records. '$is must 7e a
+aid $tm eement< in our e#ampe 0e ga+e
t$e di+ t$e id o; HpagerI% 7ut any name is
accepta7e. (ote t$at t$e (a+igation ayer (t$e
HpagerI di+) can 7e positioned any0$ere you
0ant% determined 7y your $tm< in our
e#ampe 0e speci;ied t$at t$e pager 0i
appear a;ter t$e 'a7e Dody ayer. '$e +aid
cas can 7e (using our e#ampe) "pager"%
"#pager"% jQuery("#pager"). * recommend to use
t$e second one.
empty
string.
Murrenty
ony one
page7ar is
possi7e.
(o
pagerpo
s
string
,etermines t$e position o; t$e pager in t$e
grid. Dy de;aut t$e pager eement 0$en
created is di+ided in : parts (one part ;or
pager% one part ;or na+igator 7uttons and one
part ;or record in;ormation)
center (o
pg7utto
ns
7ooe
an
,etermines i; t$e Uager 7uttons s$oud 7e
s$o0n i; pager is a+aia7e. -so +aid ony i;
pager is set correcty. '$e 7uttons are paced
in t$e pager 7ar.
true (o
pginput 7ooe ,etermines i; t$e input 7o#% 0$ere t$e user true (o
an
can c$ange t$e num7er o; requested page%
s$oud 7e a+aia7e. '$e input 7o# appear in
t$e pager 7ar.
pgte#t string
?$o0 in;ormation a7out current page status.
'$e ;irst +aue is t$e current oaded page. '$e
second +aue is t$e tota num7er o; pages
?ee ang
;ie
>es
reccoun
t
integ
er
Beadony property. ,etermines t$e e#act
num7er o; ro0s in t$e grid. ,o not con;use
t$is 0it$ records parameter. -t$oug$ in most
cases t$ey are equa t$ere is a case 0$ere t$is
is not true. Kor e#ampe you de;ine ro0(um
parameter 61% 7ut you return ;rom ser+er
records parameter = 94% t$en t$e records
parameter 0i 7e 94% t$e reccount parameter
0i 7e 61% and in t$e grid you 0i $a+e 61
records.
4 (o
recordp
os
string
,etermines t$e position o; t$e record
in;ormation in t$e pager. Man 7e e;t% center%
rig$t
rig$t (o
records
integ
er
Beadony property. ,etermines t$e num7er o;
returned records in grid ;rom t$e request
none (o
recordt
e#t
string
Bepresent in;ormation t$at can 7e s$o0n in
t$e pager. '$is option is +aid ony i;
+ie0records option is set to true. '$is te#t
appear ony i; t$e tota num7er o; records is
greater t$an Cero. *n order to s$o0 or $ide
some in;ormation t$e items in {2 mean t$e
;oo0ing! {42 A t$e start position o; t$e
records depending on page num7er and
num7er o; requested records< {62 A t$e end
position< {92 A tota records returned ;rom t$e
data
see ang
;ie
>es
ro08ist array
).
-n array to construct a seect 7o# eement in
t$e pager in 0$ic$ 0e can c$ange t$e num7er
o; t$e +isi7e ro0s. J$en c$anged during t$e
e#ecution% t$is parameter repaces t$e
ro0(um parameter t$at is passed to t$e ur. *;
t$e array is empty t$e eement does not appear
in t$e pager. 'ypica you can set t$is iGe
)64%94%:4.. *; t$e ro0(um parameter is set to
:4 t$en t$e seected +aue in t$e seect 7o# is
empty
array A ).
(o
:4.
ro0(u
m
integ
er
?ets $o0 many records 0e 0ant to +ie0 in t$e
grid. '$is parameter is passed to t$e ur ;or use
7y t$e ser+er routine retrie+ing t$e data
94 >es
+ie0rec
ords
7ooe
an
,e;ines 0$et$er 0e 0ant to dispay t$e
num7er o; tota records ;rom t$e query in t$e
pager 7ar.
;ase (o

properties n n pager gqgrid object
u trigger(reloadrid)
n $% n
<script>
...
jQuery("#grid_id").setGridUaram({ro0(um!642).trigger("reoadGrid")<
...
</script>
Event
%$en
t
Parame
ters
Description
onUa
ging
pgDutto
n
'$is e+ent ;ires a;ter cicG on )page 7utton. and 7e;ore
popuating t$e data. -so 0orGs 0$en t$e user enters a ne0 page
num7er in t$e page input 7o# (and presses )&nter.) and 0$en t$e
num7er o; requested records is c$anged +ia t$e seect 7o#. 'o
t$is e+ent 0e pass ony one parameter pg&utton (string) 0$ic$
can 7e A first,last,pre',ne#t in case o; 7utton cicG% records in
case 0$en a num7er o; requested ro0s is c$anged
and user 0$en t$e user c$ange t$e num7er o; t$e requested
page.
&avigator
&) (dd -ew Row
%) 6dit 5elected Row
7) 8iew 5elected Row
9) :elete 5elected Row
$) ;ind Records
<) Reload rid
'
HTML de#inition
...
<body>
...
<table id="ist"></table>
<di$ id="gridpager"></di$>
...
</body>
=ava 5cript code
<script>
...
...
...
2)<
jQuery("#grid_id").na+Grid("#gridpager"%{parameters2%prm&dit% prm-dd%
prm,e% prm?earc$% prmNie0)<
...
</script>
>sing the new ()*
<script>
...
...
...
2)<
jQuery("#grid_id").jqGrid("na+Grid"%"#gridpager"%{parameters2%prm&dit%
prm-dd% prm,e% prm?earc$% prmNie0)<
...
</script>
or in chained mode
<script>
...
...
...
2).na+Grid("#gridpager"%{parameters2% prm&dit% prm-dd% prm,e% prm?earc$%
prmNie0)<
...
</script>
grid_id / id u j+rid,
gridpager /id the navigation bar (pager)
parameters / an array o# settings? de#ined below
prm6dit? prm(dd? prm:el? prm5earch? prm8iew are objects which holds the parameters and
events #or a particular action
n id 7utton set use t$e ;oo0ing rue!
;or the add button we use add@ " the id o# the grid
;or the edit button we use edit@ " the id o# the grid
;or the delete button we use del@ " the id o# the grid
;or the view button we use view@ " the id o# the grid
;or the search button we use search@ " the id o# the grid
;or the re#resh button we use re#resh@ " the id o# the grid
The code below de#ines a edit button with id myedit,
<script>
...
...
...
2).na+Grid("#gridpager"%{2% {id!"myedit"2)<
...
</script>
n
^.jgrid = {
...
searc$ ! {
caption! "?earc$..."%
Kind! "Kind"%
Beset! "Beset"%
odata ! )"equa"% "not equa"% "ess"% "ess or equa"%"greater"%"greater or
equa"% "7egins 0it$"%"does not 7egin 0it$"%"is in"%"is not in"%"ends
0it$"%"does not end 0it$"%"contains"%"does not contain".%
group=ps! ) { op! "-(,"% te#t! "a" 2% { op! "=B"% te#t! "any" 2 .%
matc$'e#t! " matc$"%
rues'e#t! " rues"
2%
edit ! {
addMaption! "-dd Becord"%
editMaption! "&dit Becord"%
7?u7mit! "?u7mit"%
7Mance! "Mance"%
7Mose! "Mose"%
sa+e,ata! ",ata $as 7een c$anged] ?a+e c$angesQ"%
7>es ! ">es"%
7(o ! "(o"%
7&#it ! "Mance"%
2%
+ie0 ! {
caption! "Nie0 Becord"%
7Mose! "Mose"
2%
de ! {
caption! ",eete"%
msg! ",eete seected record(s)Q"%
7?u7mit! ",eete"%
7Mance! "Mance"
2%
na+ ! {
editte#t! ""%
edittite! "&dit seected ro0"%
addte#t!""%
addtite! "-dd ne0 ro0"%
dete#t! ""%
detite! ",eete seected ro0"%
searc$te#t! ""%
searc$tite! "Kind records"%
re;res$te#t! ""%
re;res$tite! "Beoad Grid"%
aertcap! "Jarning"%
aertte#t! "Uease% seect ro0"%
+ie0te#t! ""%
+ie0tite! "Nie0 seected ro0"
2%
...
Propoties
Property Type Description Default
1)
add
7ooe
an
&na7es or disa7es t$e add action in t$e na+igator.
J$en t$e 7utton is cicGed a editGridBo0 0it$
parameter ne0 met$od is e#ecuted
true
addicon string
?et a icon to 7e dispayed i; t$e add action is ena7ed.
(ote t$at currenty ony icons ;rom @* t$eme images
can 7e added
uiAiconA
pus
addte#t string '$e te#t t$an can 7e set in t$e add 7utton empty
addtite string
'$e tite t$at appear 0$en 0e mouse o+er to t$e add
7utton (i; ena7ed)
-dd ne0
ro0
aertcap string
'$e $eader o; t$e message t$at appear 0$en 0e try to
edit%deete or +ie0 a ro0 0it$out to seect it
Jarning
aertte#t string
'$e message te#t t$at appear 0$en 0e try to
edit%deete or +ie0 a ro0 0it$out to seect it
Uease%
seect
ro0
cone'o'
op
7ooe
an
Mones a t$e actions ;rom t$e 7ottom pager to t$e
top pager i; de;ined. (ote t$at t$e na+Grid can 7e
appied to t$e top pager ony. '$e id o; t$e top pager
is a com7ination o; grid id and H_toppagerI
;ase
cose=n&
scape
7ooe
an
,etermine i; t$e aert diaog can 7e cosed i; t$e user
pres &?M Gey
true
de
7ooe
an
&na7es or disa7es t$e deete action in t$e na+igator.
J$en t$e 7utton is cicGed a deGridBo0 met$od is
e#ecuted.
true
deicon string
?et a icon to 7e dispayed i; t$e deete action is
ena7ed. (ote t$at currenty ony icons ;rom @* t$eme
images can 7e used
uiAiconA
tras$
dete#t string '$e te#t t$an can 7e set in t$e deete 7utton empty
detite string
'$e tite t$at appear 0$en 0e mouse o+er to t$e
deete 7utton (i; ena7ed)
,eete
seected
ro0
edit
7ooe
an
&na7es or disa7es t$e edit action in t$e na+igator.
J$en t$e 7utton is cicGed a editGridBo0 met$od is
e#ecuted 0it$ parameter t$e A current seected ro0
true
editicon string
?et a icon to 7e dispayed i; t$e edit action is ena7ed.
(ote t$at currenty ony icons ;rom @* t$eme images
can 7e used
uiAiconA
penci
editte#t string '$e te#t t$an can 7e set in t$e edit 7utton empty
edittite string
'$e tite t$at appear 0$en 0e mouse o+er to t$e edit
7utton (i; ena7ed)
&dit
seected
ro0
position string
,etermines t$e position o; t$e na+igator 7uttons in
t$e pager. Man 7e e;t% center and rig$t.
e;t
re;res$
7ooe
an
&na7es or disa7es t$e re;res$ 7utton in t$e pager.
J$en t$e 7utton is cicGed a trigger(HreoadGridI) is
e#ecuted and t$e searc$ parameters are ceared
true
re;res$ico
n
string
?et a icon to 7e dispayed i; t$e re;res$ action is
images can 7e used
uiAiconA
re;res$
re;res$te#
t
string '$e te#t t$an can 7e set in t$e re;res$ 7utton empty
re;res$tit
e
string
re;res$ 7utton (i; ena7ed)
Beoad
Grid
re;res$sta
te
string
,etermines $o0 t$e grid s$oud 7e reoaded
A firstpage A t$e grid reoad t$e data ;rom t$e ;irst
page.
A current A t$e reoading s$oud sa+e t$e current
page and current seection
;irstpage
a;terBe;r
es$
;uncti
on
*; de;ined t$is e+ent ;ire a;ter t$e re;res$ 7utton is
cicGed
nu
7e;oreBe;
res$
;uncti
on
*; de;ined t$is e+ent ;ire 7e;ore t$e re;res$ 7utton is
cicGed
nu
searc$
7ooe
an
&na7es or disa7es t$e searc$ 7utton in t$e
pager.J$en t$e 7utton is cicGed a searc$Grid
met$od is e#ecuted
true
searc$ico
n
string
?et a icon to 7e dispayed i; t$e searc$ action is
images can 7e used
uiAiconA
searc$
searc$te# string '$e te#t t$an can 7e set in t$e searc$ 7utton empty
t
searc$tit
e
string
searc$ 7utton (i; ena7ed)
Kind
records
+ie0
7ooe
an
&na7es or disa7es t$e +ie0 7utton in t$e pager.
J$en t$e 7utton is cicGed a +ie0GridBo0 met$od is
e#ecuted
;ase
+ie0icon string
?et a icon to 7e dispayed i; t$e searc$ action is
images can 7e used
uiAiconA
documen
t
+ie0te#t string '$e te#t t$at can 7e set in t$e +ie0 7utton empty
+ie0tite string
'$e tite t$at appear 0$en 0e mouse o+er to t$e +ie0
7utton (i; ena7ed)
Nie0
seected
ro0
add;unc
;uncti
on
*; de;ined repaces t$e 7uid in add ;unction. (o
parameters are passed to t$is ;unction
nu
edit;unc
;uncti
on
*; de;ined repaces t$e 7uid in edit ;unction.
Uarameter passed to t$is ;unction is t$e id o; t$e
edited ro0
nu
de;unc
;uncti
on
*; de;ined repaces t$e 7uid in de ;unction.
Uarameter passed to t$is ;unction is t$e id o; t$e
edited ro0
nu
e1ample the grid view mode #orm modal dialog n 650 Aey sets advanced
searching delete
...
...
...
2).na+Grid("#gridpager"%{+ie0!true% de!false2% // deete
{2% (( use default settings for edit
{2% (( use default settings for add
{2% (( delete instead that del)false we need this
{mutipe?earc$ ! true2% (( ena*le the ad'anced searching
{cose=n&scape!true2 (+ allow the 'iew dialog to *e closed when user
press ,-C ke.+(
)<
...
</script>
0ustom 4uttons
action pager
:e#inition
0alling 0onvention2
<script>
...
jQuery("#grid_id").na+Grid("#pager"%...).na+Dutton-dd("#pager"%
{parameters2)<
...
</script>
<script>
...
jQuery("#grid_id").jqGrid("na+Grid"%"#pager"%...).jqGrid("na+Dutton-dd"%"#page
r"%{parameters2)<
...
</script>
The de#ault parameters are
{ caption!"(e0Dutton"% 7uttonicon!"uiAiconAne00in"% onMicGDutton!nu%
position! "ast"% tite!""% cursor! "pointer"2
caption2 (string) the caption button? n empty string
buttonicon2 (string) is the ui icon name #rom >* theme icon set, *# this option is set to none
only the te1t appear,
on0licA4utton2 (#unction) action button is clicAed, :e#ault null,
position2 (#irst or last) button n added (i,e,? be#ore or a#ter the
standard buttons),
title2 (string) a tooltip #or the button,
cursor 2 string (de#ault pointer) cursor mouse H element
id 2 string (optional) / i# set de#ines the id o# the button (actually the id o# T: element) #or #uture
manipulation
n add Multiple buttons can be added by continuing the chain,
...
jQuery("#grid_id")
.na+Grid("#pager"%{edit!false%add!false%de!false%searc$!false2)
.na+Dutton-dd("#pager"%{
caption!"-dd"%
7uttonicon!"uiAiconAadd"%
onMicGDutton! function(){
aert("-dding Bo0")<
2%
position!"ast"
2)
.na+Dutton-dd("#pager"%{
caption!",e"%
7uttonicon!"uiAiconAde"%
onMicGDutton! function(){
aert(",eeting Bo0")<
2%
position!"ast"
2)<
...
5eparator
*t is possible to group some action adding separator, This can be done using the nav5eparator(dd
method
5ynta12
<script>
...
jQuery("#grid_id").na+Grid("#pager"%...).na+Dutton-dd("#pager"%
{parameters2).na+?eparator-dd("#pager"%{separator_parameters22<
...
</script>
The de#ault separator@parameters are
Bsepclass 2 ui/separator?sepcontent2 ..C
sepclass represent the separator class de#ined in ui/j+grid, Dou cancustomiEe your own class
sepcontent the content that can be put in the separator element
)rede#ined ;ormatter
;ormatter supports advanced #ormatting o# the contents o# cells in #orm? in/line and cell editing,
;ormatter can be used in either o# two ways2 )rede#ined and 0ustom,
*n this section? we discuss the )rede#ined ;ormatter,
j+rid Module Re+uirements
*n order to use the #ormatting #eatures? maAe sure you checA the bo1 #or the ;ormatter module when
you download j+rid, ;or more in#ormation re#er to :ownload j+rid
Language options
:e#ault language #ormatting options are de#ined in the language #iles e,g,? grid,locale/11 (where 11 is
the two character code #or your language? en #or 6nglish),
That means that the ;ormatter options are loaded when the grid javascript #iles are loaded,
The de#ault ;ormatter options are di##erent #or each language #ile,
Here are the de#ault ;ormatter options #or the 6nglish #ile2
^jgrid = {
...
;ormatter ! {
integer ! {t$ousands?eparator! " "% de;autNaue! "4"2%
num7er ! {decima?eparator!"."% t$ousands?eparator! " "% decimaUaces! 9% de;autNaue! "4.44"2%
currency ! {decima?eparator!"."% t$ousands?eparator! " "% decimaUaces! 9% pre;i#! ""% su;;i#!""% de;autNaue! "4.44"2%
date ! {
day(ames! )
"?un"% "/on"% "'ue"% "Jed"% "'$r"% "Kri"% "?at"%
"?unday"% "/onday"% "'uesday"% "Jednesday"% "'$ursday"% "Kriday"% "?aturday"
.%
mont$(ames! )
"San"% "Ke7"% "/ar"% "-pr"% "/ay"% "Sun"% "Su"% "-ug"% "?ep"% "=ct"% "(o+"% ",ec"%
"Sanuary"% "Ke7ruary"% "/arc$"% "-pri"% "/ay"% "Sune"% "Suy"% "-ugust"% "?eptem7er"% "=cto7er"% "(o+em7er"%
",ecem7er"
.%
-mUm ! )"am"%"pm"%"-/"%"U/".%
?! function (j) {return j < 66 __ j > 6: Q )"st"% "nd"% "rd"% "t$".)/at$.min((j A 6) R 64% :). ! "t$"2%
src;ormat! ">AmAd"%
ne0;ormat! "d/m/>"%
masGs ! {
*?=5L468ong!">AmAd F!i!s"%
*?=5L46?$ort!">AmAd"%
?$ort,ate! "n/j/>"%
8ong,ate! "% K d% >"%
Ku,ate'ime! "% K d% > g!i!s -"%
/ont$,ay! "K d"%
?$ort'ime! "g!i -"%
8ong'ime! "g!i!s -"%
?orta7e,ate'ime! ">AmAd&&'F!i!s"%
@ni+ersa?orta7e,ate'ime! ">AmAd F!i!s="%
>ear/ont$! "K% >"
2%
re;ormat-;ter&dit ! false
2%
7ase8inG@r! ""%
s$o0-ction! ""%
target! ""%
c$ecG7o# ! {disa7ed!true2%
id(ame ! "id"
2
...
Here you will #ind all the settings that you may want to review or change be#ore using the prede#ined
#ormats, These settings can also be overridden #or speci#ic columns using the #ormatoptions
parameter in the colModel,
The second step is to set the desired #ormatting in colModel, This is done using the option formatter,
;or e1ample,
...
co/ode ! )
...
{name!"myname"% ... ;ormatter!"num7er"% ...2%
...
.%
...
2)<
The e1ample above will #ormat the contents o# the .myname. column according to the rules set #or
.number. in the active language #ile, ;or e1ample? i# the source value is &%79,&? then the value that
actually will be put in the grid will be & %79,&F using the options above,
0olumn 5peci#ic Gptions
;ormatter options can be de#ined #or particular columns? overwriting the de#aults #rom the language
#ile, This is accomplished by using the #ormatoptions array in colModel, ;or e1ample2
...
co/ode ! )
...
{name!"myname"% ... ;ormatter!"currency"% ;ormatoptions!{decima?eparator!"%"% t$ousands?eparator! "%"% decimaUaces!
9% pre;i#! "^ "2 2 %
...
.%
...
2)<
This de#inition will overwrite the de#ault one #rom the language #ile, *n #ormatoptions should be placed
values appropriate #or the particular #ormat type
)rede#ined ;ormat Types
4elow is a list o# the prede#ined #ormat types
(ll prede#ined types are compatible with the editing modules, This means that the numbers? linAs? e/
mails? etc,? are converted so that they can be edited correctly,
Type Options Description
integer
thousands(eparator
)
de*aul+alue
thousands(eparator determines the separator *or the thousands)
de*ault+alue set the de*ault value i* nothing in the data
number
decimal(eparator)
thousands(eparator
)
decimalPlaces)
de*aul+alue
thousands(eparator determines the separator *or the thousands)
decimal(eparator determines the separator *or the decimals)
decimalPlaces determine how many decimal places we should have *or
the number) de*ault+alue set the de*ault value i* nothing in the data
currenc
y
decimal(eparator)
thousands(eparator
)
decimalPlaces)
de*aul+alue)
pre*i,)
The same as number) but we add aditional two options - pre*i, a te,t the
is puted be*ore the number and su**i, the te,t that is added a*ter the
number
su**i,
date
src*ormat)
new*ormat
src*ormat is the source *ormat - i.e. the *ormat o* the date that should be
converted) new*ormat is the new output *ormat. The de*inition o* the
date *ormat uses the PHP conversions. /lso you can use a set o*
prede*ined date *ormat - see the mas0 options in the de*ault date
*ormatting set
email none
1hen a mail type is used we directly add a hre* with mailto2 be*ore the
e-mail
lin0 target
The de*ault value o* the target options is null. 1hen this options is set)
we construct a lin0 with the target property set and the cell value put in
the hre* tag.
showlin
0
baseLin03rl)
show/ction)
addParam)
target)
id&ame
baseLin03rl is the lin0.
show/ction is an additional value which is added a*ter the baseLin03rl.
addParam is an additional parameter that can be added a*ter the
id&ame property.
target) i* set) is added as an additional attribute.
id&ame is the *irst parameter that is added a*ter the show/ction. 4y
de*ault) this is id)
chec0bo
,
disabled
The de*ault value *or the disabled is true. This option determines i* the
chec0bo, can be changed. 5* set to *alse) the values in chec0bo, can be
changed
select none this is not a real select but a special case. (ee note below
actions
0eys de*ault *alse)
editbutton de*ault
true)
delbutton de*ault
true
This type o* *ormatter is a easy way to add a buttons at certain column
*or inline editing. 1e add a two types o* actions edit and delete. The
*ormatter is just e,perimental and will be described in ne,t releases
Formatter type "Select"
The select type is not real select, This is used when we use some editing module and have
edittype2.select., 4e#ore this release we pass the value o# the select in grid and not the Aey, ;or
e1ample2
<script>
...
co/ode ! ) {name!"myname"% edittype!"seect"% editoptions!{+aue!"6!=ne<9!'0o"22 ... .%
...
2)<
</script>
*n this case? the data #or the grid should contain Gne or Two to be set in the column myname,
-ow? with this setting
<script>
...
co/ode ! ) {name!"myname"% edittype!"seect"% ;ormatter!"seect"% editoptions!{+aue!"6!=ne<9!'0o"22 ... .
...
2)<
</script>
the data should contain the Aeys (& or %)? but the value (Gne? or Two) will be displayed in the
grid,
showlink !ample
Let.s suppose that we have the #ollowing de#inition in colModel #or the #ormat type showlinA2
<script>
...
co/ode! ) {name!"myname"% edittype!"seect"% ;ormatter!"s$o0inG"% ;ormatoptions!{7ase8inG@r!"someur.p$p"% addUaram!
"Eaction=edit"2% ...2
...
.
...
2)<
</script>
This will output the #ollowing2
$ttp!//oca$ost/someur.p$pQid=69:Eaction=edit
*# you want to overwrite the id setting in the linA and replace this with myid? then the #ollowing should
be set
<script>
...
co/ode! ) {name!"myname"% edittype!"seect"% ;ormatter!"s$o0inG"% ;ormatoptions!{7ase8inG@r!"someur.p$p"% addUaram!
"Eaction=edit"% id(ame!"myid"2% ...2
...
.
...
2)<
</script>
his will output2
$ttp!//oca$ost/someur.p$pQmyid=69:Eaction=edit
0ustom ;ormatter
Dou can de#ine your own #ormatter #or a particular column, >sually this is a #unction, !hen set in the
#ormatter option this should not be enclosed in +uotes and not entered with () / show just the name o#
the #unction,;or e1ample?
<script>
...
co/ode! )
...
{name!"price"% inde#!"price"% 0idt$!L4% aign!"center"% edita7e! true% ;ormatter!currencyKmatter2%
...
.
...
2)<

function currencyKmatter (ce+aue% options% ro0=7ject)
{
(( do something here
return ne0_;ormat_+aue
2
</script>
:e#inition and parameters
To the custom #ormatter are passed the #ollowing parameters2
function my;ormatter ( ce+aue% options% ro0=7ject )
{
(( format the cell'alue to new format
return ne0_;ormated_ce+aue<
2
-ote the return in the #unction, This #unction should always return a value in order to worA correctly,
cellvalue / is the value to be #ormatted
options / is an object containing the #ollowing element
options 2 B row*d2 rid? colModel2 cmC where row*d / is the id o# the row colModel is the
object o# the properties #or this column getted #rom colModel array o# j+rid
rowGbject / is a row data represented in the #ormat determined #rom datatype option, *# we
have datatype2 1mlH1mlstring / the rowGbject is 1ml node?provided according to the rules #rom
1mlReader *# we have datatype2 jsonHjsonstring / the rowGbject is array? provided according to the
rules #rom jsonReader
>n#ormatting
(s mentioned in )rede#ined ;ormatter chapter all prede#ined types are compatible with the editing
modules, This means that the numbers? linAs? e/mails? etc,? are converted so that they can be edited
correctly, (lso the methods (liAe getRow:ata and get0ell) that get data? used this un#ormat in order to
get the original value, The +uestion is2 !hat to do i# we use a custom #ormatter #unction and want to to
have the original value bacA i# we use editing or methods getRow:ata and get0ellI
The answer is2 Dou can use your own custom un#ormatter #unction to do that, This #unction can be
used in colModel
<script>
...
co/ode! )
...
{name!"price"% inde#!"price"% 0idt$!L4% aign!"center"% edita7e! true% un;ormat!myun;ormat;unc2%
...
.
...
2)<
function myun;ormat;unc ( ce+aue% options% ceo7ject)
{
(( do something here
return un;ormated_+aue<
2
</script>
To the custom un#ormat #unction are passed the #ollowing parameters2
cellvalue / is the value to be un#ormated (pure te1t),
options / is an object containing the #ollowing element
options 2 B row*d2 rid? colModel2 cmC where row*d / is the id o# the row colModel is the
object o# the properties #or this column getted #rom colModel array o# j+rid
cellobject / is a jJuery cell object, This object can be used to obtain di##erent things #rom the
cell element / by e1ample jJuery(cellobject),html() can be used to get the html content instead o#
the te1t,
61ample
4elow we will simulate partial currency #ormatter using a custom #ormat and un#ormat #unctions
<script>
...
co/ode! )
...
{name!"price"% inde#!"price"% 0idt$!L4% aign!"center"% edita7e! true% ;ormatter!currencyKmatter%
un;ormat!un;ormatMurrency2%
...
.
...
2)<

function currencyKmatter (ce+aue% options% ro0=7ject)
{

return "^"Yce+aue<
2
function un;ormatMurrency (ce+aue% options)
{

return ce+aue.repace("^"%"")<
2

</script>
*# the value that is inserted or updated in the grid is &%7,FF? the in the grid it will be displayed as2
K&%7,FFL !hen we use getRow:ata or get0ell methods or any editing module the value #or this
column will be &%7,FF
0reating common #ormatter #unction
There are times where you maybe want to use your custom #ormatHun#ormat #unctions in many places
into the code, This o# course can be done de#ining the #unctions as e1ample above, !e have
designed the #ormatter module so that it can be easy e1tended #rom the developer and doing it so
maAe the development process easy, 4elow we will discuss how to maAe your own #ormatter
#unctions to be visible all into the code,
(#ter loading the j+rid =ava 5cript #iles you can de#ine in script tag the #ollowing (or simple create
your own #ile and include it into the head section)
jQuery.e#tend(^.;n.;matter % {
currencyKmatter ! function(ce+aue% options% ro0data) {
return "^"Yce+aue<
2
2)<
jQuery.e#tend(^.;n.;matter.currencyKmatter % {
un;ormat ! function(ce+aue% options) {
return ce+aue.repace("^"%"")<
2
2)<

</script>
Then in your code you just need to do2
<script>
...
co/ode! )
...
{name!"price"% inde#!"price"% 0idt$!L4% aign!"center"% edita7e! true% ;ormatter!"currencyKmatter"2%
...
.
...
2)<
0on#iguration
The columns in the grid can be used as the basis #or a search #orm to appear above? below? or in
place o#? the grid, 5earching is a way o# +uerying data #rom the server using speci#ied criteria,
0urrently we do not have module #or searching on local data i,e when a datatype options is set to
local, (ll the searching is done server side,
There are #our approaches2
a toolbar searching
a custom searching
a single #ield searching
a more comple1 approach involving many #ields and conditions / advanced searching
These approaches use common options #rom j+rid and so can be called only on an already/
constructed grid,
6very search method re+uire that some additional module should be included into the pacAage, (lso
re#er to :ownload or in every speci#ic module on what should be included
(ll search modules (e1cept custom searching and toolbar searching) uses the #ollowing de#inition #rom
language #ile2
^.jgrid = {
...
searc$ ! {
Kind! "Kind"%
Beset! "Beset"%
odata ! )"equa"% "not equa"% "ess"% "ess or equa"%"greater"%"greater or equa"% "7egins 0it$"%"does not 7egin 0it$"%"is in"%"is not
in"%"ends 0it$"%"does not end 0it$"%"contains"%"does not contain".%
rues'e#t! " rues"
2%
...
colModel Gptions
(s o# 7,$ release j+rid uses a common search options that can be used on every search method,
4elow is a list o# these options that should be set in colModel, -ote that some options are not
applicable #or particular method,
Option Type Description Default
search boolean 6etermines i* the *ield can be searched. true
stype string
6etermines the search type o* the *ield. 7an be te,t - also a input
element with type te,t is created and select - a select element is created
te,t
searchoption
s
object
Object which contain de*inition) events and other properties *or the
searched *ield. (ee below
The searchoptions object have the #ollowing properties2
The searchoptions are not applicable to custom search method, This method uses separate options,
data3rl string
This option is valid only *or the elements o* type select - i.e stype28select8. The
option represent the url *rom where we load the select element. 1hen this option
is set the element will be *illed with values *rom the aja, request. The data
should be a valid html select element with the desired options. 4y e,ample the
request should contain 9select:9option value;<$=:One9>option: 9option
value;<?=:Two9>option:9>select:. This is called only once.
build(elect *unction
This option have sense only i* the data3rl parameter is set. 5n case where the
server response can not build the select element you can use your on *unction to
build the select. The *unction should return a string containing the select and
options value"s# as described in data3rl option. Parameter passed to this
*unction is the server response
data5nit *unction 5* set this *unction is called only once when the element is created. To this
*unction we pass the element object.
data5nit2 *unction"elem# @
do something
A
/lso use this *unction to attach datepic0er) time pic0er and etc. E,ample2
data5nit 2 *unction "elem# @
B"elem#.datepic0er"#C
A
dataEvents array
List o* events to apply to the data elementC uses B"=Did=#.bind"type) EdataF) *n# to
bind events to data element. (hould be described li0e this2
dataEvents2 E
@ type2 8clic08) data2 @ i2 G A) *n2 *unction"e# @ console.log"e.data.i#C AA)
@ type2 80eypress8) *n2 *unction"e# @ console.log"80eypress8#C A A
F
attr object
attr is object where we can set valid attributes to the created element. 4y
e,ample2
attr 2 @ title2 <(ome title= A
1ill set a title o* the searched element
searchhidde
n
boolean
4y de*ault hidden elements in the grid are not searchable . 5n order to enable
searching when the *ield is hidden set this option to true
sopt array
This option is used only in advanced single *ield searching and determines the
operation that is applied to the element. 5* not set all the available options will be
used. /ll available option are2
E8eq8)8ne8)8lt8)8le8)8gt8)8ge8)8bw8)8bn8)8in8)8ni8)8ew8)8en8)8cn8)8nc8F
The corresponding te,ts are in language *ile and mean the *ollowing2
E8equal8)8not equal8) 8less8) 8less or equal8)8greater8)8greater or equal8) 8begins
with8)8does not begin with8)8is in8)8is not in8)8ends with8)8does not end
with8)8contains8)8does not contain8F
&ote that the elements in sopt array can be mi,ed in any order.
de*ault+alu
e
string 5* not empty set a de*ault value in the search input element.
value mi,ed
The option is used only *or stype select and de*ines the select options in the
search dialogs. 1hen set *or stype select and data3rl option is not set) the value
can be a string or object.
5* the option is a string it must contain a set o* value2label pairs with the value
separated *rom the label with a colon "2# and ended with"C#. The string should not
end with a "C#- editoptions2@value2<$2OneC?2Two=A.5* set as object it should be
de*ined as pair name2value - editoptions2@value2@$28One8)?28Two8AA
-ote2 when the data>rl in searchoptions object is not used #or the search type select? the de#initions
#or the select are taAen #irst #rom searchoptions value property and i# this is not de#ined a editoptions
value property is used/ i,e editoptions2Bvalue2&2oneL%2two?MC, 5ee below how to use these options in
di##erent search methods,
colModel conventions2
<script>
...
co/ode! )
...
{name!"price"% inde#!"price"% 0idt$!L4% searc$!true% stype!"te#t"% searc$options!{data*nit!dateUicG% attr!{tite!"?eect ,ate"22
2%
...
.
...
2)<
dateUicG = function(eem)
{
jQuery(eem).datepicGer()<
2
</script>
!hat you need to Anow
(ll search modules uses the url parameter in grid to per#orm the search, *n some methods
there is additional separate option #or the url which can be used too,
!hen the search is per#ormed the post:ata array is #illed with the needed data #or the search,
The parameter search in grid options is set to true in order to indicate the searching, 5erver
side the name o# this is @search (note the di##erence) which can be obtained using the 6T or
)G5T data array,
!hen the grid is triggered when using the re#resh button in -avigator the search option is set
to #alse,
6very search method creates its own method to clear the searched data #rom post:ata array,
>se these methods to do this,
Toolbar 5earching
This method construct searching creating input elements just below the header elements o# the grid,
!hen the header elements are re siEed the input search elements are also re siEed according to the
new width,
The method uses the url option in grid to per#orm a search to the server,
!hen the search is activated? an array o# type name2value is posted to the server, -ote that this array
is added to the post:ata parameter, !e post only #ields that have an entered value, !hen we clear
the the search #orm? the values are deleted #rom the post:ata array, !hen posting to the server? we
try to pass? not the name? but the inde1 set in colModel, !hen the inde1 is not #ound we use the
name, (dditionally? we add a @search'true to the posted data,
!hen the stringResult option us set to true then the posted data to the server is string and the
structure o# the posted data is the same as in(dvanced 5earch,
*nstallation
*n order to use this method a 0ustom module should be checAed when you download the grid, ;or
more in#ormation re#er to :ownload
0alling 0onvetion
...
jQuery("#grid_id").;iter'oo7ar(options)<
...
...
jQuery("#grid_id").jqGrid(";iter'oo7ar"%options)<
...
!here 2
grid@id is the id o# already constructed grid
options is a object containing di##erent con#iguration setting, 5ee below
This command will create a search elements something liAe this2
This method uses the de#initions #or searching #rom colModel, 5ee 0on#iguration
The options in #ilterToolbar method are
Option type Description Default
autosearch boolean
(earch is per*ormed according to the *ollowing rules2 *or te,t element
when a Enter 0ey is pressed while inputting values and search is
per*ormed. Hor select element when the value changes. The search
parameter in grid is set to true and aja, call is made.
true
be*ore(earch *unction
event which *ires be*ore a search. 5t is called be*ore triggering the grid.
5* the event return true triggering does not occur. 5n this case you can
construct your own search parameters and trigger the grid to search
the data. /ny other return value causes triggering.
null
a*ter(earch *unction event which *ires a*ter a search null
be*ore7lear *unction
event which *ires be*ore clearing entered values "i.e.)clearToolbar is
activated#.5t is called be*ore clearing the data *rom search elements. 5*
the event return true triggering does not occur. 5n this case you can
construct your own search parameters and trigger the grid. /ny other
return value causes triggering.
null
a*ter7lear *unction
event which *ires a*ter clearing entered values "i.e.) clearToolbar
activated#
null
searchOnEnt
er
boolean
6etermines how the search should be applied. 5* this option is true see
the autosearch option. 5* the option is *alse then the search is
per*ormed immediately when the user pres some character
true
stringIesult boolean
6etermines how to post the data on which we per*orm searching.
1hen the this option is *alse the posted data is in 0ey2value pair) i* the
option is true) the posted data is equal on those as in searchJrid
method (ee here.
*alse
groupOp string
This option is valid only i* the option stringIeasult is set to true and
determines the group operation. 7an have values /&6 and OI. (ee
here
/&6
The sopt option in searchoptions does not have e#ect in this method,
!hen we create toolbar search with #ilterToolbar we create additional methods as #ollow
Method Description
triggerToolb
ar
1hen this method is called a search is per*ormed) the search parameter in grid
becomes true and aja, call is made to the server
clearToolbar
1hen called clear the search values send a request with search option set to *alse and
set the de*ault one i* available
toggleToolba
r
Toggeles the toolbar with the search elements
>sing the additional methods
The methods listed above should be used this way2
...
$ar sgrid = ^("#grid_id"))4.<
sgrid.trigger'oo7ar()<
This will per#orm a search dynamically,
:o not use these three methods with the new ()*, They will not worAN
0ustom 5earching
This method can be called to construct an custom search #orm #or the grid,
The method uses the url option in grid to per#orm a search to the server,
!hen the search is activated? an array o# type name2value is posted to the server, -ote that this array
is added to the post:ata parameter, !e post only #ields that have an entered value, !hen we clear
the the search #orm? the values are deleted #rom the post:ata array, !hen posting to the server? we
try to pass? not the name? but the inde1 set in colModel, !hen the inde1 is not #ound we use the
name, (dditionally? we add a @search'true to the posted data,
*nstallation
*n order to use this method a 0ustom module should be checAed when you download the grid, ;or
more in#ormation re#er to :ownload
0alling conventions and options
The search #orm is de#ined? #irst? in the html? positioned above or below the grid de#inition? as you
pre#er,
<di$ id="mysearc$"></di$>
and then
jQuery("#mysearc$").;iterGrid("#grid_id"%options)<
jQuery("#mysearc$").jqGrid(";iterGrid"%"#grid_id"%options)<
!here2
grid@id is the id o# the grid to which the search will be applied,
options is an array o# parameters (see below),
The options that can be used are2
Option Description Default
gridModel
when set to true) we use the parameters *rom colModel to construct the
search) using the *ollowing options *rom colModel2 name) inde,) edittype)
editoptions) search.
/dditional parameters can be set in colModel to meet the needs only o*
this method. These speci*ic parameters are2
defval: de*ault value *or the search *ield this will be set as initial search.
surl: valid only i* edittype28select8C url *rom where we can get already-
constructed select element - e.g.) we e,pect the *ollowing html content
"square brac0ets have been substituted *or angle brac0ets so we can see
the code#2
9select:
9option value;8val$8: +alue$ 9>option:
9option value;8val?8: +alue? 9>option:
K
9option value;8valn8: +alue& 9>option:
9>select:
Only *ields with search2 true are attached to the *orm. Hidden elements are
not included.
1hen *alse we should construct a *ilterModel "see below# to per*orm a
search.
*alse
grid&ames
this option wor0s only i* gridModel is true. 1hen set to true we use the
names *rom col&ames as labels *or the search *ields.
*alse
gridToolbar 6eprecated. 3se *ilterToolbar method instead *alse
*ilterModel The *ilter model should be used when gridModel is set to *alse
*ilterModel E
K
@label28LableHild8) name2 8colname8) stype2 8select8) de*val2 8de*aultLvalue8)
surl2 8someurl8) sopt2@optins *or the selectAA)
K
label: the label o* the *ield "te,t description#
name: the name o* the column - should equal o* the name in colModel.
&ote that we search on the inde, o* that coulmn.
stype: type o* input element - can be only 8te,t8 or 8select8
defval: de*ault value *or the search input element.
surl: used only when stype is 8select8C this is a url *rom where we can get an
already-constructed select element - i.e. we e,pect the *ollowing html
content2
9select:
9option value;8val$8: +alue$ 9>option:
9option value;8val?8: +alue? 9>option:
K
9option value;8valn8: +alue& 9>option:
9>select:
sopt: valid options that can be applied to the element) the same as
EF
editoptions *rom colModel.
*ormtype de*ines how the *orm should be constructed. 7an be 8horiMontal8 or 8vertical8 horiMontal
autosearch
1hen set to true the behavior is as *ollows2
1hen the user input some value in the input element they can press enter
and the search is activated.
1hen a select bo, is used search is activated when the values o* select is
changed.
1hen set to *alse we can use the button to per*orm the search.
true
*ormclass the class that can be applied to the *orm <*ilter*orm=
tableclass
the class that can be applied to the table "the table is a child o* *orm
element#
<*iltertable=
buttonclass class that can be applied to the buttons <*ilterbutton=
search4utto
n
the label o* the button that per*orms the search. "&ote - this label does not
come *rom the language *iles) since the intention is to separate this method
so that it can be used anywhere - i.e. without using jqJrid#
<(earch=
clear4utton the label o* the button that clears the already-entered values <7lear=
enable(earc
h
enable>disable the search button *alse
enable7lear enable>disable the clear button *alse
be*ore(earc
h
event which *ires be*ore a search null
a*ter(earch event which *ires a*ter the search is per*ormed null
be*ore7lear
event which *ires be*ore clearing entered values "i.e when clear button is
clic0ed#
null
a*ter7lear event which *ires a*ter clearing entered values null
url a separate url *or searching values 88
mar0search
ed
when set to true) a*ter a search every column to which search is applied is
mar0ed as searchable - e.g.) in the upper le*t corner o* the column header
a mar0er is set to indicate that this column is part o* the applied search.
1hen we clear the values the mar0ers disappear.
&ot applicable in !.N release
true
(dditional Methods
!hen using #ilterrid we can use two additional privileged methods2
triggerSearch / triggers a search to the grid? #or e1ample?
$ar sg = jQuery("#mysearc$").;iterGrid(...))4.<
sg.trigger?earc$()<
clearSearch / clears the search #orm values and triggers the search with empty or de#ault values,
sg.cear?earc$()<
:o not use these methods with the new ()*, They will not worAN
5ingle #ield searching
5ingle #ield searching is a way to search data (at server) on one #ield at a time, !hen using this
method we construct a modal #orm where the user can select a #ield and condition to apply the
search,
This method uses the url to post the search data and di##er #rom the custom and toolbar search
methods, The di##erence is that the posted search data is not in pair name2value, 5ee below how data
is posted,
*nstallation
*n order to use this method the #ollowing modules should be included when downloading the grid2
0ommon? ;orm 6dit? 5earch )lugin, ;or more in#ormation re#er to :ownload
0alling 0onventions
<script>
...
jQuery("#grid_id").searc$Grid( options )<
...
</script>
<script>
...
jQuery("#grid_id").jqGrid("searc$Grid"% options )<
...
</script>
!here
grid@id is the id o# the already constructed grid
options is an array o# settings in name2 value pairs #ormat,
Typically when this method is called it launches the modal dialog and maAes the grid inaccessible
until the dialog is not closed,
This method is the de#ault search method in the navigator i# the search is enabled, The search
parameters in navigator can be set the same way as the options described below,
<script>
...
...
...
2).na+Grid("#gridpager"%{+ie0!true% de!false2%
{2% (( default settings for edit
{2% (( default settings for add
{2% (( delete instead that del)false we need this
{searc$_options2% (( search options
{2 (+ 'iew parameters+(
)<
...
</script>
4y de#ault the dialog appears at upper le#t corner o# the grid, *t is important to Anow that this modal
does not use the common j+rid modal #unctions? but its own, The reason #or this is that this is
separate plugin, *n order to manipulate the modal you should consider the #ollowing items in the ui/
j+grid,css #ile (or use the j+uery,search;ilter,css #rom development pacAage)
.uiAsearc$Kiter { dispay! none< position! absolute< CAinde#! 644< 0idt$! 1''(< $eig$t! 1''(< o+er;o0! $isible<2
.uiAsearc$Kiter ta7e {position!relati$e<2
.uiAsearc$Kiter .uiAstateAde;aut { cursor! pointer< 2
.uiAsearc$Kiter .di+ider { $eig$t! 1p)< 2
.uiAsearc$Kiter .di+ider di+ { 7acGgroundAcoor! 7acG< $eig$t! 1p)< 2
!e add a new optyon overlay (de#ault true) in serch dialog, *# set to #alse the cover overlay is disabled
and the user can interact with the grid, *# you want to center the dialog maybe you can change the ,ui/
search;ilter table to
.uiAsearc$Kiter ta7e {position!relati$e< margin! *p) auto<2
Gptions
This method uses the #ollowing properties #rom language #ile grid,locale/11 and the can be passed in
the options array o# the serch method
^.jgrid = {
...
searc$ ! {
Kind! "Kind"%
Beset! "Beset"%
odata ! )"equa"% "not equa"% "ess"% "ess or equa"%"greater"%"greater or equa"% "7egins 0it$"%"does not 7egin 0it$"%"is in"%"is not
in"%"ends 0it$"%"does not end 0it$"%"contains"%"does not contain".%
rues'e#t! " rues"
2%
...
a*ter(how(earch *unction
This event *ires "i* de*ined# every time a*ter the search
dialog is shown
null
be*ore(how(earch *unction
This event *ires "i* de*ined# every time be*ore the search
dialog is shown
null
drag boolean Enables or disables draging o* the modal true
caption string The caption o* the modal see lang *ile
close/*ter(earch boolean
5* set to true this closes the search dialog a*ter the user
apply a search - i.e. clic0 on Hind button
*alse
close/*terIeset boolean
5* set to true this closes the search dialog a*ter the user
apply a reset - i.e. clic0 on Ieset button
*alse
closeOnEscape boolean
5* set to true the dialog is closed when the user pres E(7
0ey
*alse
Hind string The te,t in the *ind button see lang *ile
groupOps array translations strings used in advanced searching see lang *ile
matchTe,t string Translation te,t used in advanced searching see lang *ile
multiple(earch boolean 5* set to true this activates the advanced searching *alse
clone(earchIowOn
/dd
boolean
The option is valid only i* multiple(earch is set to true. 5*
set to *alse the cloned "added row when plus button is
clic0ed# row is blan0 as opposite to true where the row is
copied
true
odata array Translation strings that corresponds to the sopt options see lang *ile
on7lose *unction
5* de*ined this event *ires when the dialog is closed. 7an
return true or *alse. 5* the event return *alse the dialog will
not be closed
null
on5nitialiMe(earch *unction This event occurs only once when the modal is created null
recreateHilter boolean
1hen set to true the entry *ilter is destroyed unbinding all
the events and it is constructed again. 3se this option i*
you change dynamically some properties in colModel) so
that they have e**ect
*alse
Ieset string The te,t *or the clear "reset# button see lang *ile
rulesTe,t string Translation te,t used in advanced searching see lang *ile
sHield string (ee sopt description searchHield
sHilter string /plicable to advanced searching. (ee advanced searching *ilters
sOper string (ee sopt description searchOper
sopt array 3se this option to set common search rules. 5* not set all
the available options will be used. /ll available option are2
E8eq8)8ne8)8lt8)8le8)8gt8)8ge8)8bw8)8bn8)8in8)8ni8)8ew8)8en8)8cn8)8nc8F The
corresponding te,ts are in language *ile and mean the
*ollowing2 E8equal8)8not equal8) 8less8) 8less or
equal8)8greater8)8greater or equal8) 8begins with8)8does not
begin with8)8is in8)8is not in8)8ends with8)8does not end
with8)8contains8)8does not contain8F &ote that the elements in
sopt array can be mi,ed in any order.
s+alue string (ee sopt description
search(trin
g
overlay boolean
5* this option is set to *alse the overlay in grid is disabled
and the user can interact with the grid.
true
(s mentioned above posting search data di##ers #rom custom and toolbar searching, !hen the #ind
button is clicAed? j+rid adds three parameters to the url (again with @search'true)? in name'value
pairs2
s;ield2 the .search;ield.? the value comes #rom the inde1 in colModel
s8alue2 the .search5tring.? the value is the entered value
sGper2 the .searchGper.? the value is the type o# search / see sopt array
;or e1ample i# the #ield inde1 is invid? operation is e+ual? and the searched value is &%7? then the
string that is posted to the server looA liAe2
$ttp!//oca$ost/demo:1/ser+er.p$pQ...Esearc$Kied=in+idEsearc$?tring=69:Esearc$=per=eq
col"odel Options
(s o# 7,$ release j+rid uses a common search options that can be used on every search method,
4elow is a list o# these options that should be set in colModel, -ote that some options are not
applicable #or particular method,
search boolean 6etermines i* the *ield can be searched. true
stype string
6etermines the search type o* the *ield. 7an be te,t - also a input
element with type te,t is created and select - a select element is created
te,t
searchoption
s
object
Object which contain de*inition) events and other properties *or the
searched *ield. (ee below
The searchoptions object have the #ollowing properties2
The searchoptions are not applicable to custom search method, This method uses separate options,
data3rl string
This option is valid only *or the elements o* type select - i.e stype28select8. The
option represent the url *rom where we load the select element. 1hen this option
is set the element will be *illed with values *rom the aja, request. The data
should be a valid html select element with the desired options. 4y e,ample the
request should contain 9select:9option value;<$=:One9>option: 9option
value;<?=:Two9>option:9>select:. This is called only once.
data5nit *unction
5* set this *unction is called only once when the element is created. To this
*unction we pass the element object.
data5nit2 *unction"elem# @
do something
A
/lso use this *unction to attach datepic0er) time pic0er and etc. E,ample2
data5nit 2 *unction "elem# @
B"elem#.datepic0er"#C
A
dataEvents array
List o* events to apply to the data elementC uses B"=Did=#.bind"type) EdataF) *n# to
dataEvents2 E
@ type2 8clic08) data2 @ i2 G A) *n2 *unction"e# @ console.log"e.data.i#C AA)
F
attr object
attr is object where we can set valid attributes to the created element. 4y
e,ample2
attr 2 @ title2 <(ome title= A
1ill set a title o* the searched element
searchhidde
n
boolean
4y de*ault hidden elements in the grid are not searchable . 5n order to enable
searching when the *ield is hidden set this option to true
sopt array
This option is used only in advanced single *ield searching and determines the
operation that is applied to the element. 5* not set all the available options will be
used. /ll available option are2
E8eq8)8ne8)8lt8)8le8)8gt8)8ge8)8bw8)8bn8)8in8)8ni8)8ew8)8en8)8cn8)8nc8F
The corresponding te,ts are in language *ile and mean the *ollowing2
E8equal8)8not equal8) 8less8) 8less or equal8)8greater8)8greater or equal8) 8begins
with8)8does not begin with8)8is in8)8is not in8)8ends with8)8does not end
with8)8contains8)8does not contain8F
&ote that the elements in sopt array can be mi,ed in any order.
de*ault+alu
e
string 5* not empty set a de*ault value in the search input element.
value mi,ed
The option is used only *or stype select and de*ines the select options in the
search dialogs. 1hen set *or stype select and data3rl option is not set) the value
can be a string or object.
end with a "C#- editoptions2@value2<$2OneC?2Two=A.5* set as object it should be
de*ined as pair name2value - editoptions2@value2@$28One8)?28Two8AA
-ote2 when the data>rl in searchoptions object is not used #or the search type select? the de#initions
#or the select are taAen #irst #rom searchoptions value property and i# this is not de#ined a editoptions
value property is used/ i,e editoptions2Bvalue2&2oneL%2two?MC, 5ee below how to use these options in
di##erent search methods,
(dvanced 5earching
(dvanced searching is a way to search on multiple #ields at the same time with di##erent conditions,
(dvanced searching and single searching use the same method? but with di##erent settings and
posting data,
*nstallation
*n order to use this method the #ollowing modules should be included when downloading the grid2
0ommon? ;orm 6dit? 5earch )lugin, ;or more in#ormation re#er to :ownload
0alling 0onventions
<script>
...
jQuery("#grid_id").searc$Grid( {mutipe?earc$!true%...2 )<
...
</script>
<script>
...
jQuery("#grid_id").jqGrid("searc$Grid"% {mutipe?earc$!true%...2 )<
...
</script>
!here
multiple5earch2true activates the advanced searching
M other options set as name2value pair
Typically when this method is called it launches the modal dialog and maAes it so the grid
unaccessible until the dialog is closed,
This method is not the de#ault search method in the navigator, To enable this you should either set the
de#ault search options using the e1tend method or set it in the navigator in the place o# the search
options,
The advanced searching can looA liAe this when created2
(s you can see the user can add or delete an unlimited number o# conditions to per#orm the search,
To add a condition the plus button should be pressed,
To delete a condition the minus button should be pressed,
Gptions
!e have the same options as those #rom 5ingle 5earching
4elow we consider only these options that are connected with the advanced search,
(s mentioned above the #irst option is
multiple5earch2true / This option activates the advanced searching
The second option is2
s;ilter / this option determines the name o# the posting data, The de#ault value is #ilters,
!hen the search data is posted to the server we add only one parameter (again with @search'true) to
the url and this is the #ilters element,
The posted data can looA liAe this2
;iters =
{"group=p"!"-(,"%
"rues"!)
{";ied"!"in+date"%"op"!"ge"%"data"!"944\A64A4L"2%
{";ied"!"in+date"%"op"!"e"%"data"!"944\A64A94"2%
{";ied"!"name"%"op"!"70"%"data"!"Mient :"2
.
2
The posted data is a =5G- string with the #ollowing parameters2
groupGp / this determines the rules o# the search, 0an be (-: or GR, This option can be
changed #rom the user with the help o# the select bo1 near the Reset button, !hen the user select
all (6nglish variant) the (-: is set, !hen the user selects any the GR is set,
rules / an array with the #ollowing options
#ield / the #ield property contains the name o# the selected inde1 (or name) #rom
colModel
op / determines the condition o# the searching, see the sopt in the options
data / is the entered data to be searched on
0ommon 6diting )roperties
Gne o# the Aey reasons #or displaying data in a grid is to edit it? +uicAly and easily, j+rid supports
editing data in three ways2
&, cell editing 2 edit speci#ic cells in a gird
%, inline editing 2 edit several cells in the same row
7, #orm editing 2 create a #orm to edit outside o# the grid
*nstallation
6very editing module has its own description in the :ownload Manager? but all o# them uses the
common module which should be selected (marAed ) i# you plan to use the editing, ;or more
in#ormation re#er to :ownload,
;or :evelopers / this is the grid,common,js in the src directory,
Gptions and :escription
(ll editing modules uses a common properties in colModel in order to per#orm editing, 4elow is the list
o# these properties with detailed description2
editable
edittype
editoptions
editrules
#ormoptions (valid only in #orm editing)
The common synta1 o# using these options is2
<script>
...
co/ode! )
...
{name!"price"% ...% edita7e!true% edittype!"te#t"% editoptions!{...2% editrues!{...2% ;ormoptions!{...2 2%
...
.
...
2)<
</script>
;or all other speci#ic options and events re#er to the appropriate module,
;or every editable element j+rid construct di##erent name and id which are speci#ic #or every module,
Re#er to the appropriate module on how these are constructed
edita#le
The editable option is boolean and can have two values true or #alse, The option de#ines i# this #ield is
editable (or not), :e#ault is #alse, To maAe a #ield editable? set this to true2 editable2true,
!e should mention that the hidden #ields are not editable instead that they have been marAed as
editable, *n in/line and cell editing modules you should show these #ields (using show0ol method) in
order to edit it, *n #orm editing module you should use editrules option (see below)
edittype
6dittype option de#ines the type o# o# the editable #ield, )ossible values2 .te1t.? .te1tarea.? .select.?
.checAbo1.? .password.? .button.? .image.? .#ile. and .custom., The de#ault value is .te1t.,
te!t
!hen edittype is .te1t.? j+rid constructs a input tag o# type te1t2
<input type="te#t" ...../>
*n editoptions we can set all the possible attributes #or this #ield, ;or e1ample?
... editoptions! {siCe!64% ma#engt$! 612
will cause j+rid to construct the #ollowing input
<input type="te#t" siCe="64" ma#engt$="61" />
*n addition to the these settings? j+rid adds the id and name attribute,
te!tarea
!hen edittype is .te1tarea.? j+rid constructs a input tag o# type te1tarea
<input type="te#tarea" .../>
*n editoptions we can add additional attributes to this type, Typically? these govern the siEe o# the bo12
... editoptions! {ro0s!"9"%cos!"64"2
<input type="te#tarea" ro0s="9" cos="64".../>
To these attributes j+rid adds id and name attributes ,
check#o!
!hen edittype is .checAbo1.? j+rid constructs a input tag as #ollows2
<input type="c$ecG7o#" .../>
editoptions is used to de#ine the checAed and unchecAed values, The #irst value is checAed, ;or
e1ample
...editoptions! { +aue!">es!(o" 2
This will construct
<input type="c$ecG7o#" +aue=">es" o;;+a="(o".../>
de#ines a checAbo1 in which when the value is Des the checAbo1 becomes checAed? otherwise
unchecAed, This value is passed as parameter to the editurl,
*# in the editoptions the value property is not set j+rid search #or the #ollowing values (#alseOFOnoOo##O
unde#ined) in order to construct checAbo1, *# the cell content does not contain one o# these values
then the value attribute becomes the cell content and o##val is set to o##,
61ample i# the cell content is true? then
<input type="c$ecG7o#" +aue="true" o;;+a="o;;" c$ecGed.../>
To these attributes j+rid adds id and name attributes ,
select
!hen edittype is .select.? j+rid constructs a input tag as #ollows2
<select>
<option +aue="+a6"> Naue6 </option>
<option +aue="+a9"> Naue9 </option>
...
<option +aue="+an"> Naue( </option>
</select>
To construct this element we have three possible variants
5etting editoptions value as string
The editoptions value must contain a set o# value2label pairs with the value separated #rom the label
with a colon (2) and ended with(L), !hichever you use? something liAe the #ollowing
editoptions2 B value2 ;62;ed61L *-2*nTimeL T-2T-T C
will construct
<select>
<option +aue="K&"> Ked&# </option>
<option +aue="*("> *n'ime </option>
<option +aue="'("> '(' </option>
</select>
-ote the last element in the string / it should not end with L
5eting editoptions value as object
*n this case the editoptions value must contain array BC with name value property, 4elow is e1ample2
...
co/ode ! )
...
{name!"myname"% edittype!"seect"% editoptions!{+aue!{6!"=ne"%9!"'0o"22 2%
...
.
...
This will construct select
<select>
<option +aue="6">=ne</option>
<option +aue="9">'0o</option>
</select>
5etting editoptions data>rl parameter
The editoptions data>rl parameter is valid only #or element o# edittype2select, The data>rl parameter
represent the url #rom where the html select element should be get,
!hen this option is set? the element will be #illed with values #rom the aja1 re+uest, The data should
be a valid html select element with the desired options / something liAe2
<select>
<option +aue="6">=ne</option>
<option +aue="9">'0o</option>
...
</select>
To this element? j+rid adds the id and name attributes as above,
Multiple selection o# options in a select bo1 is also possible, (lso the siEe attribute can be added too
...editoptions! {mutipe!true% siCe!:... 2
password
!hen edittype is .password.? j+rid constructs a input tag o# type te1t2
<input type="pass0ord" ...../>
... editoptions! {siCe!64% ma#engt$! 52
<input type="pass0ord" siCe="64" ma#engt$="5" />
#utton
!hen edittype is .button.? j+rid constructs a input tag o# type te1t2
<input type="7utton" ...../>
... editoptions! {+aue!"/yDutton"2
<input type="7utton" +aue="/yDutton" />
image
!hen edittype is .image.? j+rid constructs a input tag o# type te1t2
<input type="image" ...../>
... editoptions! {src!"pat$_to_my_image"2
<input type="image" src="pat$_to_my_image" />
$ile
!hen edittype is .#ile.? j+rid constructs a input tag o# type te1t2
<input type=";ie" ...../>
... editoptions! {at!"-t te#t"2
<input type=";ie" at="-t te#t"... />
!hen this element is created (usually in #orm editing) the #orm does not become
6-0TD)6'multipartH#orm/data in order to upload the #ile, Dou should apply another plugin #or this
purpose / (ja1 ;ile >pload plugin worAs #ine,
custom
This edit type allows de#inition o# a custom editable element, !hen the edit type is set to custom we
should provide a set o# two #unctions? one which creates the element? and one that gets the value
#rom the #orm in order to be posted to the server,
The #unctions that should be de#ined2
$. custom_element / this #unction is used to create the element, The #unction should return the
new :GM element, )arameters passed to this #unction are the value and the editoptions
#rom colModel,
?. custom_value / this #unction should return the value #rom the element a#ter the editing in order
to post it to the server, )arameter passed to this #unction is the element object
!hen the custom element is created we automatically do the #ollowing additinal tasAs2
&, add a class .customelement.
%, add attribute name with name #rom colModel
7, add id according to the rules #or every edited module,
The e1ample above will create element input type te1t2
<script>
function myeem (+aue% options) {
$ar e = document.create&ement("input")<
e.type="te#t"<
e.+aue = +aue<
return e<
2

function my+aue(eem) {
return ^(eem).+a()<
2
...
co/ode! )
...
{name!"price"% ...% edita7e!true% edittype!"custom"% editoptions!{custom_eement! myeem% custom_+aue!my+aue2 2%
...
.
...
2)<
</script>
editoptions
The editoptions property is an array which contains important in#ormation about the editing column, *t
is important to note that in the editoptions array you can set any valid attribute #or the chosen
edittype,
The editoptions property is used in colModel array and the synta1 is
<script>
...
co/ode! )
...
{name!"price"% ...% editoptions!{name6!+aue6...2% edita7e!true 2%
...
.
...
2)<
</script>
i,e, in name2value pair, 4elow is the list o# most commonly used options2
value mi,ed
1hen set *or edittype chec0bo, this value should be a string with two possible
values separated with a colon "2# - E,ample editoptions2@value2<Oes2&o=A where
the *irst value determines the chec0ed property.
1hen set *or edittype select value can be a string) object or *unction.
ended with a "C#- editoptions2@value2<$2OneC?2Two=A.
5* set as object it should be de*ined as pair name2value - editoptions2@value2
@$28One8C?28Two8AA
1hen de*ined as *unction - the *unction should return either *ormated string or
object.
5n all other cases this is the value o* the input element i* de*ined.
data3rl string
This option is valid only *or the elements o* type select - i.e.) edittype2select and
should represent the url *or getting the data that should contain the select
de*inition. The data is obtained via aja, call and should be a valid html select
element with the desired options 9select:9option value;8$8:One9>option:K
9>select:. 5n this case you can use option group.
The aja, request is called only once when the element is created.
5n inline edit or cell edit module it is called every time when you edit a new row or
cell. 5n *orm edit module only once.
data5nit *unction
To this *unction) i* de*ined) we pass the element object. This *unction is called
only once when the element is created. E,ample 2
Keditoptions2 @ data5nit 2 *unction "elem# @
B"elem#.autocomplete"#C
A
A
The event is called only once when the element is created.
5n inline edit or cell edit module it is called every time when you edit a new row or
cell. 5n *orm edit module only once i* the recreateHorm option is set to *alse and
every time i* the same option is set to true .
&ote2 (ome plugins requie to 0now the position o* the element into the 6OM and
since this event is raised be*ore inserting the element into the 6OM you can use
a setTimeout *unction to acomplish the desired action. This is especially valid *or
jPuery 35 datepic0er "$.G., and up releases#
dataEvents array list o* events to apply to the data elementC uses B"=Did=#.bind"type) EdataF) *n# to
K editoptions2 @ dataEvents2 E
@ type2 8clic08) data2 @ i2 G A) *n2 *unction"e# @ console.log"e.data.i#C A A)
F
A
de*ault+alu
e
mi,ed
The option can be string or *unction. This option is valid only in Horm Editing
module when used with editJridIow method in add mode. 5* de*ined the input
element is set with this value i* only element is empty. 5* used in selects the te,t
should be provided and not the 0ey. /lso when a *unction is used the *unction
should return value.
other
options
mi,ed
5n this case you can set any other valid attribute *or the editable element. 4y
E,ample i* the element is edittype28te,t8 we can set siMe) ma,lenght and etc.
attributes. Ie*er to the valid attributes o* o* the element
editrules
This option add additional properties to the editable element and should be used in colModel, Mostly it
is used to validate the user input be#ore submitting the value(s) to the server, 5ynta12
<script>
...
co/ode! )
...
{name!"price"% ...% editrues!{edit$idden!true% required!true....2% edita7e!true 2%
...
.
...
2)<
</script>
4elow is the list o# available options2
Option Type Description
edithidden boolean
This option is valid only in *orm editing module. 4y de*ault the hidden
*ields are not editable. 5* the *ield is hidden in the grid and edithidden is
set to true) the *ield can be edited when add or edit methods are called.
required boolean
"true or *alse# i* set to true) the value will be chec0ed and i* empty) an
error message will be displayed.
number boolean
"true or *alse# i* set to true) the value will be chec0ed and i* this is not a
number) an error message will be displayed.
integer boolean
"true or *alse# i* set to true) the value will be chec0ed and i* this is not a
integer) an error message will be displayed.
min+alue
number"integer
#
i* set) the value will be chec0ed and i* the value is less than this) an error
message will be displayed.
ma,+alue number"integer i* set) the value will be chec0ed and i* the value is more than this) an error
# message will be displayed.
email boolean
i* set to true) the value will be chec0ed and i* this is not valid e-mail) an
error message will be displayed
url boolean
i* set to true) the value will be chec0ed and i* this is not valid url) an error
message will be displayed
date boolean
i* set to true a value *rom date*mt option is get "i* not set 5(O date is
used# and the value will be chec0ed and i* this is not valid date) an error
message will be displayed
time boolean
i* set to true) the value will be chec0ed and i* this is not valid time) an
error message will be displayed. 7urrently we support only hh2mm *ormat
and optional am>pm at the end
custom boolean
i* set to true allow de*inition o* the custom chec0ing rules via a custom
*unction. (ee below
customL*un
c
*unction
this *unction should be used when a custom option is set to true.
Parameters passed to this *unction are the value) which should be
chec0ed and the name - the property *rom colModel. The *unction should
return array with the *ollowing parameters2 *irst parameter - true or *alse.
The value o* true mean that the chec0ing is success*ul *alse otherwiseC
the second parameter have sense only i* the *irst value is *alse and
represent the error message which will be displayed to the user. Typically
this can loo0 li0e this E*alse)=Please enter valid value=F
%ustom %hecking e!ample
<script>
function mypricec$ecG(+aue% coname) {
i; (+aue < 4 EE +aue >94)
return )false%"Uease enter +aue 7et0een 4 and 94".<
ese
return )true%"".<
2
...
co/ode! )
...
{name!"price"% ...% editrues!{custom!true% custom_;unc!mypricec$ecG....2% edita7e!true 2%
...
.
...
2)<
</script>
$ormoptions
This option is valid only in #orm editing, The purpose o# these options is to reorder the elements in the
#orm and to add some in#ormation be#ore and a#ter the editing element, 5hould be used in colModel
array, 5ynta12
<script>
...
co/ode! )
...
{name!"price"% ...% ;ormoptions!{empre;i#!"(W)"% ro0pos!6% copos!9....2% edita7e!true 2%
...
.
...
2)<
</script>
*# you plan to use this object in collModel with rowpos and colpos properties it is recommended that all
editing #ields use these properties,
4elow is a list o# available options
Option Type Description
elmpre*i
,
string i* set) a te,t or html content appears be*ore the input element
elmsu**i
,
string i* set) a te,t or html content appears a*ter the input element
label string i* set) this replace the name *rom col&ames array that appears as label in the *orm.
rowpos number
determines the row position o* the element "again with the te,t-label# in the *ormC the
count begins *rom $
colpos number
determines the column position o* the element "again with thelabel# in the *orm
beginning *rom $
Two elements can have e+ual row position? but di##erent column position, This will place the two
elements in one row on the #orm,
0ell 6diting
cell6diting supports Aey navigation and editing individual cells? with the #ollowing behaviour2
!hen we clicA on a cell that is not editable? the cell is selected and we can use the up? down?
le#t and right Aeys to navigate through the cells,
*# we move to a cell that is editable? we can press P6nterQ to edit the cell, The cell is saved
when we press P6nterQ again? when we press PTabQ? or when we clicA on another cell, *# we press
P650Q? the cell is not saved, !hen editing a cell? the cursor Aeys move only within the cell,
!hen we clicA on cell that is editable? then we go directly into edit mode,
The cell is not editable i# it has a class .not/editable/cell.? instead that in colModel is set to be
editable
*nstallation
*n order to use this module you should marA the 0ell editing and 0ommon when you download the
grid, ;or more in#ormation re#er to:ownload,
;or :evelopers / this is the grid,celledit,js in the src directory,
The properties? events and methods used in cell editing are a sub/set o# those o# the parent grid? and
described below
)roperties
These properties are speci#ic #or cell editing and should be set in grid options
cellEdit boolean
Enables "disables# cell editing. 1hen this option is set to true)
on(electIow event can not be used) and hovering is disabled "when
mouseover on the rows#.
*alse
cellsubmit string
6etermines where the contents o* the cell are saved - can have two
values2 8remote8 or 8client/rray8.
5* remote the content is immediately saved to the server using the
cellurl property) via aja,. The rowid and the cell content are added to
the url as name2value pairs. Hor e,ample) i* we save the cell named
mycell)@id2 rowid) mycell2 cellvalueA is added to the url.
5* 8client/rray8) no aja, request is made and the content o* the
changed cell can be obtained via the method get7hanged7ells
remote
cellurl string the url where the cell is to be saved null
aja,7ellOptio
ns
object
This option allow to set global aja, settings *or the cell editiing when
we save the data to the server. &ote that with this option is possible
to overwrite all current aja, setting in the save request including the
complete event.
empty
object
6vents
These events are related to cell editing and should be used in grid options,
Many o# the #ollowing events use the parameters de#ined here2
rowid / is the id o# the row
cellname is the name o# the cell (name #rom colModel)
value / the value o# the cell
iRow / the inde1 o# the row (do not mi1 with rowid)
i0ol / the inde1 o# the column
Event Parameters Description
a*terEdit7ell
rowid) cellname)
value) iIow) i7ol
applies only to a cell that is editableC this event *ires a*ter the edited
cell is edited - i.e. a*ter the element is inserted into the 6OM
a*ter(ave7ell
rowid) cellname)
value) iIow) i7ol
applies only to a cell that is editableC this event *ires a*ter the cell
has been success*ully saved. This is the ideal place to change
other content.
a*ter(ubmit7ell
serverresponse)
rowid) cellname)
value) iIow) i7ol
applies only to a cell that is editableC this event Hires a*ter the cell
and other data is posted to the server (hould return array o* type
Esuccess"boolean#)messageF when return Etrue)==F all is o0 and the
cellcontent is saved E*alse)=Error message=F then a dialog appears
with the <Error message= and the cell content is not saved.
servereresponse is the response *rom the server. To use this we
should use serverresponse.responseTe,t to obtain the te,t
message *rom the server.
be*oreEdit7ell
rowid) cellname)
value) iIow) i7ol
applies only to a cell that is editableC this event *ires be*ore editing
the cell.
be*ore(ave7ell
rowid) cellname)
value) iIow) i7ol
applies only to a cell that is editableC this event *ires be*ore
validation o* values i* any. This event can return the new value
which value can replace the edited one
be*ore(ave7ell 2 *unction"rowid)celname)value)iIow)i7ol# @
i*" someLcondition #
@ return <new value=C A
A
The value will be replaced with <new value=
be*ore(ubmit7
ell
rowid) cellname)
value) iIow) i7ol
applies only to a cell that is editableC this event *ires be*ore submit
the cell content to the server "valid only i* cellsubmit 2 8remote8#.
7an return new array that will be posted to the server.
be*ore(ubmit7ell 2 *unction"rowid)celname)value)iIow)i7ol# @
i*" someLcondition # @
return @name$2value$)name?2value?A
A
else
@ return @A A
A
The returned array will be added to the cellurl posted data.
error7ell
serverresponse)
status
*ires i* there is a server errorC servereresponse is the response
*rom the server. To use this we should apply
serverresponse.responseTe,t to obtain the te,t message *rom the
server. status is the status o* the error. 5* not set a modal dialog
apper.
*ormat7ell
rowid) cellname)
value) iIow) i7ol
applies only to a cell that is editableC this event allows *ormatting
the cell content be*ore editing) and returns the *ormatted value
on(elect7ell
rowid) celname)
value) iIow) i7ol
applies only to cells that are not editableC *ires a*ter the cell is
selected
serialiMe7ell6at
a
postdata
5* set this event can serialiMe the data passed to the aja, request
when we save a cell. The *unction should return the serialiMed data.
This event can be used when a custom data should be passed to
the server - e.g - J(O& string) QML string and etc. To this event is
passed the data which will be posted to the server
4elow is the order o# which the events are called when the cellsubmit option is .remote.
i# a cell is editable then
&, #ormat0ell / #ormat and the value o# the cell can be changed be#ore editing
%, be#ore6dit0ell
7, a#ter6dit0ell / a#ter the input element is created
9, be#ore5ave0ell
$, be#ore5ubmit0ell
i# the submit is success#ully
<, a#ter5ubmit0ell
R, a#ter5ave0ell
else
<, error0ell
else i# the cell is not editable
&, on5elect0ell
*# the cellsubmit is .client(rray. then
i# a cell is editable then
&, #ormat0ell / #ormat and the value o# the cell can be changed be#ore editing
%, be#ore6dit0ell
7, a#ter6dit0ell / a#ter the input element is created
9, be#ore5ave0ell
$, be#ore5ubmit0ell
<, a#ter5ave0ell
else i# the cell is not editable
&, on5elect0ell
Methods
(ll o# the methods below should be applied to the j+rid object and all o# them return the same object,
Method Parameters Description
edit7ell
iIow) i7ol)
edit
edit a cell with the row inde, iIow" do not mi, with rowid# in inde, column
i7ol. 5* the edit is set to *alse the cell is just selected and not edited. 5* set
to true the cell is selected and edited.
get7hanged7e
lls
method
Ieturns an array o* the changed cells depending on method "string)
de*ault 8all8#. 1hen 8all8 this method returns all the changed rowsC when
8dirty8 returns only the changed cells with the id o* the row
restore7ell iIow) i7ol
restores the edited content o* cell with the row inde, iIow" do not mi,
with rowid# in inde, column i7ol
save7ell iIow) i7ol
saves the cell with the row inde, iIow" do not mi, with rowid# in inde,
column i7ol
-otes
&ow is the data organi'ed
!hen the cell is edited and the input elements is created we set the #ollowing rules2
The id o# the editable cell element is constructed as .iRow@." the name #rom the colModel
array / where the iRow is the inde1 o# the row (not rowid) 61ample i# we edit cell with inde1'%F
and editable element has name .myname. (#rom colModel) then the id becomes %F@myname,
The name o# the editable element is constructed #rom the name o# the colModel array /
property / name
(hat is posted to the ser)er*
!hen the data is posted to the server we construct object BC that contain2
the name2value pair where the name is the name o# the input element represented in the cell
additionally we add a pair id2rowid where the rowid is the id o# the row
i# the returned data #rom be#ore5ubmit0ell event is not empty we e1tend this data with the
posted data,
*nline 6diting
*nline editing is a +uicA way to update database in#ormation by maAing changes directly in the row o#
the grid? as seen in the image below2
To use *nline 6diting? users select a row with the mouse, *n response? j+rid converts each editable
#ield to a data entry cell? as seen in the -ame and )rice #ields above, 0ells that aren.t editable? such
as the *: #ield above? don.t change appearance and remain read/only, !hether an individual column
is editable or read/only is controlled by setting the attribute in the 0olModel,
!hen #inished? users hit the enter Aey to send the data to the server,
5o#tware Re+uirement S *nstallation
*n order to use this #unctionality? maAe sure you put a checA marA by the *nline 6diting and 0ommon
modules when you downloaded j+rid, ;or more in#ormation re#er to :ownload,
-ote to :evelopers / 5ource code can be #ound in the grid,inlinedit,js #ile? located in the src directory,
The methods used in inline editing are a sub/set o# those o# the parent grid, They are described
below,
Methods
;or inline editing? we have three additional methods (o# the rid ()*) available2
editRow
saveRow
restoreRow
These methods can be called? o# course? only on an already/constructed grid? #rom a button clicA or
#rom an event o# the grid itsel#2
61maple2
...
on?eectBo0! function(id){
i;(id EE id]==ast?e){
jQuery("#grid_id").restoreBo0(ast?e)<
ast?e=id<
2
jQuery("#grid_id").editBo0(id% true)<
2%
...
2)<
*n this e1ample? i# another was row being edited and has not yet been saved? the original data will be
restored and the row closed be#ore opening the currently/selected row #or editing (where last5el
was previously de#ined as a var),
*# you want to save instead to restore the editing you can call saveRow in place o# restoreRow,
edit+ow
0alling conventions2
jQuery("#grid_id").editBo0(ro0id% Geys% onedit;unc% succes;unc% ur% e#traparam% a;tersa+e;unc%error;unc% a;terrestore;unc)<
or when we use the new ()*
jQuery("#grid_id").jqGrid("editBo0"%ro0id% Geys% onedit;unc% succes;unc% ur% e#traparam% a;tersa+e;unc%error;unc%
a;terrestore;unc)<
where
grid@id is the already constructed grid
rowid2 the id o# the row to edit
Aeys2 when set to true we can use P6nterQ Aey to save the row and P6scQ to cancel editing,
onedit#unc2 #ires a#ter success#ully accessing the row #or editing? prior to allowing user access
to the input #ields, The row.s id is passed as a parameter to this #unction,
The row can not be edited i# it has class .not/editable/row. instead that in colModel some #ields can
have a property editable set to true,
!hen set in the editRow the parameter #unction onedit#unc should not be enclosed in +uotes and not
entered with () / show just the name o# the #unction,
*# Aeys is true? then the remaining settings 3 succes#unc? url? e1traparam? a#tersave#unc? error#unc and
a#terrestore#unc / are passed as parameters to the saveRow method when the P6nterQ Aey is pressed
(saveRow does not need to be de#ined as j+rid calls it automatically), ;or more in#ormation see
saveRow method below,
!hen this method is called on particular row? j+rid reads the data #or the editable #ields and
constructs the appropriate elements de#ined in edittype and editoptions
sa)e+ow
5aves the edited row,
0alling convention2
jQuery("#grid_id").sa+eBo0(ro0id% succes;unc% ur% e#traparam% a;tersa+e;unc%error;unc% a;terrestore;unc)<
jQuery("#grid_id").jqGrid("sa+eBo0"%ro0id% succes;unc% ur% e#traparam% a;tersa+e;unc%error;unc% a;terrestore;unc)<
where
rowid2 the id o# the row to save
succes#unc2 i# de#ined? this #unction is called immediately a#ter the re+uest is success#ul, This
#unction is passed the data returned #rom the server, :epending on the data #rom serverL this
#unction should return true or #alse,
url2 i# de#ined? this parameter replaces the editurl parameter #rom the options array, *# set to
.client(rray.? the data is not posted to the server but rather is saved only to the grid (presumably
#or later manual saving),
e1traparam2 an array o# type name2 value, !hen set these values are posted along with the
other values to the server,
a#tersave#unc2 i# de#ined? this #unction is called a#ter the data is saved to the server,
)arameters passed to this #unction are the rowid and the response #rom the server re+uest,
error#unc2 i# de#ined? this #unction is called a#ter the data is saved to the server, )arameters
passed to this #unction are the rowid and the the response #rom the server re+uest,
a#terrestore#unc i# de#ined? this #unction is called in restoreRow (in case the row is not saved
with success) method a#ter restoring the row, To this #unction we pass the rowid
!hen set in the saveRow the parameters #unctions should not be enclosed in +uotes and not entered
with () / show just the name o# the #unction,
61cept when url (or editurl) is .client(rray.? when this method is called? the data #rom the particular row
is )G5T6: to the server in #ormat name2 value? where the name is a name #rom colModel and the
value is the new value, j+rid also adds? to the posted data? the pair id2 rowid, ;or e1ample?
jQuery("#grid_id").sa+eBo0("ro0id"% false)<
will save the data to the grid and to the server? while
jQuery("#grid_id").sa+eBo0("ro0id"% false% "cient-rray")<
will save the data to the grid without an aja1 call to the server,
jQuery("#grid_id").jqGrid("sa+eBo0"%"ro0id"% false)<
jQuery("#grid_id").jqGrid("sa+eBo0"%"ro0id"% false% "cient-rray")<
(dditionally to this we have other two options which can be set in grid options,
aja,IowOption
s
object
This option allow to set global aja, settings *or the row editiing
when we save the data to the server. &ote that with this option is
possible to overwrite all current aja, setting in the save request
including the complete event.
empty
object
serialiMeIow6a
ta
postdata
5* set this event can serialiMe the data passed to the aja, request
when we save a row. The *unction should return the serialiMed data.
This event can be used when a custom data should be passed to
the server - e.g - J(O& string) QML string and etc. To this event is
passed the data which will be posted to the server
null
restore+ow
This method restores the data to original values be#ore the editing o# the row,
0alling convention2
jQuery("#grid_id").restoreBo0(ro0id% a;terrestore;unc)<
jQuery("#grid_id").jqGrid("restoreBo0"%ro0id% a;terrestore;unc)<
where
rowid is the row to restore
a#terrestore#unc i# de#ined this #unction is called in a#ter the row is restored, To this #unction
we pas the rowid
-otes
&ow is the data organi'ed
!hen the row is edited and the input elements are created we set the #ollowing rules2
the table row becomes attribute editable'&
the array savedRow (option in the grid) is #illed with the values be#ore the editing, This is a
name2value pair array with additional pairid:rowid
Hidden #ields are not included
The id o# the editable element is constructed as .rowid@." the name #rom the colModel array,
61ample i# we edit row with id'&F and the only editable element is .myname. (#rom colModel) then
the id becomes &F@myname,
property / name
a#ter the row is saved or restored the editable attribute is set to F and the savedRow item
with id'rowid is deleted
(hat is posted to the ser)er*
!hen the data is posted to the server we construct an object BC that contain(s)2
the name2value pair where the name is the name o# the input element represented in the row
(this is #or all input elements)
additionally we add a pair id2rowid where the rowid is the id o# the row
i# the e1traparam parameter is not empty we e1tend this data with the posted data
61ample
...
<$ead>
jQuery(document).ready(function(){
$ar astse9
jQuery("#ro0ed1").jqGrid({
datatype! "oca"%
$eig$t! 914%
co(ames!)"*, (um7er"%"(ame"% "?tocG"% "?$ip +ia"%"(otes".%
co/ode!)
{name!"id"%inde#!"id"% 0idt$!34% sorttype!"int"% edita7e! true2%
{name!"name"%inde#!"name"% 0idt$!614%edita7e! true% editoptions!{siCe!"94"%ma#engt$!":4"22%
{name!"stocG"%inde#!"stocG"% 0idt$!L4% edita7e! true% edittype!"c$ecG7o#"%editoptions! {+aue!">es!(o"22%
{name!"s$ip"%inde#!"s$ip"% 0idt$!34% edita7e! true% edittype!"seect"% editoptions!
{+aue!"K&!Ked&#<*(!*n'ime<'(!'('<-B!-B-/&P"22%
{name!"note"%inde#!"note"% 0idt$!944% sorta7e!false%edita7e! true%edittype!"te#tarea"% editoptions!{ro0s!"9"%cos!"64"22
.%
on?eectBo0! function(id){
i;(id EE id]==astse9){
jQuery("#ro0ed1").restoreBo0(astse9)<
jQuery("#ro0ed1").editBo0(id%true)<
astse9=id<
2
2%
editur! "ser+er.p$p"%
caption! "*nput 'ypes"
2)<
$ar mydata9 = )
{id!"69:O1"%name!",esGtop Momputer"%note!"note"%stocG!">es"%s$ip!"Ked&#"2%
{id!"9:O1L"%name!"8aptop"%note!"8ong te#t "%stocG!">es"%s$ip!"*n'ime"2%
{id!":O1L\"%name!"8M, /onitor"%note!"note:"%stocG!">es"%s$ip!"'('"2%
{id!"O1L\5"%name!"?peaGers"%note!"note"%stocG!"(o"%s$ip!"-B-/&P"2%
{id!"1L\53"%name!"8aser Urinter"%note!"note9"%stocG!">es"%s$ip!"Ked&#"2%
{id!"L\534"%name!"Uay ?tation"%note!"note:"%stocG!"(o"% s$ip!"Ked&#"2%
{id!"\L1O:"%name!"/o7ie 'eep$one"%note!"note"%stocG!">es"%s$ip!"-B-/&P"2%
{id!"5\L1O"%name!"?er+er"%note!"note9"%stocG!">es"%s$ip!"'('"2%
{id!"35\L1"%name!"/atri# Urinter"%note!"note:"%stocG!"(o"% s$ip!"Ked&#"2
.<
;or($ar i=4<i<mydata9.engt$<iYY)
jQuery("#ro0ed1").addBo0,ata(mydata9)i..id%mydata9)i.)<
2)<
</script>
</$ead>
<7ody>
<ta7e id="ro0ed1" cass="scro"></ta7e>
</7ody>
</$tm>
!ill produce this2
;orm 6diting
j+rid supports creating a #orm on the #ly to view? add? edit? delete? or search grid data, ( screenshot
o# an (dd Record #orm is shown below2
*t.s possible to use a combination o# Modal 4o1es and *nline 6diting in your application, (#ter all? *nline
editing can only be used to edit an e1isting row and can.t be used to search? delete? or add data,
However? it.s not recommended to use both *nline 6diting and Modal 4o1 6diting because one will
inter#ere with the other when both select the same row, (*n this scenario? when you select a row #or
editing then clicA the edit model bo1? you.ll get the *: names o# the cells in the bo1 rather than the
actual cell data contents,
The methods listed in the table below are included in the navrid (navigator method),
5o#tware Re+uirements S *nstallation
To use this module? you should marA the 0ommon? ;orm 6diting and optional j+Modal and j+:nR
plugins when you download the grid, ;or more in#ormation re#er to :ownload,
-ote ;or :evelopers / this is the grid,common,js? grid,#ormedit,js? j+Modal,js and j+:nR,js in the src
directory,
Methods
Methods used in #orm editing are a sub/set o# those o# the parent grid? and described below,
(ll the properties and events o# the methods are not a part o# j+rid? but a part o# options passed as
parameters to the method,
search,rid
;or more in#ormation about this method re#er to 5inge 5earching and (dvanced 5earching
edit,rid+ow
This method creates a #orm via modal dialog #or editing a particular row #rom the grid,
This method uses 0ommon 6diting )roperties #rom colModel and editurl option #rom j+rid,
0alling convention2
jQuery("#grid_id").editGridBo0( ro0id% properties )<
jQuery("#grid_id").jqGrid("editGridBo0"% ro0id% properties )<
!here
grid@id2 the id o# the parent grid
properties2 an array o# name2 value pairs? including any o# the #ollowing properties or events,
The method uses the #ollowing properties #rom language #ile2
^.jgrid = {
...
edit ! {
7?u7mit! "?u7mit"%
7Mance! "Mance"%
7Mose! "Mose"%
7>es ! ">es"%
7(o ! "(o"%
7&#it ! "Mance"%
...
2%
...
2
These options can be overwritten when passed as options to the method, !hen passed to the
method we should use by e1ample b5ubmit 2 5ubmit and not K,jgrid,edit,b5ubmit 2 5ubmit
!hen called the constructed #orm can looA liAe this
-roperties
Property Description Default
top
the initial top position o* modal dialog. The de*ault value o* % mean the
top position *rom the upper le*t corner o* the grid. 1hen jqModal option
is true "see below# and jqModal plugin is present any value di**erent
*rom % mean the top position *rom upper le*t corner o* the window.
%
le*t
the initial le*t position o* modal dialog. The de*ault value o* % mean the
le*t position *rom the upper le*t corner o* the grid. 1hen jqModal option
*rom % mean the le*t position *rom upper le*t corner o* the window.
%
width the width o* con*irmation dialog !%%
height the entry height o* con*irmation dialog auto
dataheight
the parameter control the scrolling content - i.e between the modal
header and modal *ooter.
auto
modal
determines i* the dialog will be modal. /lso wor0s only i* jqModal plugin
is present
*alse
drag
6etermines i* the dialog is dragabale. 1or0s only i* jq6nI plugin is
present or i* the dragable widget is present *rom jPuery 35
true
resiMe
determines i* the dialog can be resiMed. 1or0s only is jq6nI plugin is
available or resiMable widget is present *rom jPuery 35
true
url url where to post data. 5* set) replaces the editurl null
mtype
6e*ines the type o* request to ma0e "<PO(T= or <JET=# when data is
sent to the server
PO(T
edit6ata an array used to add content to the data posted to the server empty
recreateHorm
when set to true the *orm is recreated every time the dialog is activeted
with the new options *rom colModel "i* they are changed#
*alse
jqModal
5* set to true uses jqModal plugin "i* present# to creat the dialogs. 5* set
to true and the plugin is not present jqJrid uses its internal *unction to
create dialog
true
addedrow
7ontrols where the row just added is placed2 8*irst8 at the top o* the gird)
8last8 at the bottom. 1here the new row is to appear in its natural sort
order) set reload/*ter(ubmit2 true
*irst
topin*o
1hen set this in*ormation is placed just a*ter the modal header as
additional row
empty string
bottomin*o
1hen set this in*ormation is placed just a*ter the buttons o* the *orm as
additional row
empty string
saveicon
array. 6etermines the icon o* the submit button. The de*ault value is
Etrue)=le*t=)=ui-icon-dis0=F. The *irst item enables>disables the icon. The
second item tells where to put the icon to le*t or to right o* the te,t. The
third item corresponds to valid ui icon *rom theme roller
closeicon
/rray. 6etermines the icon o* the cancel button. The de*ault values are
Etrue)=le*t=)=ui-icon-close=F. Hor description o* these see saveicon
save0ey
array. 6etermines the possibility to save the *orm with pressing a
certain 0ey.The *irst item enables>disables saving with pressing certain
0ey. The second item corresponds to 0ey code *or saving. 5* enabled
the de*ault value *or saving is EEnterF.
&ote that this binding should be used *or both adding and editing a row.
(ince the binding is *or the *orm) there is no possibility to have one 0ey
in add and another in edit mode.
E*alse)$!F
nav0eys
array. This option wor0s only in edit mode and add 0eyboard navigation)
which allow us to navigate through the records while in *orm editing
pressing certain 0eys. The de*ault state is disabled. The *irst item
enables>disables the navigation. The second item corresponds to
reccord up and by de*ault is the the 0ey code *or 3p 0ey. The third item
corresponds to reccord down and by de*ault is the 0ey code *or 6own
0ey
E*alse)!R)S%F
chec0On(ubmit This option wor0 only in editing mode. 5* (et to true this option will wor0
only when a submit button is clic0ed and i* any data is changed in the
*orm. 5* the data is changed a dilog message appear where the user is
as0ed to con*irm the changes or cancel it. Pressing cancel button o* the
new dialog will return to the *orm) but does not set the values to its
*alse
original state.
chec0On3pdate
This option is applicable in add and edit mode. 1hen this option is set
to true the behaviour as *ollow2
when something is changed in the *orm and the user clic0 on 7ancel
button) navigator buttons) close button "on upper right corner o* the
*orm#) in overlay "i* available# or press Esc 0ey "i* set# a message bo,
appear as0ing the user to save the changes) not to save the changes or
go bac0 in the grid cancel all changes "this will close the modal *orm#
*alse
close/*ter/dd when add mode) close the dialog a*ter add record *alse
clear/*ter/dd when add mode) clear the data a*ter adding data true
close/*terEdit when in edit mode) close the dialog a*ter editing *alse
reload/*ter(ubm
it
reload grid data a*ter posting true
closeOnEscape
1hen set to true the modal window can be closed with E(7 0ey *rom
the user.
*alse
aja,EditOptions
This option allow to set global aja, settings *or the *orm editiing when
we save the data to the server. &ote that with this option is possible to
overwrite all current aja, setting in the save request including the
complete event.
empty
object
viewPager4utto
ns
This option enable or disable the appearing o* the previous and ne,t
buttons "pager buttons# in the *orm
true
)ents
Event Description
a*terclic0Pg4utto
ns
This event can be used only when we are in edit mode and the navigator buttons
are enabledC it *ires a*ter the data *or the new row is loaded *rom the grid) allowing
modi*ication o* the data or *orm be*ore the *orm is redisplayed.
a*terclic0Pg4uttons 2 *unction"whichbutton) *ormid) rowid# @KA
where
whichbutton is either 8prev8 or 8ne,t8
formid is the id o* the *orm
rowid is the id o* the current row
a*ter7omplete
This event *ires immediately a*ter all actions and events are completed and the row
is inserted or updated in the grid.
a*ter7omplete 2 *unction "response) postdata) *ormid# @KA
where
response is the data returned *rom the server "i* any#
postdata an array) is the data sent to the server
a*ter(howHorm *ires a*ter showing the *ormC receives as Parameter the id o* the constructed *orm.
a*ter(howHorm 2 *unction "*ormid# @KA
a*ter(ubmit
*ires a*ter response has been received *rom server. Typically used to display status
*rom server "e.g.) the data is success*ully saved or the save cancelled *or server-
side editing reasons#. Ieceives as parameters the data returned *rom the request
and an array o* the posted values o* type id;value$)value?.
1hen used this event should return array with the *ollowing items Esuccess)
message) newLidF
where
success is a boolean value i* true the process continues) i* *alse a
error message appear and all other processing is stopped. "message is ignored i*
success is true#.
new_id can be used to set the new row id in the grid when we are in add mode.
a*ter(ubmit 2 *unction"response) postdata#
@
K
return Esuccess)message)newLidF
A
be*ore7hec0+alu
es
This event *ires be*ore chec0ing the values "i* chec0ing is de*ined in colModel via
editrules option#.
To this event we pass the *ollowing parameters2
$. posdata - the array o* values which should be chaced in name2value pair) where
the name is the name *rom colModel.
?. formid - the *orm id object.
!. mode - the current mode in which we are - can be add or edit.
5n all cases the event should return object in name value pair which then will be
posted to the server.
be*ore5nit6ata
*ires be*ore initialiMe the new *orm data. Ieceives) as parameter) the id o* the
constructed *orm.
be*ore5nit6ata 2 *unction"*ormid# @KA
be*ore(howHorm
*ires be*ore showing the *orm with the new dataC receives as Parameter the id o* the
constructed *orm.
be*ore(howHorm 2 *unction"*ormid# @KA
be*ore(ubmit
*ires be*ore the data is submitted to the server. Iecieves as parameter the posted
data array and the *ormid.
be*ore(ubmit 2 *unction"postdata) *ormid# @
K
returnEsuccess)messageFC
A
1hen de*ined this event should return array with the *ollowing values
success boolean indicating i* the proccess should continue "true# or a error
"*alse# message should appear to the user
onclic0Pg4uttons This event can be used only when we are in edit modeC it *ires immediately a*ter the
previous or ne,t button is clic0ed) be*ore leaving the current row) allowing wor0ing
with "e.g.) saving# the currently loaded values in the *orm.
onclic0Pg4uttons 2 *unction "whichbutton) *ormid) rowid# @KA
where
whichbutton is either 8prev8 or 8ne,t8
rowid is the id o* the current row
onclic0(ubmit
*ires a*ter the submit button is clic0ed and the postdata is constructed. Parameters
passed to this event are2 a options array o* the method and the posted data array.
The event should return array o* type @A which e,tends the postdata array.
onclic0(ubmit 2 *unction"params) posdata# @
K
return @addLdataA
A
on5nitialiMeHorm
*ires only once when creating the data *or editing and adding. Ieceives) as
parameter) the id o* the constructed *orm.
on5nitialiMeHorm 2 *unction"*ormid# @KA
on7lose
This event is called just be*ore closing the *orm and when a close icon is clic0ed) a
cancel button is clic0ed) E(7 0ey is pressed or clic0 on overlay "i* jqModal is
present#. The event can return "optionally# true or *alse. 5* the return value is true
the *orm is closed) i* *alse the *orm does not close. 5* nothing is returned the *orm is
closed
errorTe,tHormat
The event "can# *ire when error occurs *rom the aja, call and can be used *or better
*ormatting o* the error messages. To this event is passed response *rom the server.
The event should return single message "not array#) which then is displayed to the
user.
serialiMeEdit6ata
5* set this event can serialiMe the data passed to the aja, request when we save a
*orm data. The *unction should return the serialiMed data. This event can be used
when a custom data should be passed to the server - e.g - J(O& string) QMLstring
and etc. To this event is passed the data which will be posted to the server
&ow is the $orm constructed
!hen the #orm is constructed we set the #ollowing rules2
Hidden #ields are included in the #orm with the display2none property o# the table row
The id o# the editable element is constructed #rom the name o# the colModel array / propery /
name
propery / name
;or ease in manipulating the elements in an edit #orm? every table row in the #orm that holds
the data #or the edit has a id which is a combination o# tr@ " name (#rom colmodel), 61ample2
<form ....>
<table>
<tr id="tr_my;ied">
<td> Maption</td> <td>edited eement named% in co/ode% as "my;ied"</td>
</tr> ...
</table>
</form>
This allow us to easily show or hide some table rows depending on conditions using be#ore5how;orm
event
(hat is posted to the ser)er
!hen we are in editing mode the data that is posted to the server is object BC that contain2
the name2value pair where the name is the name o# the input element represented in the #orm
additionally we add a pair id2rowid where the rowid is the id o# the edited row
additionally we add a pair oper2edit to indicate the edit mode
i# the edit:ata object is not empty we e1tend this data with the posted data
i# the returned object #rom onclicA5ubmit event is not empty we e1tend the posted data with
this object
.dding +ow
The editridRow method is also used to add data to the server? by passing new as the rowid,
This method uses 0ommon 6diting )roperties #rom colModel and editurl option #rom j+rid,
0alling convention2
jQuery("#grid_id").editGridBo0( "ne0"% properties )<
or with the new ()*
jQuery("#grid_id").jqGrid("editGridBo0% "ne0"% properties )<
!here
^.jgrid = {
...
edit ! {
7?u7mit! "?u7mit"%
7Mance! "Mance"%
7Mose! "Mose"%
7>es ! ">es"%
7(o ! "(o"%
7&#it ! "Mance"%
...
2%
...
2
method we should use by e1ample b5ubmit 2 5ubmit and not K,jgrid,edit,b5ubmit 2 5ubmit
The options are the same as those in editng row / 5ee above,
&ow is the $orm constructed
The id o# the editable element is constructed #rom the name o# the colModel array / propery /
name
propery / name
the data #or the edit has a id which is a combination o# tr@ " name (#rom colmodel), 61ample2
<form ....>
<table>
<tr id="tr_my;ied">
<td> Maption</td> <td>edited eement named% in co/ode% as "my;ied"</td>
</tr> ...
</table>
</form>
This allow us to easily show or hide some table rows depending on conditions using be#ore5how;orm
event
!hen we are in editing mode the data that is posted to the server is object BC that contain2
the name2value pair where the name is the name o# the input element represented in the #orm
additionally we add a pair id2@empty where the @empty indicates that new row is inserted
additionally we add a pair oper2add to indicate the add mode
i# the edit:ata object is not empty we e1tend this data with the posted data
this object
)iew,rid+ow
This method is similar to the editridRow method e1cept that the #ields are not editable and we do not
have any events attached to the #orm,
0alling convention2
jQuery("#grid_id").+ie0GridBo0( ro0id% properties )<
jQuery("#grid_id").jqGrid("+ie0GridBo0"% ro0id% properties )<
!here
^.jgrid = {
...
+ie0 ! {
caption! "Nie0 Becord"%
7Mose! "Mose"
2%
...
-roperties
top
the initial top position o* modal dialog. The de*ault value o* % mean the
top position *rom the upper le*t corner o* the grid. 1hen jqModal option
*rom % mean the top position *rom upper le*t corner o* the window.
%
le*t the initial le*t position o* modal dialog. The de*ault value o* % mean the
le*t position *rom the upper le*t corner o* the grid. 1hen jqModal option
%
*rom % mean the le*t position *rom upper le*t corner o* the window.
dataheight
the parameter control the scrolling content - i.e between the modal
header and modal *ooter.
auto
modal
determines i* the dialog will be modal. /lso wor0s only i* jqModal plugin
is present
*alse
drag
6etermines i* the dialog is dragabale. 1or0s only i* jq6nI plugin is
present or i* the dragable widget is present *rom jPuery 35
true
resiMe
true
jqModal
5* set to true uses jqModal plugin "i* present# to creat the dialogs. 5* set to
true and the plugin is not present jqJrid uses its internal *unction to
create dialog
true
topin*o
1hen set this in*ormation is placed just a*ter the modal header as
additional row
empty
string
bottomin*o
1hen set this in*ormation is placed just a*ter the buttons o* the *orm as
additional row
empty
string
closeicon
Etrue)=le*t=)=ui-icon-close=F. Hor description o* these see saveicon
nav0eys
array. This option wor0s only in edit mode and add 0eyboard navigation)
which allow us to navigate through the records while in *orm editing
pressing certain 0eys. The de*ault state is disabled. The *irst item
enables>disables the navigation. The second item corresponds to
reccord up and by de*ault is the the 0ey code *or 3p 0ey. The third item
corresponds to reccord down and by de*ault is the 0ey code *or 6own
0ey
E*alse)!R)S%
F
closeOnEscape
1hen set to true the modal window can be closed with E(7 0ey *rom
the user.
*alse
labelswidth
(ince we construct the view with table element it is di**icult to calculate)
in this case) how much width is needed *or the labels. 6epending on the
needs this value can be increased or decreased
!%T
viewPager4utto
ns
This option enable or disable the appearing o* the previous and ne,t
buttons "pager buttons# in the *orm
true
)ents
Event Description
on7lose
cancel button is clic0ed) E(7 0ey is pressed or clic0 on overlay "i* jqModal is present#.
The event can return "optionally# true or *alse. 5* the return value is true the *orm is
closed) i* *alse the *orm does not close. 5* nothing is returned the *orm is closed
be*ore(howHor
m
constructed *orm.
-o input elements are created
The id o# the viewed element is constructed #rom v@ " the name o# the colModel array /
propery / name
the data #or the edit has a id which is a combination o# trv@ " name (#rom colmodel), 61ample2
<form ....>
<table>
<tr id="tr+_my;ied">
<td> Maption</td> <td id="+_my;ied"><span>content o;"my;ied"</span></td>
</tr> ...
</table>
</form>
del,rid+ow
!ith this method we can per#orm a delete operation at server side,
This method uses colModel and editurl parameters #rom j+rid
0alling convention2
jQuery("#grid_id").deGridBo0( ro0_id_s% options )<
jQuery("#grid_id").jqGrid("deGridBo0"% ro0_id_s% options )<
!here2
row@id@s2 the id o# the row(s) to deleteL can be a single value or list o# ids separated by
comma
options2 an array o# name2 value pairs? including any o# the #ollowing properties or events,
^.jgrid = {
...
de ! {
caption! ",eete"%
msg! ",eete seected record(s)Q"%
7?u7mit! ",eete"%
7Mance! "Mance"
2%
...
method we should use by e1ample b5ubmit 2 :elete and not K,jgrid,del,b5ubmit 2 :elete
-roperties
top
the initial top position o* modal dialog. The de*ault value o* % mean the top
position *rom the upper le*t corner o* the grid. 1hen jqModal option is true
"see below# and jqModal plugin is present any value di**erent *rom % mean
the top position *rom upper le*t corner o* the window.
%
le*t
the initial le*t position o* modal dialog. The de*ault value o* % mean the le*t
position *rom the upper le*t corner o* the grid. 1hen jqModal option is true
"see below# and jqModal plugin is present any value di**erent *rom % mean
the le*t position *rom upper le*t corner o* the window.
%
dataheight
the parameter control the scrolling content - i.e between the modal header
and modal *ooter.
auto
modal
determines i* the dialog will be modal. /lso wor0s only i* jqModal plugin is
present
*alse
drag
6etermines i* the dialog is dragabale. 1or0s only i* jq6nI plugin is present
or i* the dragable widget is present *rom jPuery 35
true
resiMe
true
url url where to post data. 5* set) replaces the editurl null
mtype
6e*ines the type o* request to ma0e "<PO(T= or <JET=# when data is sent
to the server
PO(T
del6ata an array used to add content to the data posted to the server empty
jqModal
5* set to true uses jqModal plugin "i* present# to creat the dialogs. 5* set to
true and the plugin is not present jqJrid uses its internal *unction to create
dialog
true
delicon
array. 6etermines the icon o* the submit button. The de*ault value is
Etrue)=le*t=)=ui-icon-delete=F. The *irst item enables>disables the icon. The
second item tells where to put the icon to le*t or to right o* the te,t. The
third item corresponds to valid ui icon *rom theme roller
cancelicon
Etrue)=le*t=)=ui-icon-cancel=F. Hor description o* these see delicon
reload/*ter(ubm
it
reload grid data a*ter posting true
closeOnEscape
1hen set to true the modal window can be closed with E(7 0ey *rom the
user.
*alse
aja,6elOptions
This option allow to set global aja, settings *or the *orm editiing when we
delete the data to the server. &ote that with this option is possible to
overwrite all current aja, setting in the save request including the complete
event.
empty
object
)ents
Event Description
a*ter7omplete
This event *ires immediately a*ter all actions and events are completed and the row is
inserted or updated in the grid.
a*ter7omplete 2 *unction "response) postdata) *ormid# @KA
where
response is the data returned *rom the server "i* any#
postdata an array) is the data sent to the server
a*ter(howHorm
*ires a*ter showing the *ormC receives as Parameter the id o* the constructed *orm.
a*ter(howHorm 2 *inction "*ormid# @KA
a*ter(ubmit *ires a*ter response has been received *rom server. Typically used to display status
*rom server "e.g.) the data is success*ully deleted or the delete cancelled *or server-
side reasons#. Ieceives as parameters the data returned *rom the request and an
array o* the posted values o* type id;value$)value?.
1hen used this event should return array with the *ollowing items Esuccess)
messageF
where
success is a boolean value i* true the process continues) i* *alse a
error message appear and all other processing is stoped.
a*ter(ubmit 2 *unction"response) postdata#
@
K
return Esucces)messageF
A
be*ore(howHor
m
constructed *orm.
be*ore(ubmit
*ires be*ore the data is submitted to the server. Iecieves as parameter the posted
data array and the *ormid.
be*ore(ubmit 2 *unction"postdata) *ormid# @
K
returnEsuccess)messageFC
A
1hen de*ined this event should return array with the *ollowing values
success boolean indicating i* the proccess should continue "true# or a error
"*alse# message should appear to the user
onclic0(ubmit
*ires a*ter the submit button is clic0ed and the postdata is constructed. Parameters
passed to this event is a options array o* the method. The event should return array o*
type @A which e,tends the postdata array.
onclic0(ubmit 2 *unction"params# @
K
return @addLdataA
A
on7lose
cancel button is clic0ed) E(7 0ey is pressed or clic0 on overlay "i* jqModal is present#.
The event can return "optionally# true or *alse. 5* the return value is true the *orm is
closed) i* *alse the *orm does not close. 5* nothing is returned the *orm is closed
errorTe,tHorma
t
The event "can# *ire when error occurs *rom the aja, call and can be used *or better
*ormatting o* the error messages. To this event is passed response *rom the server.
The event should return single message "not array#) which then is displayed to the
user.
!hen we are in delete mode the data that is posted to the server is object BC that contain2
the pair id2rowids where the roids can be a single value a value string separated with comma
in case o# multiple selection
additionally we add a pair oper2del to indicate the delete mode
i# the del:ata object is not empty we e1tend this data with the posted data
this object
,rid/oForm
This method does not have interaction with the user
0alling convention2
jQuery("#grid_id").Grid'oKorm( ro0id% ;ormid )<
or
jQuery("#grid_id").jqGrid("Grid'oKorm"% ro0id% ;ormid )<
!here
rowid2 the id o# the row
#ormid2 is the id o# the #orm
!hen called this method read the grid data with the id ' rowid and places the data #rom the grid to the
given #orm, i# the #orm element has a name which is e+ual o# those #rom colModel the value is placed
to the #orm,
Form/o,rid
This method does not have interaction with the user
0alling convention2
jQuery("#grid_id").Korm'oGrid( ro0id% ;ormid% mode% position )<
or
jQuery("#grid_id").jqGrid("Korm'oGrid"% ro0id% ;ormid% mode% position )<
!here
rowid2 the id o# the row
#ormid2 is the id o# the #orm
mode2 determines the mode, 0an be set or add, :e#ault is set, *# the mode is de#ined as set?
the record in the grid is updated with the new values #rom the #orm, !hen the mode is de#ined as
add the record is added to the grid,
position2 this parameter have sense only when the mode parameter is set to add, 0an be #irst
/ the record is inserted as #irst row in the grid or last / the record is inserted as last row in the grid,
!hen called this method does the opposite o# the ridTo;orm method / i,e, places the #orm data in
the grid i# the names matches,
5ubgrid
There are times when we need to be able to easily display (or edit) records that are the children o# a
selected record in the parent grid, !e would? o# course? want to show only those records that are the
children o# the selected record in the grid? never the children o# all records,
j+rid o##ers two ways o# handling child records2
a subrid
a grid as a subrid
*nstallation
*n order to use this module you should marA the 5ubgrid when you download the grid, ;or more
;or :evelopers / this is the grid,subgrid,js in the src directory,
)roperties
5ubrids use the #ollowing properties? events and methods o# the parent grid / i,e, you should set
these properties in the grid options
subJrid boolean
5* set to true this enables using a subgrid. 5* the subJrid is enabled
a additional column at le*t side is added to the basic grid. This
column contains a 8plus8 image which indicate that the user can
clic0 on it to e,pand the row. 4y de*ault all rows are collapsed.
*alse
subJridModel array This property) which describes the model o* the subgrid) has an
e**ect only i* the subJrid property is set to true. 5t is an array in
which we describe the column model *or the subgrid data. The
synta, is 2
subJridModel 2 E
@ name 2 E8nameL$8)8nameL?8)K)8nameLn8F)
width 2 EwidthL$)widthL?)K)widthLnF )
align 2 E8le*t8)8center8)K)8right8F )
params 2 EparamL$)K)paramLnF)
mapping2E8nameL$Lmap8)8nameL?Lmap8)K)8nameLnLmap8FA
1here
name: an array containing the labels o* the columns o* the subgrid.
width: an array containing the width o* the columns. This array
should have the same length as in name array.
align: an array containing the alignment o* the columns. The
values can be le*t) center or right. 5* omited the aliment is le*t.
params: an array in which we can add a name *rom main grid8s
colModel to pass as additional parameter to the subJrid3rl.
mapping: the parameter is used only when repeatitems in subgrid
is set to *alse. 1hen de*ined in this case we use the names *rom
this array to map it to the subgrid names. 5* not set and
repeatitems is *alse we use the name option.
subgridtype mi,ed
This option allow loading subgrid as a service. 5* not set) the
datatype parameter o* the parent grid is used. (ee the e,ample
below
null
subJrid1idth integer 6etermines the width o* the subJrid column i* subgrid is enabled. ?%
subJrid3rl string
This option has e**ect only i* subJrid option is set to true. This
option points to the *ile *rom which we get the data *or the subgrid.
jqJrid adds the id o* the row to this url as parameter. 5* there is a
need to pass additional parameters) use the params option in
subJridModel
empty
string
aja,(ubgridOptio
ns
object
This option allow to set global aja, settings *or the subgrid when
we request data. &ote that with this option is possible to overwrite
all current aja, setting in the subgrid request including the
complete event.
empty
object
*n order to con#igure the subgrid you will need to con#igure the subgrid item in 1mlReader or
jsonReader, The de#ault setting #or these are2
#mBeader ! {
...
su7grid! {
root! "ro0s"%
ro0! "ro0"%
repeatitems! true%
ce! "ce"
2
2
and a jsonReader
jsonBeader ! {
...
su7grid! {
root! "ro0s"%
repeatitems! true%
ce! "ce"
2
2
The mapping rules are the same as those in the basic grid, ;or more in#ormation re#er to Retrieving
:ata,
*n order to use correct subridType as service below is a simple code which shows how this can be
achieved2
...
su7gridtype! function(ro0idprm) {
jQuery.aja#({
ur!"ur_to_t$e_ser+ice"%
data!ro0idprm%
data'ype!"json"%
compete! function(jsondata%stat){
i;(stat=="success") {
$ar t$egrid = jQuery("#grid_id"))4.<
t$egrid.su7GridSson(e+a("("Yjsondata.response'e#tY")")%ro0idprm.id)<
2
2
2)<
2%
...
2)<
!here rowidprm is array that contains the id o# the row plus other parameters as re+uired to set
subridModel parameters and subrid=son is a method which is described below,
the use o# the variable thegrid
6vents
*n these events?
p*: is the uni+ue id o# the div element where we can put contents when subgrid is enabled?
id is the id o# the row
s)ost:ata / the data which is posted when a subgrid re+uest is made
Event
Parameter
s
Description
subJrid4e*oreE,pa
nd
p56) id
The event is raised just be*ore e,panding the grid. 1hen set) this
event should return true or *alse. 5* it returns *alse the subgrid row is
not e,panded and the subgrid is not opened.
subJridIowE,pand p56) id This event is raised when the subgrid is enabled and is e,ecuted
ed
when the user clic0s on the plus icon o* the grid. 7an be used to put
custom data in the subgrid.
subJridIow7olaps
ed
p56) id
This event is raised when the user clic0s on the minus icon. The
event should return true or *alseC when the returned value is *alse the
row can not be collapsed.
serialiMe(ubJrid6at
a
sPost6ata
5* set this event can serialiMe the data passed to the aja, request. The
*unction should return the serialiMed data. This event can be used
when a custom data should be passed to the server - e.g - J(O&
string) QML string and etc.
Methods
Method
Parameter
s
Returns Description
e,pand(ubgridIo
w
rowid
jqJrid
object
dynamically e,pand the subgrid row with the id ; rowid
collapse(ubJridI
ow
rowid
jqJrid
object
dynamically collapse the subgrid row with the id ; rowid
toggle(ubJridIo
w
rowid
jqJrid
object
dynamically toggle the subgrid row with the id ; rowid
subJridJson json) rowid *alse
/dd data in a subgrid row. json is a json object) rowid is the
id o* the row a*ter which the data will be added
subJridQml ,ml) rowid *alse
/dd data in a subgrid row. ,ml is a ,ml dom element) rowid
is the id o* the row a*ter which the data will be added
61ample
0ontinuing to use the e1ample #rom the tutorial? let.s suppose that there is a need to display the line
items #or each invoice in a subgrid, The =ava script code should looA liAe this,
ur!"e#ampe.p$p"%
datatype! "#m"%
mtype! "G&'"%
co(ames!)"*n+ (o"%",ate"% "-mount"%"'a#"%"'ota"%"(otes".%
co/ode !)
.%
pager! "#pager"%
ro0(um!64%
ro08ist!)64%94%:4.%
sortname! "in+id"%
sortorder! "desc"%
+ie0records! true%
caption! "/y ;irst grid"%
su7Grid! true%
su7Grid@r ! "su7grid.p$p"%
su7Grid/ode )
{
name ! )"(o"% "*tem"% "Qty"% "@nit"% "8ine 'ota".%
0idt$ ! )11% 944% 54% 54% 54.%
aign ! )"e;t"%"e;t"%"rig$t"%"rig$t"%"rig$t".%
params! )"in+date".
2
.
2)<
2)<
</script>
The ne1t step is to con#igure the subgrid,php #ile, The e1ample is in )H) and My5JL,
!e suppose that the table name that contain the invoice item data has name innlines and has the
#ollowing names2 invid? item@num? item? +ty? unit
+?php
(( get the id passed automaticall. to the request
îd = ^_G&')"id".<
(( get the in'oice date passed to this request 'ia params arra. in
((su*GridModel. /e do not use it here 0 this is onl. demostration
^date_in+ = ^_G&')"in+date".<

(( connect to the data*ase
^d7 = mysq_connect(^d7$ost% ^d7user% ^d7pass0ord) or die("Monnection &rror! " . mysq_error())<

mysq_seect_d7(^data7ase) or die("&rror conecting to d7.")<

(( construct the quer.
^?Q8 = "?&8&M' item_num% item% qty% unit KB=/ in+ines JF&B& in+id=".îd." =B,&B D> item"<
^resut = mysq_query( ^?Q8 ) or die("MoudnQt e#ecute query.".mysq_error())<

(( set the header information
i; ( stristr(^_?&BN&B)"F''U_-MM&U'".%"appication/#$tmY#m") ) {
$eader("MontentAtype! appication/#$tmY#m<c$arset=ut;A5")<
2 ese {
$eader("MontentAtype! te#t/#m<c$arset=ut;A5")<
2

ec$o "<Q#m +ersion="6.4" encoding="ut;A5"Q>"<
ec$o "<ro0s>"<
(( *e sure to put te#t data in C$121
0$ie(^ro0 = mysq_;etc$_array(^resut%/>?Q8_-??=M)) {
ec$o "<ro0>"<
ec$o "<ce>". ^ro0)item_num.."</ce>"<
ec$o "<ce><])M,-'-)". ^ro0)item.."..></ce>"<
ec$o "<ce>". ^ro0)qty.."</ce>"<
ec$o "<ce>". ^ro0)unit.."</ce>"<
ec$o "<ce>". num7er_;ormat(^ro0)qty.W^ro0)unit.%9%"."%" ")."</ce>"<
ec$o "</ro0>"<
2
ec$o "</ro0s>"<

?,
6nableH:isable 5ubgrid
( subrid can be enabled (or disabled) dynamically (to respond to changes in the data in the main
grid? #or e1ample),
To disable subgrid 2
jQuery("#grid_id").$ideMo("su7grid")<
To enable subgrid
jQuery("#grid_id").s$o0Mo("su7grid")<
!here
grid@id is to be replaced by the name o# your grid? but
subgrid is a Aeyword? not to be replaced
To maAe this worA? subrid must be initially set to true in the j+rid propertiesL only then can we
enable and disable it using the code above,
5ubgrid as rid
This is not a ready #or you method? but rather a solution using some o# the available methods and
events, *n this alternative to a subrid? we use the subrid #unctions o# the main grid to create not a
subrid? but another grid? with all o# the power and capacity o# the main grid but appearing? as be#ore?
under the parent record with the same ability to reveal and hide it,
*nstallation
*n order to use this module you should marA the 5ubgrid when you download the grid, ;or more
;or :evelopers / this is the grid,subgrid,js in the src directory,
:e#inition
!e use two events described in options
array2 su#,rid+ow!panded and su#,rid+ow%olapsed Pnote the unconventional spellingQ,
!hen these events are de#ined the population o# the data in the subgrid is not e1ecuted, This way we
can use the subrid>rl to get our custom data and put it into the e1panded row, Having this it is easy
to construct another grid which will act as subgrid,
Here is this techni+ue, !e again use our e1ample,
ur!"e#ampe.p$p"%
datatype! "#m"%
mtype! "G&'"%
co/ode !)
.%
pager! "#pager"%
ro0(um!64%
ro08ist!)64%94%:4.%
sortname! "in+id"%
sortorder! "desc"%
+ie0records! true%
su7Grid! true%
su7GridBo0&#panded! function(su7grid_id% ro0_id) {
(( we pass two parameters
(( su*grid_id is a id of the di' tag created within a ta*le
(( the row_id is the id of the row
(( 3f we want to pass additional parameters to the url we can use
(( the method get%ow$ata!row_id" 0 which returns associati'e arra. in t.pe name0'alue
(( here we can eas. construct the following
$ar su7grid_ta7e_id<
su7grid_ta7e_id = su7grid_idY"_t"<
jQuery("#"Ysu7grid_id).$tm("<ta7e id=""Ysu7grid_ta7e_idY"" cass="scro"></ta7e>")<
jQuery("#"Ysu7grid_ta7e_id).jqGrid({
ur!"su7grid.p$pQq=9Eid="Yro0_id%
datatype! "#m"%
co(ames! )"(o"%"*tem"%"Qty"%"@nit"%"'ota".%
co/ode! )
{name!"num"%inde#!"num"%0idt$!54%Gey!true2%
{name!"item"%inde#!"item"%0idt$!6:42%
{name!"qty"%inde#!"qty"%0idt$!54%aign!"rig$t"2%
{name!"unit"%inde#!"unit"%0idt$!54%aign!"rig$t"2%
{name!"tota"%inde#!"tota"%0idt$!644%aign!"rig$t"%sorta7e!false2
.%
$eig$t! 644R%
ro0(um!94%
sortname! "num"%
sortorder! "asc"
2)<
2
2)<
2)<
</script>
-ote that subridRow0olapsed is not de#ined, This is true because when the row is collapsed the
contents o# the div tag are removed,
Treerid
Treegrid is a way to represent hierarchical data in grid,
Treegrid supports both the -ested 5et model and the (djacency model, ood articles describing the
-ested 5et model can be #ound here2
http2HHdev,mys+l,comHtech/resourcesHarticlesHhierarchical/data,html
http2HHwww,sitepoint,comHarticleHhierarchical/data/database
*nstallation
*n order to use this module you should marA the Treegrid when you download the grid, ;or more
;or :evelopers / this is the grid,treegrid,js in the src directory,
4e#ore you begin with the tree grid? it is highly recommended to read the articles listed above or any
other related to hierarchical data representation articles,
Gptions
The #ollowing options can be set in the grid options to con#igure the treerid
E,pand7ol7li
c0
boolean
when true) the tree is e,panded and>or collapsed when we clic0 on the
te,t o* the e,panded column) not only on the image
true
E,pand7olum
n
string
indicates which column "name *rom colModel# should be used to
e,pand the tree grid. 5* not set the *irst one is used. +alid only when
treeJrid option is set to true.
null
treedatatype mi,ed
6etermines the initial datatype "see datatype option#. 3sually this
should not be changed. 6uring the reading process this option is equal
to the datatype option.
null
treeJrid boolean Enables "disables# the tree grid *ormat. *alse
treeJridMode
l
string
6eteremines the method used *or the treeJrid. 7an be nested or
adjacency.
nested
tree5cons array
This array set the icons used in the tree. The icons should be a valid
names *rom 35 theme roller images. The de*ault values are2 @plus28ui-
icon-triangle-$-e8)minus28ui-icon-triangle-$-s8)lea*28ui-icon-radio-o**8A
treeIeader array
e,tends the colModel de*ined in the basic grid. The *ields described
here are added to end o* the colModel array and are hidden. This
means that the data returned *rom the server should have values *or
these *ields. Hor a *ull description o* all valid values see below.
treeLrootLlev
el
numeric
6etermines the level where the root element begins when treeJrid is
enabled
%
*# the gridview option in the grid is set to true the treerid will not be constructed instead that set to
true,
The treeReader property adds dynamically columns to the colModel property o# the basic grid when
treerid property is set to true, 5ynta12
treeBeader ! {
property6 ! +aue6
...
property( ! +aue(
2
The treeReader property is adds di##rent columns in the colModel depending on the treeridModel
property / i,e, we have di##rent con#igurations #or di##erent models / -ested 5et Model and (djacency
Model,
0urrently j+rid can worA only with data returned #rom server, There are some tricAs and articles wich
describes how to worA with local data,
*t is important to note here that the data returned #rom the server should be sorted in an appropriate
wayL #or e1ample
?&8&M' category_name% e+e% ;t% rgt KB=/ categories =B,&B D> ;t<
Methods
*n the methods below? record means the current record? which can be obtained via the get*nd method
liAe this2
$ar record = jQuery("#grid_id").get*nd(ro0id%true)<
!here rowid is the id o# the row, -ote the second parameter in the method, *# the second parameter is
omited or set to #alse (de#ault) the returned value is the inde1 o# the row, *# the row can not be #ound a
#alse is returned,
Method
Parameter
s
Description
collapse&ode record 7ollapse the node at speci*ied record
collapseIow record 7ollapse the current row
delTree&ode rowid
1here rowid is the id o* the row. 6eletes the speci*ied node and all child
nodes o* that node. 6oes not delete the node at server
e,pand&ode record E,pand the node at the speci*ied record
e,pandIow record E,pand the current row
get&ode/ncesto
rs
record returns array o* the ancestors o* the speci*ied record
get&ode6epth record returns the depth o* the speci*ied record
get&odeParent record Ieturns the parent node o* the speci*ied record
get&ode7hildren record
Ieturns array o* child nodes o* the speci*ied recordC returns empty array
i* none
getIoot&odes none Ieturns an array o* the current root nodes.
is&odeLoaded record Ieturns true i* the node is already loaded
is+isible&ode record Ieturns true or *alse i* the node is visible or not
setTreeIow rowid) data The same as setIow6ata
(ortTree direction
6irection is $ "meaning ascending# or -$ "meaning descending#C sorts
the tree with the currently set sortname "sortname is *rom grid option#
0autions and Limitations
0urrently adding nodes with addRow:ata is not supported,
0urrently it is not recommended to combine inline editing and #orm editing with treegrid? or the
e1panded column will not be editable,
(dding nodes is currently not supported,
)ager #unctionality currently disabled #or treerid
!hen we initialiEe the grid and the data is read? the datatype is automatically set to local, This
is re+uired because treegrid supports autoloading tree nodes, This means that? #or speed or
e##iciency? you can load the data only #or the root level #irst and load the data #or a particular child
node only when the operator clicAs to e1pand that node, The grid will determine that there is no
data and try to load the node #rom the server? but in this case the data that is sent to the server
has to have additional parameters, 5etting datatype to local permits intervening be#ore the
re+uest is made to build the re+uest correctly, 5ee the -ested 5et Model and (djacency
Model on what is posted to the server
-ested 5et Model
(s discussed in previous chapter 0on#iguration one o# the important part is the treeReader property,
0on#iguring this properly and understanding the basic concept o# the nested set model will maAe your
li#e easy,
treeReader 0on#iguration
The de#ault treeReader 0on#iguration when we use tree grid with nested set model is2
treeBeader ! {
e+e_;ied! "e+e"%
e;t_;ied!";t"%
rig$t_;ied! "rgt"%
ea;_;ied! "is8ea;"%
e#panded_;ied! "e#panded"
2
The treeReader automatically e1tends the colModel with these #ields? added and hidden at end o# the
colModel, :ata returned #rom the server now needs to include in#ormation #or these #ields #or
constructing the tree grid, The treeReader can be e1tended so that the #ields match your
re+uirements,
Field Type Description
levelL*ield number
this *ield determines the level in the hierarchy o* the element. 3sually the root
element will be at level %.The *irst child o* the root is at level $ and so on. This
in*ormation is needed *or the grid to set the ident o* every element.
le*tL*ield number rowid o* the *ield to the le*t
rightL*ield number rowid o* the *ield to the right
lea*L*ield boolean
This *ield should tell the grid that the element is lea*. Possible values can be
true and *alse. To the lea* element is attached di**rent image and this element
can not be e,panded or collapsed.
e,pandedL*iel
d
boolean
Tells the grid whether this element should be e,panded during the loading
"true or *alse#. 5* the element has no value) *alse is set. &ote that the data can
be empty *or this element) but this element can not be removed *rom data set.
(nother option that can be changed is tree@root@level, 4y de#ault this has value F, This option tell
which level has the root element,
!hat we postI
(#ter we con#igure the reader we need to Anow what we post to the server in order to load the child
nodes properlyI *n case o# auto lading tree nodes we post the #ollowing parameters / also the
post:ata array is e1tended, 5ee here
post,ata ! {
...
nodeid!rc.id%
n_e;t!rc.;t%
n_rig$t!rc.rgt%
n_e+e!rc.e+e%
...
2
nodeid contain the id o# the currently e1panded record
n@le#t contain the le#t value o# the currently e1panded row
n@right contain the right value o# the currently e1panded row
n@level contain the level value o# the currently e1panded row
61ample
*n order to understand the the process o# con#iguring the tree grid here we provide #ull e1ample2
0ata preparation
Let us suppose that we have an account table where some accounts are children o# the main
accounts and some accounts have no child account, *n the -ested 5et model the table can looA liAe
this
account@id? name? account@number? :ebit? 0redit? 4alance? l#t? rgt
where2
account@id is the uni+uie id o# the account (in our grid this should be the rowid)
l#t indicates the le#t@#ield? and
rgt indicates the right@#ield
*n My5JL terms this table can be represented as
MB&-'& '-D8& accounts (
account_id int(66) (=' (@88 -@'=_*(MB&/&('%
name +arc$ar(:4) (=' (@88%
acc_num +arc$ar(64) (@88%
de7it decima(64%9) ,&K-@8' "4.44"%
credit decima(64%9) ,&K-@8' "4.44"%
7aance decima(64%9) ,&K-@8' "4.44"%
;t int(66) (=' (@88%
rgt int(66) (=' (@88%
UB*/-B> V&> (àccount_id`)
)<
Let.s add some data2
*(?&B' *('= accounts N-8@&? (6% "Mas$"% "644"% O44.44% 914.44% 614.44% 6% 5)<
*(?&B' *('= accounts N-8@&? (9% "Mas$ 6"% "6"% :44.44% 944.44% 644.44% 9% 1)<
*(?&B' *('= accounts N-8@&? (:% "?u7 Mas$ 6"% "6"% :44.44% 944.44% 644.44% :% O)<
*(?&B' *('= accounts N-8@&? (O% "Mas$ 9"% "9"% 644.44% 14.44% 14.44% L% \)<
*(?&B' *('= accounts N-8@&? (1% "DanG""s"% "944"% 6144.44% 6444.44% 144.44% 3% 6O)<
*(?&B' *('= accounts N-8@&? (L% "DanG 6"% "6"% 144.44% 4.44% 144.44% 64% 66)<
*(?&B' *('= accounts N-8@&? (\% "DanG 9"% "9"% 6444.44% 6444.44% 4.44% 69% 6:)<
*(?&B' *('= accounts N-8@&? (5% "Ki#ed asset"% ":44"% 4.44% 6444.44% A6444.44% 61% 6L)<
!ith this in#ormation we can now construct the treerid,
,rid preparation
<script>
...
jQuery("#treegrid").jqGrid({
treeGrid! true%
treeGrid/ode! "nested"%
&#pandMoumn ! "name"%
ur! "ser+er.p$pQq=tree"%
datatype! "#m"%
mtype! "U=?'"%
co(ames!)"id"%"-ccount"%"-cc (um"% ",e7it"% "Mredit"%"Daance".%
co/ode!)
{name!"id"%inde#!"id"% 0idt$!6%$idden!true%Gey!true2%
{name!"name"%inde#!"name"% 0idt$!6542%
{name!"num"%inde#!"acc_num"% 0idt$!54% aign!"center"2%
{name!"de7it"%inde#!"de7it"% 0idt$!54% aign!"rig$t"2%
{name!"credit"%inde#!"credit"% 0idt$!54%aign!"rig$t"2%
{name!"7aance"%inde#!"7aance"% 0idt$!54%aign!"rig$t"2
.%
$eig$t!"auto"%
pager ! "#ptreegrid"%
caption! "'reegrid e#ampe"
2)<
...
<script>
5ince j+rid currently does not support paging? when we have a treegrid the pager elements are
disabled automatically,
Ser)er %ode: 1oading at once
Loading all the nodes at once is an approach used when we have relatively #ew elements in the data
table, To do this? our single 5JL can be
?&8&M'
node.account_id%
node.name%
node.acc_num%
node.de7it%
node.credit%
node.7aance%
(M=@('(parent.name) A 6) -? e+e%
node.;t%
node.rgt
KB=/ accounts -? node%
accounts -? parent
JF&B& node.;t D&'J&&( parent.;t -(, parent.rgt
GB=@U D> node.name
=B,&B D> node.;t<
*n -ested 5et model? determining i# the node is a lea# is easy2 this is just comparison o# rgt ' l#t"&,
-ow we are ready to prepare our server side code, 4elow are e1amples in )H) and My5JL? 1ml and
json, 61amine the code to see where additional elements are added,
+?php
(( this quer. determines the total num*er of records in the tree !can *e omitted"
^resut = mysq_query("?&8&M' M=@('(W) as count KB=/ accounts")<
^ro0 = mysq_;etc$_array(^resut%/>?Q8_-??=M)<
^count = ^ro0)"count".<
(( the actual quer.
^?Q8 = "?&8&M' "
."node.account_id% "
."node.name% "
."node.acc_num% "
."node.de7it% "
."node.credit% "
."node.7aance% "
."(M=@('(parent.name) A 6) -? e+e% "
."node.;t% "
."node.rgt "
."KB=/ accounts -? node% "
."accounts -? parent "
."JF&B& node.;t D&'J&&( parent.;t -(, parent.rgt "
."GB=@U D> node.name "
."=B,&B D> node.;t"<

^resut = mysq_query( ^?Q8 ) or die("Moudnat e#ecute query.".mysq_error())<
2sing 3"1
+?php
2 ese {
2

^s = "<Q#m +ersion="6.4" encoding="ut;A5"Q>"<
^s .= "<ro0s>"<
^s .= "<page>6</page>"<
^s .= "<tota>6</tota>"<
^s .= "<records>".^count."</records>"<
^s .= "<ro0>"<
^s .= "<ce>". ^ro0)account_id.."</ce>"< (( the id of the row is setted in colmodel, no need to put id in
row
^s .= "<ce>". ^ro0)name.."</ce>"<
^s .= "<ce>". ^ro0)acc_num.."</ce>"<
^s .= "<ce>". ^ro0)de7it.."</ce>"<
^s .= "<ce>". ^ro0)credit.."</ce>"<
^s .= "<ce>". ^ro0)7aance.."</ce>"<
^s .= "<ce>". ^ro0)e+e.."</ce>"< (( le'el element
^s .= "<ce>". ^ro0);t.."</ce>"< (( left_field element
^s .= "<ce>". ^ro0)rgt.."</ce>"< (( right_field element
i;(^ro0)rgt. == ^ro0);t.Y6) êa; = "true"<ese êa;=";ase"< (( this determines if the node is aleaf
^s .= "<ce>".êa;."</ce>"< (( is4ief element
^s .= "<ce>;ase</ce>"< (( e#panded element 0 we set *. default t false
^s .= "</ro0>"<
2
^s .= "</ro0s>"<

ec$o ^s<
?,
2sing 4son
$eader("MontentAtype! te#t/$tm<c$arset=ut;A5")<
^responseA>page = 6<
^responseA>tota = 6<
^responseA>records = ^count<
î=4<
i;(^ro0)rgt. == ^ro0);t.Y6) êa; = "true"<ese êa;=";ase"<
^responseA>ro0s)î.)"ce".=array(^ro0)account_id.%
^ro0)name.%
^ro0)acc_num.%
^ro0)de7it.%
^ro0)credit.%
^ro0)7aance.%
^ro0)note.%
^ro0)e+e.%
^ro0);t.%
^ro0)rgt.%
êa;%
";ase"
)<
îYY<
2
ec$o json_encode(^response)<
?,
*# you want that all the nodes to be e1panded when the data is loaded set the last value to true
Ser)er %ode: .uto loading tree
!hen we have a relative large data set with a deep structure? is is better to load the data when we
need it? i,e, only when a parent is clicAed on do we retrieve the child records, 5o #irst we display only
the root elementsL when a root elemnt is clicAed on? the grid automatically detects that there is no data
and tries to load the needed in#ormation by passing the needed parameters to the server, This is
where the level@#ield and isLea# #ield are so important,
*n this case we can use our previous +uery producing only the elements at the re+uested level, (This
+uery can be optimiEed? but this is out o# scope #or this e1planantion),
2sing 4son
+?php
^-,,JF&B& = ""<
^node = (integer)^_B&Q@&?')"nodeid".<
(( detect if here we post the data from allread. loaded tree
(( we can make here other checks
i;( ^node >4) {
^n_;t = (integer)^_B&Q@&?')"n_e;t".<
^n_rgt = (integer)^_B&Q@&?')"n_rig$t".<
^n_+ = (integer)^_B&Q@&?')"n_e+e".<
^-,,JF&B& = " -(, ;t > ".^n_;t." -(, rgt < ".^n_rgt<
2 ese {
(( initial grid
^n_+ =4<
2
^?Q86 = "?&8&M' "
."node.account_id% "
."node.name% "
."node.acc_num% "
."node.de7it% "
."node.credit% "
."node.7aance% "
."(M=@('(parent.name) A 6) -? e+e% "
."node.;t% "
."node.rgt "
."KB=/ accounts -? node% "
."accounts -? parent "
."JF&B& node.;t D&'J&&( parent.;t -(, parent.rgt ".^-,,JF&B&
." GB=@U D> node.name "
." =B,&B D> node.;t"<

$eader("MontentAtype! te#t/$tm<c$arset=ut;A5")<
^responseA>page = 6<
^responseA>tota = 6<
^responseA>records = ^count<
î=4<
i;(^ro0)rgt. == ^ro0);t.Y6) êa; = "true"<ese êa;=";ase"<
i;( ^n_+ == ^ro0)e+e.) { (( we output onl. the needed le'el
^responseA>ro0s)î.)"ce".=array(^ro0)account_id.%
^ro0)name.%
^ro0)acc_num.%
^ro0)de7it.%
^ro0)credit.%
^ro0)7aance.%
^ro0)note.%
^ro0)e+e.%
^ro0);t.%
^ro0)rgt.%
êa;%
";ase"
)<
2
îYY<
2
ec$o json_encode(^response)<
?,
(djacency Model
(s discussed in previous chapter 0on#iguration one o# the important part is the treeReader property,
0on#iguring this properly and understanding the basic concept o# the nested set model will maAe your
li#e easy,
treeReader 0on#iguration
The de#ault treeReader 0on#iguration when we use tree grid with adjacency model is2
treeBeader = {
e+e_;ied! "e+e"%
parent_id_;ied! "parent"%
ea;_;ied! "is8ea;"%
e#panded_;ied! "e#panded"
2
The treeReader automatically e1tends the colModel with these #ields? added and hidden at end o# the
colModel, :ata returned #rom the server now needs to include in#ormation #or these #ields #or
constructing the tree grid, The treeReader can be e1tended so that the #ields match your
re+uirements,
The only di##erence #rom nested set model is that the le#t@#ield and right@#ield are replaced with
parent@id@#ield, This element indicates that the record has a parent with an id o# parent@id@#ield, *# the
parent id is ->LL the element is a root element,
Field Type Description
levelL*ield number
this *ield determines the level in the hierarchy o* the element. 3sually the root
element will be at level %.The *irst child o* the root is at level $ and so on. This
in*ormation is needed *or the grid to set the ident o* every element.
parentLidL*iel
d
mi,ed
indicates i* the record has a parent with an id o* parentLidL*ield. 5* the parent id
is &3LL the element is a root element
lea*L*ield boolean
This *ield should tell the grid that the element is lea*. Possible values can be
true and *alse. To the lea* element is attached di**rent image and this element
can not be e,panded or collapsed.
e,pandedL*iel
d
boolean
Tells the grid whether this element should be e,panded during the loading
"true or *alse#. 5* the element has no value) *alse is set. &ote that the data can
be empty *or this element) but this element can not be removed *rom data set.
!hat we postI
(#ter we con#igure the reader we need to Anow what we post to the server in order to load the child
nodes properlyI *n case o# auto lading tree nodes we post the #ollowing parameters / also the
post:ata array is e1tended, 5ee here
post,ata ! {
...
nodeid!rc.id%
parentid!rc.parent_id%
n_e+e!rc.e+e
...
2
nodeid contain the id o# the currently e1panded record
parentid is the parent@id value o# the currently e1panded row
n@level contain the level value o# the currently e1panded row
61ample
*n order to understand the the process o# con#iguring the tree grid here we provide #ull e1ample2
0ata preparation
Let suppose that we have account table where some accounts are children o# the main accounts and
some accounts have no child account, *n the (djacency model the table can looA liAe this
account@id? name? account@number? :ebit? 0redit? 4alance? parent@id
where2
account@id is the uni+uie id o# the account (in our grid this should be the rowid)
parent@id indicates the parent@id@#ield in the grid
*n My5JL terms this table can be represented as
MB&-'& '-D8& accounts (
account_id int(66) (=' (@88 -@'=_*(MB&/&('%
name +arc$ar(:4) (=' (@88%
acc_num +arc$ar(64) (@88%
de7it decima(64%9) ,&K-@8' "4.44"%
credit decima(64%9) ,&K-@8' "4.44"%
7aance decima(64%9) ,&K-@8' "4.44"%
parent_id int(66) ,&K-@8' (@88%
UB*/-B> V&> (àccount_id`)
)<
Let.s add some data
*(?&B' *('= accounts N-8@&? (6% "Mas$"% "644"% O44.44% 914.44% 614.44% (@88)<
*(?&B' *('= accounts N-8@&? (9% "Mas$ 6"% "6"% :44.44% 944.44% 644.44% 6)<
*(?&B' *('= accounts N-8@&? (:% "?u7 Mas$ 6"% "6"% :44.44% 944.44% 644.44% 9)<
*(?&B' *('= accounts N-8@&? (O% "Mas$ 9"% "9"% 644.44% 14.44% 14.44% 6)<
*(?&B' *('= accounts N-8@&? (1% "DanG""s"% "944"% 6144.44% 6444.44% 144.44%(@88)<
*(?&B' *('= accounts N-8@&? (L% "DanG 6"% "6"% 144.44% 4.44% 144.44% 1)<
*(?&B' *('= accounts N-8@&? (\% "DanG 9"% "9"% 6444.44% 6444.44% 4.44% 1)<
*(?&B' *('= accounts N-8@&? (5% "Ki#ed asset"% ":44"% 4.44% 6444.44% A6444.44% (@88)<
!ith this in#ormation we can now construct the treerid,
,rid con$iguration
<script>
...
jQuery("#treegrid").jqGrid({
treeGrid! true%
treeGrid/ode! "adjacency"%
&#pandMoumn ! "name"%
ur! "ser+er.p$pQq=tree"%
datatype! "#m"%
mtype! "U=?'"%
co(ames!)"id"%"-ccount"%"-cc (um"% ",e7it"% "Mredit"%"Daance".%
co/ode!)
{name!"id"%inde#!"id"% 0idt$!6%$idden!true%Gey!true2%
{name!"name"%inde#!"name"% 0idt$!6542%
{name!"num"%inde#!"acc_num"% 0idt$!54% aign!"center"2%
{name!"de7it"%inde#!"de7it"% 0idt$!54% aign!"rig$t"2%
{name!"credit"%inde#!"credit"% 0idt$!54%aign!"rig$t"2%
{name!"7aance"%inde#!"7aance"% 0idt$!54%aign!"rig$t"2
.%
$eig$t!"auto"%
pager ! "#ptreegrid"%
caption! "'reegrid e#ampe"
2)<
...
</script>
Ser)er %ode: 1oading all the nodes at once
Loading all the nodes at once worAs well when we have relatively #ew elements and the tree has only
a #ew levels,
Loading data in the (djacency model is little di##icult? since it re+uires recursion and? where the depth
o# the tree is great? this will taAe a lot o# time, There are some techni+ues that overcome this problem?
but in our case we will use the standard approach, (utoloading tree nodes (described below) is much
simpler and does not re+uire recursion,
2sing 3"1
+?php
(( 5irst we need to determine the leaf nodes
^?Q88 = "?&8&M' t6.account_id KB=/ accounts -? t6 8&K' S=*( accounts as t9 "
." =( t6.account_id = t9.parent_id JF&B& t9.account_id *? (@88"<
^resut = mysq_query( ^?Q88 ) or die("Moudn t e#ecute query.".mysq_error())<
êa;nodes = array()<
0$ie(^r0 = mysq_;etc$_array(^resut%/>?Q8_-??=M)) {
êa;nodes)^r0)account_id.. = ^r0)account_id.<
2

(( %ecursi'e function that do the jo*
function dispay_node(^parent% ê+e) {
go7a êa;nodes<
i;(^parent >4) {
^0$ = "parent_id=".^parent<
2 ese {
^0$ = "*?(@88(parent_id)"<
2
^?Q8 = "?&8&M' account_id% name% acc_num% de7it% credit% 7aance% parent_id KB=/ accounts JF&B& ".^0$<
ec$o "<ro0>"<
ec$o "<ce>". ^ro0)account_id.."</ce>"<
ec$o "<ce>". ^ro0)name.."</ce>"<
ec$o "<ce>". ^ro0)acc_num.."</ce>"<
ec$o "<ce>". ^ro0)de7it.."</ce>"<
ec$o "<ce>". ^ro0)credit.."</ce>"<
ec$o "<ce>". ^ro0)7aance.."</ce>"<
ec$o "<ce>". ê+e."</ce>"<
i;(]^ro0)parent_id.) ^+ap = "(@88"< ese ^+ap = ^ro0)parent_id.< (( parent field
ec$o "<ce><])M,-'-)".^+ap."..></ce>"<
i;(^ro0)account_id. == êa;nodes)^ro0)account_id..) êa;="true"< ese êa; = ";ase"< (( is4eaf comparation
ec$o "<ce>".êa;."</ce>"< (( is4eaf field
ec$o "<ce>;ase</ce>"< (( e#panded field
ec$o "</ro0>"<
(( recursion
dispay_node((integer)^ro0)account_id.%ê+eY6)<
2
2

2 ese {
2
êt = ">"<
ec$o "<Q#m +ersion="6.4" encoding="ut;A5"Qêt&n"<
ec$o "<ro0s>"<
ec$o "<page>6</page>"<
ec$o "<tota>6</tota>"<
ec$o "<records>6</records>"<
(( Here we call the function at root le'el
dispay_node(""%4)<
ec$o "</ro0s>"<
?,
Ser)er %ode: .uto loading tree
(uto loading the tree is the recommeded approach when using adjacency model in j+rid, Here? we
can maAe simple +uery without any ''' need to provide #or recursion,
2sing 3"1
+?php
(( /e need first to determine the leaf nodes
^?Q88 = "?&8&M' t6.account_id KB=/ accounts -? t6 8&K' S=*( accounts as t9 "
." =( t6.account_id = t9.parent_id JF&B& t9.account_id *? (@88"<
êa;nodes = array()<
0$ie(^r0 = mysq_;etc$_array(^resut%/>?Q8_-??=M)) {
êa;nodes)^r0)account_id.. = ^r0)account_id.<
2

(( Get parameters from the grid
^node = (integer)^_B&Q@&?')"nodeid".<
^n_+ = (integer)^_B&Q@&?')"n_e+e".<

2 ese {
2
êt = ">"<
ec$o "<Q#m +ersion="6.4" encoding="ut;A5"Qêt&n"<
ec$o "<ro0s>"<
ec$o "<page>6</page>"<
ec$o "<tota>6</tota>"<
ec$o "<records>6</records>"<

i;(^node >4) { c$ecG to see 0$ic$ node to oad
^0$ = "parent_id=".^node< (( parents
^n_+ = ^n_+Y6< (( we should ouput ne#t le'el
2 ese {
^0$ = "*?(@88(parent_id)"< (( roots
2

^?Q8 = "?&8&M' account_id% name% acc_num% de7it% credit% 7aance% parent_id KB=/ accounts JF&B& ".^0$<


ec$o "<ro0>"<
ec$o "<ce>". ^ro0)account_id.."</ce>"<
ec$o "<ce>". ^ro0)name.."</ce>"<
ec$o "<ce>". ^ro0)acc_num.."</ce>"<
ec$o "<ce>". ^ro0)de7it.."</ce>"<
ec$o "<ce>". ^ro0)credit.."</ce>"<
ec$o "<ce>". ^ro0)7aance.."</ce>"<
ec$o "<ce>". ^n_+."</ce>"<
i;(]^ro0)parent_id.) ^+ap = "(@88"< ese ^+ap = ^ro0)parent_id.<
ec$o "<ce><])M,-'-)".^+ap."..></ce>"<
i;(^ro0)account_id. == êa;nodes)^ro0)account_id..) êa;="true"< ese êa; = ";ase"<
ec$o "<ce>".êa;."</ce>"<
ec$o "<ce>;ase</ce>"<
ec$o "</ro0>"<
2
ec$o "</ro0s>"<
?,
*mporting and e1porting
There are times when it is use#ul to be able to import or e1port the entire grid con#iguration to another
#ile #ormat2
&, rids constructed on the server can be reconstructed a#ter sorting or paging? so a di##erent
con#iguration can be +uicAly used as re+uired
%, rids can be constructed visually on the server and then loaded #rom an 1ml string
7, rid con#iguration can even be stored in the database as 1ml and then loaded as re+uired
*t is important to note that j+rid can load the con#iguration and data at once,
*nstallation
*n order to use this module you should marA the *mportH61port and TMLH=5G- utils when you
download the grid, ;or more in#ormation re#er to:ownload,
;or :evelopers / these are =sonTml,js and grid,import,js #iles in the src directory,
Methods
!porting
To e1port the current grid con#iguration we use j+rid61port called this way2
jQuery("#grid_id").jqGrid&#port(options)<
!here
options is array o# pair name2value to set di##erent con#iguration listed bellow
*t is good idea #irst to play with this method be#ore using j+rid*mport method,
e,ptyp
e
string
6etermines the type o* the e,port. Two possible values are accepted -
,mlstring - the grid con*iguration is e,ported as ,ml string and jsonstring - the
con*iguration is e,ported as jsonstring
,mlstring
root string
This element set the name o* the root element when we e,port the data - i.e.
the grid con*iguration is enclosed in this element. Hor ,mlstring the e,ported
data can loo0 li0e this
9rootelement:jqgridLcon*iguration 9>rootelement:
. Hor json string we have
@rootelement2@gridLcon*igurationAA
grid
ident string Tab or indent string *or pretty output *ormatting Ut
5ince some columns in the grid are created dynamically (row numbers? subgrids and etc) the e1port
method intelligently removes all the not needed data and maAe the string con#iguration ready #or use
in j+rid*mport
!hen using these methods the pager parameter in grid options should not be set as 2
pager2 jJuery(Umypager)
but as
pager 2 Umypager
or
pager 2 mypager
otherwise the import or e1port will not worA,
!hen we maAe the e1port we e1port only the grid con#iguration and the related events, !e do not
e1port the navigator, *n order to do this you should manually construct the navigator in the
j+rid*mport using the import0omplete event / see below
5mporting
This method reads the grid con#iguration according to the rules in options and constructs the grid,
!hen constructing the grid #or #irst time it is possible to pass data to it again with the con#iguration,
This is done with j+ird*mport
jQuery("#grid_id").jqGrid*mport(options)<
!here
grid@id is the id o# the table element where the grid should be constructed
options is array o# pair name2value to set di##erent con#iguration listed bellow
imptype string
6etermines the type o* import 7an be one o* the *ollowing values
,ml) json) ,mlstring) jsonstring
,ml
impstring string in case o* ,mlstring or jsonstring this should be set
impurl string
valid url to the con*iguration when ,ml or json. The data is obtained
via aja, request
mtype string 6etermines the type o* request. 7an be JET or PO(T JET
imp6ata object additional data that can be passed to the url in pair name2value empty object @A
,mlJrid object
describes *rom where to read the ,ml con*iguration and *rom where
the data i* any. The option con*ig describes the con*iguration tag.
The option data describes the data tag
con*ig 2
<roots:grid=)
data2
<roots:rows=
jsonJrid object
describes *rom where to read the json con*iguration and *rom where
the data i* any. The option con*ig describes the con*iguration tag.
The option data describes the data tag
con*ig 2 <grid=)
data2 <data=
aja,Option
s
object /dditional options which can be passed to the aja, request empty object @A
)ents
There is only one event which can be called in j+rid*mport,
Event Description
import7omplet
e
This event is called a*ter the success*ully import and when the grid is constructed. To
this event we pas the request *rom server. 3se this event to set additional parameters
in the grid or to construct the navigator
2ser "odules
5howHHide 0olumns
:escription
:isplay a modal window where the user can select which column to show and hide,
(uthor
)iotr RoEnicAi
*nstallation
*n order to use this module you should marA the 5et 0olumns plugin (in Gther modules) when you
download the grid, ;or more in#ormation re#er to :ownload,
;or :evelopers / this is the grid,setcolumns,js in the src directory,
0alling 0onvention
>sually you can attach a clicA event to a button, Dou can use this method in navigator using the
nav4utton(dd method
jQuery("#my7utton").cicG(function() {
jQuery("#grid_id").setMoumns(options)<
return false<
2)<
!here2
mybutton is the id o# a button element (can be any other valid HTMl element)
grid@id is the already constructed grid
options is an array o# name2 value pairs? including any o# the #ollowing2
This method uses the #ollowing options #rom language #ile
^.jgrid = {
...
co ! {
caption! "?$o0/Fide Moumns"%
7?u7mit! "?u7mit"%
7Mance! "Mance"
2%
...
Option Description Default
top
the initial top position o* the modal dialog. The Mero value mean that the
coordinate will be calculated *rom top le*t position o* the grid and does not
have e**ect i* jqModal option is *alse
%
le*t
the initial le*t position o* the modal dialog. The Mero value mean that the
coordinate will be calculated *rom top le*t position o* the grid and does not
have e**ect i* jqModal option is *alse
%
width the width o* the modal dialog ?%%
height the height o* the modal dialog auto
dataheight
This parameter control the scrolling content. The height parameter control
the height o* the entry modal) dataheight parameter control the height o* the
scrolling content 0eeping the buttons at the *ooter visible
auto
modal sets dialog in modal mode. /lso does not have e**ect is jqModal is *alse *alse
drag
the dialog is dragable. 5n order to wor0 this either the jq6nI.js plugin should
be included when you download the grid or the dragable component *rom
jPuery 35 should be used
true
be*ore(howHor
m
a *unction that *ires be*ore showing the modal dialog "parameter is the id o*
the *orm#
null
a*ter(howHorm
a *unction that *ires a*ter showing the modal dialog "parameter is the id o* the
*orm#
null
a*ter(ubmitHor
m
a *unction that *ire a*ter the submit button is clic0ed "parameter is the id o*
the *orm#
null
closeOnEscape determines i* the modal can be closed i* the user press E(7 0ey true
(hrin0ToHit 5* set to true the grid width re siMe "*it# according to the visible columns *alse
jqModal 5* set to true the method try to use the jqModal plugin *or the modal dialogs *alse
colnameview 5* set to *alse the names *rom colModel will not be displayed true
close/*ter(ubmi
t
5* set to *alse the dialog will not be closed i* the user press (ubmit button true
on7lose
The event raised when a close icon is clic0ed) a cancel button is clic0ed or
E(7 0ey is pressed "i* this is enabled#. The *unction can return true or *alse.
5n case o* *alse the dialog will not be closed
null
saveicon
This is array element with the *ollowing de*ault values Etrue)=le*t=)=ui-icon-
dis0=F.
The item set various settings *or the submit button. The *irst item enables the
icon) the second item tells where to put icon le*t or right) the third item
corresponds to valid ui icon *rom 35 theme roller
closeicon
This is array element with the *ollowing de*ault values Etrue)=le*t=)=ui-icon-
close=F.
The item set various settings *or the close button. The *irst item enables the
icon) the second item tells where to put icon le*t or right) the third item
corresponds to valid ui icon *rom 35 theme roller
update/*ter7he
c0
1hen set to true the column is shown>hidden immediatley when clic0 on
chec0bo,. 5n this case the submit button is not created.
*alse
To prevent showing or hiding columns that the developer does not want to show at all? a new option
has been added to colModel2 hidedlg (de#ault #alse), *# set to true this column will not appear in the
modal dialog,
Table to j+rid
:escription
0onvert e1isting html table to grid,
(uthor2
)eter RomianowsAi
*nstallation
*n order to use this module you should marA the Table to rid (in Gther modules) when you download
the grid, ;or more in#ormation re#er to:ownload,
;or :evelopers / this is the grid,tbltogrid,js in the src directory,
0alling 0onvention2
tableTorid(selector? options)
This is #unction and not a method
where
selector(string) can be either the table.s class or id
options is array with grid options
The html table should have the #ollowing structure2
<table cass="myta7e"> (or <table id="myta7e">)
<tr>
<th> $eader 6 </th>
<th> $eader 9 </th>
...
</tr>
<tbody>
<tr>
<td> data 6 </td>
<td> data 6 </td>
...
</tr>
<tr>
...
</tr>
....
</tbody>
<table>
)ost :ata Module
5ometimes there is a need to precisely manipulate the post:ata array, The setrid)aram method
does not in some cases do what we want, To do this we can use the )ost :ata module,
(uthor
)aul Tiseo
*nstallation
*n order to use this module you should marA the )ost methods (in Gther modules) when you
download the grid, ;or more in#ormation re#er to:ownload,
;or :evelopers / this is the grid,poste1t,js in the src directory,
:escription
The main purpose o# this module is to manipulate the parameters passed to the to url via an array and
to get user/de#ined data #rom the response, ;or user/de#ined data? please re#er to :ata Types, ( new
option? post:ata? is added to the option array o# the grid, 4y de#ault this is an empty array, The values
o# this array are added via K,e1tend to the aja1 re+uest,
Methods
jJuery(Ugrid@id),get)ost:ata() returns all parameters passed to the grid url, The returned
value is array o# type name2value,
jJuery(Ugrid@id),set)ost:ata( newdata) sets a new set o# parameters overriding the e1isting
ones, newdata should be array o# type name2value, 61ample Bmyparam2myvalueC -ote that the
page? row-um? sortorder? sortname parameters are not changed, To change these use
setrid)aram method,
jJuery(Ugrid@id),append)ost:ata( newdata) replaces or appends new parameters to the
array, newdata should be array o# type nameLvalue
jJuery(Ugrid@id),set)ost:ata*tem( Vey? 8al) sets new or replaces the value o# the e1isting
item in the array, Vey is the name and 8al is the value o# the item,
jJuery(Ugrid@id),get)ost:ata*tem( Aey) returns the value o# the re+uested item with name
Aey
jJuery(Ugrid@id),remove)ost:ata*tem( Aey) deletes a speci#ied item with name ' Aey #rom
the array,
jJuery(Ugrid@id),get>ser:ata returns the user:ata array,
jJuery(Ugrid@id),get>ser:ata*tem(Aey) returns the value o# the re+uested item with name
Aey #rom user:ata array
jJuery >* *ntegrations
5ince j+rid is a jJuery plugin it is very natural that in some cases we should not reinvent the wheel,
That is the reason that we have made a decision to do some things in j+rid using the
wonder#ul jJuery >* library,
MaAing this we believe that users will be happy,
+e6uirements and installation
*n order to use the stu##s that we have made in j+rid it is necessary to include additionally the jJuery
>* library in the head section o# the document, ;or more in#ormation how to download the jJuery >*
library visit here
(#ter downloading the jJuery >* your con#iguration can looA liAe this2
<],=M'>U& $tm U@D8*M "A//J:M//,', PF'/8 6.4 ?trict//&(" "$ttp!//000.0:.org/'B/#$tm6/,',/#$tm6A
strict.dtd">
<html #mns="$ttp!//000.0:.org/6333/#$tm" #m!ang="en" ang="en">
<head>
<meta $ttpAequi+="MontentA'ype" content="te#t/$tm< c$arset=ut;A5" />
<title>/y Kirst Grid</title>

<link re="styes$eet" type="te#t/css" media="screen" $re;="css/uiAig$tness/jqueryAuiA6.\.6.custom.css" />
<link re="styes$eet" type="te#t/css" media="screen" $re;="css/ui.jqgrid.css" />

<script src="js/jqueryA6.:.9.min.js" type="te#t/ja+ascript"></script>
<script src="js/jqueryAuiA6.\.9.custom.min.js" type="te#t/ja+ascript"></script>
<script src="js/i65n/grid.ocaeAen.js" type="te#t/ja+ascript"></script>
<script src="js/jquery.jqGrid.min.js" type="te#t/ja+ascript"></script>

</head>
<body>
...
</body>
</html>
!here j+uery/ui/&,R,%,custom,min,js is the jJuery >* library
*n order to overcome some con#usions we recommend to download the #ull version o# the >* library,
Later in every method we provide in#ormation which jJuery >* widget is necessary to be downloaded
in order to use a particular method,
(nother important note is that when you download the j+rid you should checA the jJuery >* addons
in the download section
-ow it is time to use it
>* *ntegrations
5ortable 0olumns
This method is integrated in j+rid? so there it is not necessary to do something special, The method
allow to reorder the grid columns using the mouse, The only necessary setting in this case is to set
the sortable option in j+rid to true, using our e1ample this will looA liAe this2
ur!"e#ampe.p$p"%
datatype! "#m"%
mtype! "G&'"%
co/ode !)
.%
pager! "#pager"%
ro0(um!64%
ro08ist!)64%94%:4.%
sortname! "in+id"%
sortorder! "desc"%
+ie0records! true%
sorta7e! true
2)<
2)<
</script>
2sed jQuery 25 widget(s) and other plugins
jJuery >* core
jJuery >* sortable widget,
0olumn 0hooser
!ith this method we can reorder columns and set visible and hidden columns in the grid,
0alling convetions2
jQuery("#ist").coumnM$ooser(options)<
jQuery("#ist").jqGrid("coumnM$ooser"% options)<
where options is a object with properties listed below,
*n order to use this method the jJuery multiselect plugin should be loaded be#ore j+rid
(#ter calling this a modal dialog appear where the user can reorder columns and set which o# them
can be visible and which o# them can be
hidden,
To see 0olumn 0hooser dialog liAe on the picture above? one should include ui,multiselect,css and
ui,multiselect,js (jJuery >* Multiselect )lugin?http2HHplugins,j+uery,comHprojectHMultiselect),
Options
ame Type Description Default
title string Title o* the modal dialog
(ee B.jgrid.col.title
in language *ile
width number (et the width o* the dialog in pi,els S?%
height number (et the height o* the dialog in pi,els ?S%
classna
me
string
7lass which will be added to the selector where the selects are
build
null
done *unction
Hunction which will be called when the user press O0 button. 5n
the current implementation we cal remap7olumns method in
order to reorder the columns
msel mi,ed
msel is either the name o* a ui widget class that e,tends a
multiselect) or a *unction that supports creating a multiselect
object "with no argument) or when passed an object#) and
destroying it "when passed the string <destroy=#
multiselect
dlog mi,ed
dlog is either the name o* a ui widget class that behaves in a
dialog-li0e way) or a *unction) that supports creating a dialog
"when passed dlogLopts# or destroying a dialog "when passed
the string <destroy=#
dialog
dlogLopt
s
mi,ed
dlogLopts is either an option object to be passed to <dlog=) or
"more li0ely# a *unction that creates the options object. The
de*ault produces a suitable options object *or ui.dialog
cleanup *unction
Hunction to cleanup the dialog) and select. /lso calls the done
*unction with no permutation "to indicate that the
column7hooser was aborted
;unction done de#ined above has the #ollowing de#inition2
opts = ^.e#tend({
...
"done" ! function(perm) { i; (perm) se;.jqGrid("remapMoumns"% perm% true) 2%
...
2)<
*n order to do other things a#ter reordering you can rede#ine this option, 4y e1ample let say that we
want to recalculate the width o# the grid a#ter reordering or when the user show or hide some columns,
The code can looA liAe this2
jQuery("#ist").jqGrid("coumnM$ooser"% {
done ! function (perm) {
i; (perm) {
t$is.jqGrid("remapMoumns"% perm% true)<
$ar g0dt$ = t$is.jqGrid("getGridUaram"%"0idt$")<
t$is.jqGrid("setGridJidt$"%g0dt$)<
2
2
2)<
jJuery >* core
jJuery >* dialog
jJuery multiselect plugin
The jJuery multiselect plugin can be obained #rom here, (lso this plugin is included in the plugins
directory o# the j+rid build
5ortable Rows
This method allows reordering (sorting) grid rows in a visual manner using a mouse,
0alling convetions2
jQuery("#ist").sorta7eBo0s(options)<
jQuery("#ist").jqGrid("sorta7eBo0s"% options)<
The method is #ully compatible with jJuery >* sortable widget, This means that we can set any option
and event available in this widget, ;or more in#ormation on the options and events looA here
jJuery >* core
7nown pro#lems
0urrently this method does not worA correct in ;ire;o1 versions 7,F,1? 0hrome and 5a#ari
browsers due to little problem in sortable widget? which we hope they will be corrected in #uture
release o# jJuery >*,
Method does not worA currently when treerid is enabled / i,e, you can not use the method to
reorder tree rows,
ResiEable rid
This method allow to re siEe the grid width andHor height in visual manner using a mouse,
0alling convetions2
jQuery("#ist").gridBesiCe(options)<
jQuery("#ist").jqGrid("gridBesiCe"% options)<
where options is a object with properties listed above,
The method is #ully compatible with jJuery >* resiEable widget, This means that we can set any option
and event available in this widget, ;or more in#ormation on the options and events looA here
jJuery >* core
jJuery >* resiEable widget,
7nown pro#lems
>sing the grid hide button (the button in the caption) does not hide the content created #rom
the resiEable widget, This cause appearing o# borders o# the grid a#ter it is hidden,
:rag and :rop rows between grids
This method allow drag and drop rows between two or more grids using a mouse,
0alling convetions2
jQuery("#ist").grid,n,(options)<
jQuery("#ist").jqGrid("grid,n,"% options)<
Options
ame Type Description Default
connect1it
h
string
6etermines the target grid"s# to which the row should be
dropped. The option is a string. 5n case o* more than one grid
the ids should be delemited with comma - i.e =Dgrid$) Dgrid?=
empty string
onstart *unction
This event raises when we start drag a row *rom the source grid
"i.e. to which this method is applied#. Parameters passed to this
event are the event handler and a prepared ui object. Hor more
in*ormation re*er to jPuery 35 draggable events
null
onstop *unction
This event is triggered when dragging stops. Parameters
passed to this even are the event handler and a prepared ui
object. Hor more in*ormation re*er to jPuery 35 draggable
events
null
be*oredrop *unction This event raises be*ore droping the row to the grid speci*ied in null
connect1ith option. Parameters passed to this event are the
event handler) prepared ui object) data which will be inserted
into the grid in name value pair) source grid object and
target"this# grid object.
5* the event return object in value name pair this object will be
inserted into the target grid.
ondrop *unction
This event raises a*ter the droping the row to the grid speci*ied
in connect1ith option. Parameters passed to this event are the
event handler) prepared ui object) data which is inserted into the
grid in name value pair. Hor more in*ormation re*er to jPuery 35
droppable events
null
dropLopts object
Prede*ined options which can be applied to the droppable grid
"speci*ied with connect1ith option above#. /lso you can set any
option and event "e,cept drop event which is replaced with
ondrop event listed above#. Hor more in*ormation re*er to jPuery
35 droppable
@ active7lass 2
<ui-state-active=)
hover7lass 2 <ui-
state-hover=
A
dragLopts object
Prede*ined options which can be applied to the draggable grid
"i.e. to which this method is applied#. /lso you can set any
option and event "e,cept start and stop events which are
replaced with onstart and onstop events listed above#. Hor more
in*ormation re*er to jPuery 35 draggable
@ revert2
<invalid=)
helper2 <clone=)
cursor2 <move=)
appendTo 2
=DjqgridLdnd=)
M5nde,2 N%%%
A
dropbynam
e
boolean
5* set to true this means that only *ields that have equal names
will be added to the target grid. &ote that we use addIow6ata
to insert new row) which means that i* some *ield with name <a=
on source grid is hidden they can appear on the target grid. The
de*ault value o* *alse mean that the grid data will be added to
the target counted *rom the *irst column *rom source.
*alse
droppos string
6etermines where to add the new row. 7an be *irst which mean
as *irst row o* the grid and last - as last row in the target grid.
*irst
autoid boolean
This option determines how the new row id should be
generated. 5* this option is true we generate a id wich begin with
string setted with the option autoidpre*i, "see below# and a
random number. 5* this option is *alse the id can be either the
the ne,t record count or value determined by 0ey property in
colModel.
5* the parameter is de*ined as *unction this *unction should
return value which will act as id to the target grid. Parameters
passed in this case is the data array which will be inserted into
the target grid row
true
autoidpre*i, string
This option have sense only i* the option autoid is set to true
and determines the pre*i, o* the new genearted id.
dndL
jJuery >* core
jJuery >* draggable widget,
jJuery >* droppable widget,
7nown pro#lems
The method does not worA well in 5a#ari and 0hrome because o# the bug in the draggable
widget, The e##ect is that the entry te1t is selected bellow the draggable row
!ample
*n the e1ample below we will create three grids with id grid&? grid% and grid7, !e will maAe so that
rows #rom grid& can be dragged to grid% and grid7 and rows #rom grid% can be dragged only to grid&,
(( Creating grid1
jQuery("#grid6").jqGrid({
datatype! "oca"%
$eig$t! 644%
co(ames! )"*d6"% "(ame6"% "Naues6".%
co/ode! )
{name! "id6"% inde#! "id"%0idt$! 6442%
{name! "name6"%inde#! "name"%0idt$! 6442%
{name! "+aues6"%inde#! "+aues"%0idt$! 9442
.%
caption! "Grid 6"%
pager! "#pgrid6"
2)<

((Creating grid6
jQuery("#grid9").jqGrid({
datatype! "oca"%
$eig$t! 644%
co(ames! )"*d9"% "(ame9"% "Naues9".%
co/ode! )
{name! "id9"%inde#! "id"%0idt$! 6442%
{name! "name9"%inde#! "name"%0idt$! 6442%
{name! "+aues9"%inde#! "+aues"%0idt$! 9442
2.%
caption! "Grid 9"%
pager! "#pgrid9"
2)<
(( Creating grid7
jQuery("#grid:").jqGrid({
datatype! "oca"%
$eig$t! "auto"%
co(ames! )"*d:"% "(ame:"% "Naues:".%
co/ode! )
{name! "id:"%inde#! "id"%0idt$! 6442%
{name! "name:"%inde#! "name"% 0idt$! 6442%
{name! "+aues:"%inde#! "+aues"%0idt$! 9442
2.%
caption! "Grid :"%
pager! "#pgrid:"
2)<

(( $ata for grid1
$ar mydata6 = )
{id6!"6"%name6!"test6"%+aues6!"=ne"2%
{id6!"9"%name6!"test9"%+aues6!"'0o"2%
{id6!":"%name6!"test:"%+aues6!"'$ree"2
.<
(( $ata for grid6
$ar mydata9 = )
{id9!"66"%name9!"test66"%+aues9!"=ne6"2%
{id9!"96"%name9!"test96"%+aues9!"'0o6"2%
{id9!":6"%name9!"test:6"%+aues9!"'$ree6"2
.<
(( $ata for grid7
$ar mydata: = )
{id:!"69"%name:!"test69"%+aues:!"=ne9"2%
{id:!"99"%name:!"test99"%+aues:!"'0o9"2%
{id:!":9"%name:!"test:9"%+aues:!"'$ree9"2
.<
(( 1dding grid data
;or ($ar i = 4< i <= mydata6.engt$< iYY) {
jQuery("#grid6").jqGrid("addBo0,ata"%i Y 6% mydata6)i.)<
jQuery("#grid9").jqGrid("addBo0,ata"%i Y 6% mydata9)i.)<
jQuery("#grid:").jqGrid("addBo0,ata"%i Y 6% mydata:)i.)<
2
(( connect grid1 with grid6 and grid7
jQuery("#grid6").jqGrid("grid,n,"%{connectJit$!"#grid9%#grid:"2)<
(( connect grid6 with grid1
jQuery("#grid9").jqGrid("grid,n,"%{connectJit$!"#grid6"2)<

Jqgrid

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jqgrid

Uploaded by

Copyright:

Available Formats

Jqgrid

You might also like