1+ <!DOCTYPE HTML>
2+ < html >
3+ < head >
4+ < meta http-equiv ="Content-Type " content ="text/html; charset=iso-8859-1 ">
5+ < link rel ="shortcut icon " type ="image/ico " href ="favicon.ico " />
6+ < title > SlickGrid example 3: Editing</ title >
7+ < link rel ="stylesheet " href ="../slick.grid.css " type ="text/css "/>
8+ < link rel ="stylesheet " href ="../css/smoothness/jquery-ui-1.11.3.custom.css " type ="text/css "/>
9+ < link rel ="stylesheet " href ="examples.css " type ="text/css "/>
10+ < style >
11+ .cell-title {
12+ font-weight : bold;
13+ }
14+
15+ .cell-effort-driven {
16+ text-align : center;
17+ }
18+ </ style >
19+ </ head >
20+ < body >
21+ < div style ="position:relative ">
22+ < div style ="width:600px; ">
23+ < div id ="myGrid " style ="width:100%;height:500px; "> </ div >
24+ </ div >
25+
26+ < div class ="options-panel ">
27+ < h2 > Demonstrates:</ h2 >
28+ < ul >
29+ < li > adding basic keyboard navigation and editing</ li >
30+ < li > custom editors and validators</ li >
31+ < li > auto-edit settings</ li >
32+ </ ul >
33+
34+ < h2 > Options:</ h2 >
35+ < button onclick ="grid.setOptions({autoEdit:true}) "> Auto-edit ON</ button >
36+
37+ < button onclick ="grid.setOptions({autoEdit:false}) "> Auto-edit OFF</ button >
38+ < h2 > View Source:</ h2 >
39+ < ul >
40+ < li > < A href ="https://github.com/6pac/SlickGrid/blob/master/examples/example3-editing.html " target ="_sourcewindow "> View the source for this example on Github</ a > </ li >
41+ </ ul >
42+
43+ < button onclick ="grid.gotoCell( 0,0,true ) "> Goto 0</ button >
44+
45+ < button onclick ="grid.gotoCell( 5,0,true ) "> Goto 5</ button >
46+ < div id ="eventDiv "> </ div >
47+ </ div >
48+ </ div >
49+
50+ < script src ="../lib/firebugx.js "> </ script >
51+
52+ < script src ="../lib/jquery-1.11.2.min.js "> </ script >
53+ < script src ="../lib/jquery-ui-1.11.3.min.js "> </ script >
54+ < script src ="../lib/jquery.event.drag-2.3.0.js "> </ script >
55+
56+ < script src ="../slick.core.js "> </ script >
57+ < script src ="../plugins/slick.cellrangedecorator.js "> </ script >
58+ < script src ="../plugins/slick.cellrangeselector.js "> </ script >
59+ < script src ="../plugins/slick.cellselectionmodel.js "> </ script >
60+ < script src ="../plugins/slick.rowselectionmodel.js "> </ script >
61+ < script src ="../slick.formatters.js "> </ script >
62+ < script src ="../slick.editors.js "> </ script >
63+ < script src ="../slick.grid.js "> </ script >
64+
65+ < script >
66+ function requiredFieldValidator ( value ) {
67+ if ( value == null || value == undefined || ! value . length ) {
68+ return { valid : false , msg : "This is a required field" } ;
69+ } else {
70+ return { valid : true , msg : null } ;
71+ }
72+ }
73+
74+ var grid ;
75+ var data = [ ] ;
76+ var columns = [
77+ { id : "title" , name : "Title" , field : "title" , width : 120 , cssClass : "cell-title" , editor : Slick . Editors . Text , validator : requiredFieldValidator } ,
78+ { id : "desc" , name : "Description" , field : "description" , width : 100 , editor : Slick . Editors . LongText } ,
79+ { id : "duration" , name : "Duration" , field : "duration" , editor : Slick . Editors . Text } ,
80+ { id : "%" , name : "% Complete" , field : "percentComplete" , width : 80 , resizable : false , formatter : Slick . Formatters . PercentCompleteBar , editor : Slick . Editors . PercentComplete } ,
81+ { id : "start" , name : "Start" , field : "start" , minWidth : 60 , editor : Slick . Editors . Date } ,
82+ { id : "finish" , name : "Finish" , field : "finish" , minWidth : 60 , editor : Slick . Editors . Date } ,
83+ { id : "effort-driven" , name : "Effort Driven" , width : 80 , minWidth : 20 , maxWidth : 80 , cssClass : "cell-effort-driven" , field : "effortDriven" , formatter : Slick . Formatters . Checkmark , editor : Slick . Editors . Checkbox }
84+ ] ;
85+ var options = {
86+ editable : true ,
87+ enableAddRow : true ,
88+ enableCellNavigation : true ,
89+ asyncEditorLoading : false ,
90+ autoEdit : true
91+ } ;
92+
93+ $ ( function ( ) {
94+ for ( var i = 0 ; i < 500 ; i ++ ) {
95+ var d = ( data [ i ] = { } ) ;
96+
97+ d [ "title" ] = "Task " + i ;
98+ d [ "description" ] = "This is a sample task description.\n It can be multiline" ;
99+ d [ "duration" ] = "5 days" ;
100+ d [ "percentComplete" ] = Math . round ( Math . random ( ) * 100 ) ;
101+ d [ "start" ] = "01/01/2009" ;
102+ d [ "finish" ] = "01/05/2009" ;
103+ d [ "effortDriven" ] = ( i % 5 == 0 ) ;
104+ }
105+
106+ grid = new Slick . Grid ( "#myGrid" , data , columns , options ) ;
107+
108+ /* I change the selection model to RowSelectionModel from CellSelectionModel */
109+ grid . setSelectionModel ( new Slick . RowSelectionModel ( ) ) ;
110+
111+ grid . onAddNewRow . subscribe ( function ( e , args ) {
112+ var item = args . item ;
113+ grid . invalidateRow ( data . length ) ;
114+ data . push ( item ) ;
115+ grid . updateRowCount ( ) ;
116+ grid . render ( ) ;
117+ } ) ;
118+
119+ var eventNum = 0 ;
120+ grid . onSelectedRowsChanged . subscribe ( function ( e , args ) {
121+ var eventDiv = $ ( "#eventDiv" ) ;
122+ eventDiv . text ( eventDiv . text ( ) + "onSelectedRowsChanged-" + eventNum ++ + " " ) ;
123+ } ) ;
124+
125+ /* i try to reproduce the situation using my class but it's not necessary.*/
126+ // in the version 2.3.2 when i was call the function gotoCell,
127+ // the row went selected and the callback subscribed in onSelectRow event's was triggered.
128+ // But in this new version the only one thing that works is the editor.
129+
130+ } )
131+ </ script >
132+ </ body >
133+ </ html >
0 commit comments