forked from tonytomov/jqGrid
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Changes.txt
1046 lines (805 loc) · 38 KB
/
Changes.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
Please read The Installation instructions first in install.txt
================================================
3.5 beta (buld6- build11)
New Properties and methods
==========================
- Added new grid parameter hoverrows. When set to false the mouse hovering is
disabled in the grid data rows.
- Added rowid as parameter to error function in saveRow method - inline
editing module
- treeGrid to be initially work with datatype local
- Added new method updateGridRows (grid.custom.js)
This method update the existing data in the grid by given id rowname.
Syntax: updateGridRows (data, rowidname, jsonreader)
data is a array of data in format
[{name:value,name1:value1...},{name:value,name2:value2...}]
where the name is the name from colModel and value is the actuall value.
It is not neccessary that all columns are present in the data item object
(the same as setRowData method)
rowidname (string) - is the name of the row which should acts as id.
If not set the name "id" is used.
jsonreader (boolean) default false. If set to true a jsonReader definition
is used to set the data. Note that this work only of the item in jsonReader
object 'repeatitems' is set to true.
- Switch to namedItems JS function. This improve the speed. Previously we
walk throught the entry rowset to find the rowIndex of the given rowid.
Now we use the build in javaScript method namedItems which do the same.
- multiselect is enabled in inline edit module.
- To the importComplete event in jqGridImport method we pass the response.
- Added support for alternate rows. Also added new jqGrid option altclass.
The default value is 'ui-priority-secondary' THis way we can develop our own
alternate class.
- Added ShrinkToFit option in setColumns method which fit columns to the grid
width. Default value is false.
- Extend tableToGrid method to use custom options when building the grid.
The call to this function is
tableToGrid(selector, options)
where options is the object with jqGrid options.
- Adding 4px right to the view records text for better view
- Add a onClose event to all modals in form editing (except alert dialog)
The default value is null. This event can be passed in editGridRow, delGridRow,
viewGridRow, and setColumns methods. The event raised when a close icon is clicked,
a cancel button is clicked or ESC key is pressed (if this is enabled).
- Significant speed improvents in tree Grid when a relative large data is loaded.
- Added dataheight parameter to all modal windows, where we can control the
scrolling content. Intitially this parameter is auto.
To summarize - we have two parameters for controlling the height of the modal.
height and dataheight.
The height parameter control the height of the entry modal, dataheight parameter
control the height of the scrolling content. The buttons of the modals are
allways visible at the bottom of the modal.Also some improvments in jqDnR.
- In setColumns method we add colnameview and closeAfterSubmit parameters. The
colnameview (default true). If set to false the names from colModel are not
visible. closeAfterSubmit if defined cleses the dialog after the submit
button is clicked.
- Added parameter viewsortcols in jqGrid parameters. The purpose of this
parameter is to define different look and behavior of sorting icons that
appear near the header. This parameter is array with the following default
options
viewsortcols : [false,'vertical',true]
The first parameter determines if all icons should be viewed at the same time
when all columns have sort property set to true.
The default of false determines that only the icons of the current sorting column
should be viewed.
Setting this parameter to true causes all icons in all sortable columns to be viewed.
The second parameter determines how icons should be placed - vertical means that
the sorting icons are one under another. 'horizontal' means that the icons should
be one near other.
The third parameter determines the click functionality. If set to true the columns are
sorted if the header is clicked. If set to false the columns are sorted only when
the icons are clicked.
Important note: When set a third parameter to false be a sure that the first parameter
is set to true, otherwise you will lost the sorting.
Fixes
=====
- Fixed bug in filterToolbar. We search now by index and when not found by
name.
- Fix in searchGrid method. We search now by index and when not found by
name.
- Fixed bug in IE when resizing columns. The function getOffset is changed
so that the resizing speed is the same as in Safari and FF.
- Fix multiple select bug in createEl function. Now we set the options before
checking for multiple:true
- Fixed bug in treegrid. The strict comparation in getNodeParent method
causes bad results.
- Fix in setGridWidth method. We do not initialize correct the new width which
causes after the first set of the width to not work in other grid in the same
page.
- Fixed bug in GridExport. We delete the columns that are generated
dynamically - multiselect, subgrid, treegrid or rownumbers. This way the
import is without errors
- Fixed a bug in addRowData method to add data with id = 0 (number)
- Fixed a forever loading bug in IE.
- Fixed altRows bug in delRowData method
- navGrid method fix for warning modal and IE6
- Fix setColumns method to the common apprach of forms and modals
- Fix for IE8 in getAbsoluteIndex method. IE8 seems to work as other browsers
- Fixed bug in delRowData - the grid does not resize when first row is
deleted.
- Fixed bug when rownumbers and subgrid are used together
- Fixed bug in row editing when the column name contain dot.
- Fixing bug in viewGridRow - also the id manes of the form are changed in order
to be not equal of those in editGridRow
3.5 beta (buld5)
FormEditing
===========
- added options checkOnUpdate (default false) in editGridRow method.
Also available in add and edit mode.
When this option is set to true the behaviour as follow:
When something is changed in the form and the user click on
Cancel button, navigator buttons, close button (on upper right corner of the
form), in overlay (if available) or press Esc key (if set) a message box apper
asking the user to save the changes, not to save the changes and go back in the
form or cancel all changes (this will close the modal form)
Note that checkOnSubmit option will work only when a submit button is clicked.
When nothing is changed we contionue with the action.
- added option - rowabove (default false) in colModel formoptions
When set to true a new empty row is added above this row in form editing.
- added option - rowcontent (default empty) in colModel formoptions.
This option have sense only when rowabove option is set to true.
With this option is possible to set a content to the new added empty row in
the form. In order to style easy these rows a class 'contentinfo' is set.
- added new items in the language files to support the checkOnUpdate option
- added class 'delmsg' in the delGridRow method. This allow us to change the
message dynamically using a beforeShow or afterSow eventrs. The class is added
to a element td.
Fixes
=====
- fix in Bulgarian translations files.
- fix in searchGrid method. Now we search by index (from colModel) and only if
it is not available we search by name.
- Fix for date parser in the base module. Now we can sort locally on
dates that contain month names
- Fixed bug in searchGrid. The translation messages for the operations does not
apper when not set in colModel
- removed some not needed events from base grid. Also return false do these
by default;
- Fix bug to check if datepicker is available in searchGrid.
- Fix a bug in searchGrid in IE6, where the data value is not set for elements
after the first
- Fixed bug when calling of jqModal multiple times on the same element. We
need the initialization only once and not every time. This cause a memory
leaks
- Fixed bug in formatter where the data containing ' causes break in IE
- Fixed bug in base module when adding data where the data contain a ' char.
This breaks in IE browsers.
- Fixed bug in checkboxes. We add the value setted in the editoptions. Also
converting to lower case make the option checkOnUpdate to be true every time.
- We replace white-space nowrap with pre in td element in the CSS file. This fixes
the bug in IE where the first row does not wrap when the text is longer than
the column width. Also this requiere DOCTYPE declaration in the document.
- Fixed bug in viewGridRow method where when resizing the modal causes the data
to apper bad.
3.5 beta (buld4)
Base
====
- added option footerrow - default false. If set to true this will place a
footer table with one row below the gird records and above the pager.
The number of columns equal of these from colModel
-added option userDataOnFooter(default false) which directly place the user data
array at footer. The rules are as follow: If the userData array contain name
which is equal to those of colModel then the value is placed in that column.
If there are no such values nothing is palced. Note that if this option
is used we use the current formatter options (if available) for that column.
-Added method getCol(colname). Colname can be either number which represents
the index of the column or name from colModel. The method return array with
the values of the coulmn.
- Added method footerData ( action, data, format). This method get or set data
on footer.
action - can be 'get' or 'set'. If not set default is get.
When set to 'get' - the result is object of type name:value, where the name is
a name from colModel. This will return a data from the footer. The other two
options does not have effect in this case.
When set to 'set' a data array (object) should be set. This will place
the values in the footer.
format - default is true. This instruct the method to use the formmater
(if set in colModel) when a new values are set.
Setting to false will disable the using of formatter.
Related css items in the ui.jqgrid.css
.ui-jqgrid-sdiv - is a div container for the footer
.ui-jqgrid-ftable - is the class for the table
tr.footrow - is the class for the footer row
tr.footrow td is the item for the cell formating
In order to format every cell in a way that you want
maybe you can use
jQuery("tr.footrow td:eq(2)","#gbox_mygrid").css(...)
where the td:eq(2) point to the third column
and mygrid is the id of the grid. The id of the global grid container
is constructed via "gbox_"+the id of the grid.
There are no methods to show and hide the footer row dynamically, but
following the above example we can do
jQuery(".ui-jqgrid-sdiv","#gbox_mygrid").hide() - this will hide the footer row.
jQuery(".ui-jqgrid-sdiv","#gbox_mygrid").show() - this will show the footer row.
Form Editing
============
aded option in editGridRow - checkOnSubmit (default false)
This option only work in editing mode and not in add.
When set to true - the method looks if any data is changed in the form and
if this is a case a dilog message appear where the user is asked to confirm the
changes or cancel it. Pressing cancel will return to the form, but does not
set the values to its original state.
Note that this causes a some changes in the language file.
Fixes
=====
- Removed imgpath from cell edit and inline edit modules and common module.
This parameter is no longer valid in 3.5
- Replace $ with jQuery in grid.common.js which causes problems when used with
other librariers like prototype.
- removed a checking e.srcElement from base module. jQuery allready fix this.
- fixing the size option in select when using ajax to load selects.
- Fixed bug in IE browsers, when clicked on href tag with child nodes,
IE incorrect report in all cases that this is a href element. This couses
onSelectCell not to behave correct.
- Fixed bug in searchGrid - group options are not passed to serchFilter in
order get them from Language file.
- Fix in bulgarian trnslations.
- Fix on sorting column. The initial sort check first for index and then for
column name. Before the checking for the index was missed.
Sortorder converted to lower case in order to avoid some cofusions.
- Fix in set columns module. The modal does not appear correctly due to
missed parameter
3.5 beta (buld3)
Base
====
- To the loading message is added ui-state-active class from Theme roller.
This is more natural, indicating that the grid is active when data is loaded.
Form Editing
============
- Added keyboard navigation, which allow us to navigate throught the records while
in form editing pressing certain keys. This option is available in editGridRow
and viewGridRow methods. The default state is disabled. To enable this you
should set the options in the edit/add parameters:
navkeys: [true,38,40]
The first item enables the navigation.
The second item corresponds to reccord up and by default is the the key code
for Up key
The third item corresponds to reccord down and by default is the key code for
Down key
Example
$("#mygrid").navGrid("#pager",{options},{id:'myeditid',navkeys: [true,38,40]}..)
Also this option does not work in add mode.
Note: Instead that this does not have sense, if you plan to navigate with keys
it is recommended to add this option in add mode. This should be done
because the form for add and edit is the same and it is unknown which action
will be lunched first.
- Added posibility to save the form pressing certain key - add/edit mode only
By default this option is disabled.
To enable
savekey: [true,13]
The first item enables saving with pressing certain key.
The second item corresponds to key code for saving. Default Enter (key code 13)
Note that this binding should be used for both adding and editing a row.
Since the binding is for the form, there is no possibility to have one
key in add and another in edit mode.
- Added icons for the buttons in the form. The corresponding class in the css
is "fm-button"
By default all icons are enabled.
For add/edit method editGridRow
The save button is defined with
saveicon : [true,"left","ui-icon-disk"]
The close button is defined with
closeicon: [true,"left","ui-icon-close"]
The first item enables the icon
The second item tells where to pu icon left or right
The third item corresponds to valid ui icon from theme roller
For viewGrid Row
closeicon : [true,"left","ui-icon-close"]
For Deleting
delicon: [true,"left","ui-icon-scissors"]
cancelicon: [true,"left","ui-icon-cancel"]
Fixes
======
-Fixed bug when getting the index of the row. Strict compare should be removed.
-Fixed bug when datatype is function - we need to exit when call it and not to
continue.
-Fixed bug in form editing - the buttons do not align properly.
3.5 beta (build2)
Navigator
=========
This was missed in the first build
In the navGrid we can pass uniquie id's of the buttons in order to manipulate
them easy. If no id is set we create one which is combination of:
for add button "add_"+ the id of the grid
for edit button "edit_"+ the id of the grid
for view button "view_" + the id of the grid
for delete button "del_" + the id of the grid
for search button "search_" + the id of the grid
for refresh button "refresh_" + the id of the grid
Example:
$("#mygrid").navGrid("#pager",{options}, {id:'myeditid'},{id:'myaddid'}...)
Base Grid
=========
- Record number information now can format the values according to the
formatter setting (if available) getting information from language file.
Fixes
=====
- Fixed bug when multi select with json. We pass wrong parameter to addMulti
function
- Spelling error in all language files, which cause not to set the default
value correct
- Fixed bug when creating warning message. Fixed bug when determining the
number column element in the form
- Fixed bug - clientSide datatype should be converted to lower case
according to the new improvements
- Fixed bug in IE6/7 when try to select a option in the select generated via
ajax
===============================
Upgrade from 3.4.x to 3.5 beta.
===============================
1. Installation
--------------
See install.txt
2. Code changes
---------------
2.1 The following grid options are deprecated - i.e. you can remove them from
the grid options. They are not needed in 3.5 version
imgpath
sortascimg
sortdescimg
firstimg
previmg
nextimg
lastimg
sortclass
resizeclass
2.2 Second change is related to custom formatters. Starting with version 3.5,
the custom formatter is passed the following parameters:
formatter : function ( cellvalue, options, rowObject )
{
// format the cellvalue to new format
return new_formated_cellvalue;
}
Note the return in the function. This function should always return a value
in order to work correctly. The parameters are
cellvalue - is the value to be formatted
options - is an object containing the following element
options : { rowId: rid, colModel: cm}
where rid - is the id of the row
colModel is the object of the properties for this column getted from colModel
array of jqGrid
rowObject - is a row data represented in the format determined from datatype
option.
If we have datatype: xml/xmlstring - the rowObject is xml node,provided
according to the rules from xmlReader
If we have datatype: json/jsonstring - the rowObject is array, provided
according to the rules from jsonReader
Example:
Code in 3.4.x variant
formatter : function ( elem, cellvalue, options)
{
var newval = "<strong>"+cellvalue+"</strong>";
jQuery(elem).html(newval);
}
Code in 3.5
formatter : function ( cellvalue, options, rowObject )
{
return "<strong>"+cellvalue+"</strong>";
}
Base Module
============
Bug fixes
---------
- fixed bug in onCellSelect event when used in IE browsers - now the rowIndex
passed to this event is calculated correctly regardless of hidden columns.
- fixed width bug when multiselect is used. Previously the width of this column
is recalculated according to table width and when shrinkToFit is set to true.
Now the column has fixed width and is no longer recalculated when the grid
width is changed. See documentation for the new options
- fixed width bug when subgrid is used. Previously the width of this column is
recalculated according to table width and when shrinkToFit is set to true. Now
the column has fixed width and is no longer recalculated when the grid width
is changed. See documentation for the new options
- fixed bug in addRowData method when the grid is empty and we try to add one
or more columns. The width of the data was not being recalculated correctly,
according to the header elements.
- fixed bug when we use xmlstring and jsonstring to add data. Previously all
the data from the string is loaded without reference to the rowNum parameter.
Also this behaviour is changed for xml and json data. In other words, we now
load only rowNum number of rows even when the request consists of more rows.
- fixed bug when posting values of input of type select set to multiple:true.
Now in all editing modules the posted values in for multiselect are separated
with comma
- fixed bug in the size option of multi select. If the size option is not set
for multiselect the default value is 3
Deprecated options
----------------
imgpath: "", in all modules
sortascimg: "sort_asc.gif",
sortdescimg: "sort_desc.gif",
firstimg: "first.gif",
previmg: "prev.gif",
nextimg: "next.gif",
lastimg: "last.gif",
sortclass: "grid_sort",
resizeclass: "grid_resize",
Note that imgpath is not used anymore in all modules.
The altRows option is still here, but will have no effect until the jQuery
UI Theme roller supports alternative rows.
Note that the table element where we define the grid can not have a class
scroll - i.e. class scroll in the table definition can be omitted, but this
is NOT true for the pager element.
New options
-----------
datatype can now set as 'script'. In other words, we now support script
as datatype.
reccount: numeric, Default 0. Determines the exact number of available
grid rows. Can be <= from rowNum parameter
autowidth: boolean, Default false. When set to true, the grid width is
recalculated automatically to the width of the parent element. This is done
only initially when the grid is created. In order to resize the grid when
the parent element changes width you should apply custom code and use a
setGridWidth method for this purpose.
scrollOffset: numeric, Default 18. Determines the width of the vertical
scrollbar. Since different browsers interpret this width differently (and it
is difficult to calculate it in all browsers) this can be changed.
cellLayout: numeric, Default 5. This option determines the padding + border
width of the cell. Usually this should not be changed, but if custom changes
to td element are made in the grid css file this will need to be changed.
subGridWidth: numeric, Default 20. Determines the width of the subgrid column
if the subGrid option is set to true.
multiselectWidth: numeric, Default 20. Determines the width of the multiselect
column if multiselect is set to true.
rownumbers: boolean, Default false. If this option is set to true, a new column
at left of the grid is added. The purpose of this column is to count the number
of available rows, beginning from 1. In this case colModel is extended
automatically with new element with name - 'rn'. Also, be careful not to use
the name 'rn' in colModel
rownumWidth: numeric, Default 25. Determines the width of the row number column
if rownumbers option is set to true.
pagerpos: string, Default 'center'. Determines the position of the pager in the
grid. By default the pager element when created is divided in 3 parts (one part
for pager, one part for navigator buttons and one part for record information)
recordpos: string, Default 'right'. Determines the position of the record
information in the pager.
toolbar now accepts another option: "both". When we set toolbar: [true,"both"]
two toolbars are created -- one on the top of table data and one of the bottom
of the table data. When we have two toolbars then we create two elements (div).
The id of the top bar is constructed like "t_"+id of the grid and the bottom
toolbar the id is "tb_"+id of the grid. In case when only one toolbar is
created we have the id as "t_" + id of the grid, independent of where this
toolbar is created (top or bottom)
gridview: boolean, Default value false. In the previous versions of jqGrid,
including 3.5 alfa, reading a relatively big data sets (Rows >=100 ) caused
speed problems. The reason for this was that as every cell was inserted into
the grid we applied about 5-6 jQuery calls to it. Now this problem is resolved;
we now insert the entry row at once with a jQuery append. The result is
impressive - about 3-5 times faster. What will be the result if we insert all
the data at once? Yes, this can be done with a help of gridview option when set
to true. The result is a grid that is 5 to 10 times faster. Of course when this
option is set to true we have some limitations. If set to true we can not use
- treeGrid
- subGrid, or
- afterInsertRow event.
If you do not use these three options in the grid you can set this option to
true and enjoy the speed.
addRowData now is 1-2 times faster because we are using the concept to insert
the row at once
Added jQuery function parse (removed from json2.js module):
jQuery.parse(jsonstring)
To prevent JavaScript hijacking attacks, web application authors are encouraged
to use this function. This returns a JSON representation of the variable.
Cyclic structures are detected and safely interrupted, but could not be further
restored.
1. The while(1); construct, located at the beginning of JSON text,
2. Comments at the beginning and end of the text.
JSON data providers are encouraged to use one or both of these methods to
prevent data execution. Such JSON response may then look like this:
while(1);/*{[
{"name":"safe value 1"},
{"name":"safe value 2"},
...
]}*/
jqGrid uses this function when obtaining a data with datatype:'json', also used
in subGrid.
Added jQuery function stringToDoc: jQuery.stringToDoc(xmlstring). This returns
the xml document of xml string
Added new method: jQuery("#mygrid").updateColumns(); this synchronizes the
width of the headers with the data. Useful when used with table drag and drop.
colModel changes and additions
------------------------------
searchhidden is removed from editrules object
added searchoptions object to define properties, events and other settings when
a search is performed
searchoptions : {
dataUrl : value,
dataInit: function,
dataEvents : array,
defaultValue: value,
attr: object,
searchhidden: boolean,
sopt: array
}
To summarize - when we want to deal with search we should use the following
options in colModel
search : boolean , // true/false
stype: value, // text/select
searchoptions : object // see above
Note: when the dataUrl is not used for the search type select, the definitions
for the select are taken from editoptions value property - i.e
editoptions:{value:"1:one;2:two",...}. See below for how to use these options in
different search methods.
Added new object formoptions to define various settings in form editing. Also
valid only in this module.
formoptions : {
elmprefix:value,
elmsuffix:value,
rowpos: number,
colpos:number,
label: value
}
See below for how to use
The editoptions are extended with the following properties. Valid in all editing
modules editoptions : {
dataUrl : value, dataInit: function, dataEvents : array, defaultValue:
value/function,
} See below
Changes in all editing modules
==============================
edittype property is extended with the support of the following input elements:
button, image and file
As described above in all editing modules we can add additional properties and
events to the editing element:
editoptions : {
dataUrl : value, dataInit: function, dataEvents : array, defaultValue:
value/function
}
-------------------------------------------------------------------------------
dataUrl option is valid only for the elements of type select - i.e.,
edittype:select
When this option is set, the element will be filled with values from the ajax
request. The data should be a valid html select element with the desired
options. <select>
<option value="1">One</option> <option value="2">Two</option>
</select>
In form editing for add/edit this is called only once. In order to call it every
time the form is launched you should set the option recreateForm:true or use
other events like beforeShowForm (with another custom ajax call) to fill the
desired element.
In inline edit and cell edit this is fired every time you edit the row or cell
element.
--------------------------------------------------------------------------------
dataInit : function (elem) {
// do something
}
If set, this function is called only once ? when the element is created. The
function is passed the specified element. This option is ideal for attaching
date picker, time picker, etc. Example:
dataInit : function (elem) {
$(elem).datepicker();
}
--------------------------------------------------------------------------------
dataEvents: list of events to apply to the data element; uses
$("#id").bind(type, [data], fn) to bind events to data element
Should be described like this dataEvents: [
{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); }
}, { type: 'keypress', fn: function(e) { console.log('keypress'); } }
]
The event(s) are called only once when the element is created
-------------------------------------------------------------------------------
defaultValue: 'value' or function This option is valid only in Form Editing
module when used with editGridRow method in add mode.If set this the input
element is set with this value if only element is empty. If used in selects the
text should be provided and not the key. Also when a function is used the
function should return value.
Now we can validate a url. The corresponding settings is in colModel
editrules:{required:true, url:true}
FormEditing
===========
In all methods that deal with the modals are added the following options (thanks
to Faserline Team: www.faserline.com)
jqModal: true. The default value is true. How it works. If set to true, first
jqGrid checks if the jqModal plugin is available. If this plugin is available we
create the modal according to the jqModal plugin. If this plugin is not
available jqGrid create its own modal. The difference between the jqModal window
and jqGrid modal window is that the overlay covers only the grid, but not the
entry page as jqModal does. If this option is set to false, jqGrid will create
its own modal as described above even if jqModal is available.
The only exception here is searchGrid method created with the new searchFilter
plugin, where this option is not available. In this method a jqGrid modal window
is used.
closeOnEscape : false. Default false. When set to true the modal window can be
closed with ESC key.
=======searchGrid==================
From now on jqGrid use a new search engine
thanks to wonderful plugin provided from Kasey Speakman ([email protected]).
This plugin can also be used separately. Detailed documentation is provided in
the jquery.searchFilter.js which is provided with jqGrid package.
These options are not used anymore in the searchGrid method
----------------------------------------------------------
top : 0,
left: 0,
width: 360,
height: 80,
modal: false,
closeicon: 'ico-close.gif',
dirty: false,
processData: "",
Added the following options
---------------------------
recreateFilter: false, This option construct the filter every time a search
button is clicked.
multipleSearch : false, When set to false the behaviour of the search is the
same as those in versions before 3.5 When set to true: 1. We have a possibility
to add/delete as many conditions as we want 2. The posted data to the server is
string (actually a json array converted to string)
sFilter: 'filters', This option has an effect only when the multipleSearch is
set to true; it describes the name of the posted string. By default this, i.e.
the posted data, can look like this
filters ={
"groupOp":"AND","rules":[{"field":"id","op":"gt","data":"1"},
{"field":"name","op":"bw","data":"Client"}]
}
groupOp determines the logical operator that can be used in the where statement
of the select. The value can be AND or OR. This can be changed used a select box
which is created at bottom of the search filter.
The rules array describes actually which fields and how they are included in the
where clause The field element describes the name of the field The op element
describes the operator that should be used in the search The data element is the
data that we want to search.
The above example (if getted and constructed correctly) should generate the
following where clause
SELECT .... FROM table,... WHERE id > 1 AND name LIKE 'Client%'
-------------------------------------------------------------------------------
As described above the search is constructed according to the searchoptions in
colModel
search : boolean , // true/false stype: value, // text/select
searchoptions : {
dataUrl : value,
dataInit: function,
dataEvents : array,
attr: object,
searchhidden: boolean,
sopt: array
}
Note that here is missing the defaultValue. The option is not implemented in
this method.
stype determines the search type - can be select or text. If not set a text is
used
searchoptions
-------------------------------------------------------------------------------
dataUrl option is valid only for the elements of type select, i.e.
edittype:select
When this option is set the element will be filled with values from the ajax
request. The data should be a valid html select element with the desired
options. <select>
<option value="1">One</option> <option value="2">Two</option>
</select>
This is called only once.
-------------------------------------------------------------------------------
dataInit : function (elem) {
// do something
}
If set this function is called only once when the element is created. To the
function is passed the element. Also this option is ideal for attaching date
picker, time picker and etc. Example
dataInit : function (elem) {
$(elem).datepicker();
}
--------------------------------------------------------------------------------
dataEvents: list of events to apply to the data element; uses
$("#id").bind(type, [data], fn) to bind events to data element
Should be described like this
dataEvents: [
{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); }},
{ type: 'keypress', fn: function(e) { console.log('keypress'); } }
]
The event(s) are called only once when the element is created
--------------------------------------------------------------------------------
attr is object where we can set valid attributes to the created element
attr : { title: "Some title" }
------------------------------------------------------------------------------
searchhidden : if set to true, the hidden element will appear in the search.
-------------------------------------------------------------------------------
array that correspond to the op element in the posted data and determines the
operation. If not set all the available options will be used; if set only the
set values will appear as selectboxes.
All available option are sopt:
['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
The corresponding texts are in language file and mean the following ['equal',
'not equal', 'less', 'less or equal','greater','greater or equal', 'begins
with','does not begin with','is in','is not in','ends with','does not end
with','contains','does not contain'],
Note that the elements in sopt array can be mixed in any order.
=========add/edit form==========
In the editGridRow method the following options are no longer used
closeicon: 'ico-close.gif',
imgpath: ''
Added new property formoptions (in colModel); thanks to Faserline Team
(www.faserline.com)
The purpose of these options is to reorder the elements in the form and to add
some information before and after the editing element.
formoptions : {
elmprefix:'',
elmsuffix:'',
rowpos:number,
colpos:number,
label: value
}
If you go to use this object in collModel it is recommended that all editing
fields use this property and with at least the rowpos and colpos set.
Elemprefix: if set, a text or html content appears before the input element
Elemsuffix: if set, a text or html content appears after the input element
Label: if set, this replace the name from colNames array that appears as label
in the form.
rowpos : number determines the row position of the element (again with the
text-label) in the form; the count begins from 1
colpos : number determines the column position of the element (again with the
label) in the form beginning from 1
Two elements can have equal row position, but different column position. This
will place the two elements in one row on the form.
=========== delete=================================
In the delGridRow method the following options are no longer used
closeicon: 'ico-close.gif',
imgpath: '',
============= view =============================
Added viewGridRow method; thanks to Faserline Team (www.faserline.com)
This method is similar to the editGridRow method except that the fields are not
editable and we do not have any events attached to the form. Here are the
options viewGridRow (options) where
options = {
top : 0,
left: 0,
width: 0,
height: 0,
modal: false,
drag: true,
closeOnEscape : false,
labelswidth: '30%'
}
All the options have the same thing as these in editGridRow except the option
labelswidth which default value is 30%. Since we construct the view with table
element it is difficult to calculate, in this case, how much width is needed for
the labels. Depending on the needs this value can be increased or decreased
Custom method
=============
In the custom module is added new method filterToolbar.
This method is the same as filterGrid, except that the search input elements are
placed in the grid just below the header elements. When the header elements are
resized the input search elements are also resized according to the new width.
Another difference to the filterGrid is that the filter toolbar uses definitions
from colModel just like the searchGrid
Should be called like this
jQuery("#mygrid").filterToolbar(options)
where options are
options = {
autosearch: true,
beforeSearch: null,
afterSearch: null,
beforeClear: null,
afterClear: null,
searchurl : ''
}
autosearch: true Search is performed according to the following rules For text
element when a Enter key is pressed while inputting values a search is
performed. For select element when the value changes.
beforeSearch - event which fires before a search
afterSearch - event which fires after a search
beforeClear - event which fires before clearing entered values (i.e.,
clearToolbar is activated)
afterClear - event which fires after clearing entered values (i.e., clearToolbar
is activated)
The rules of creating toolbar search input elements are the same as searchGrid
using the colModel
searchoptions : {
dataUrl : value,
dataInit: function,
dataEvents : array,
defaultValue: value,
attr: object
}
Note the missing sopt element, but addition of defaultValue property
This method has 3 new additional methods that can be used:
triggerToolbar - when called perform a search dynamically