JavaScript DHTML/SmartClient/ListGrid Click Selection
Содержание
Cell double click event
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD>
<BODY BGCOLOR="silver"> <SCRIPT> countryData = [ {
continent:"North America", countryName:"United States", countryCode:"US", area:9631420, population:298444215, gdp:12360.0, independence:new Date(1776,6,4), government:"federal republic", government_desc:2, capital:"Washington, DC", member_g8:true, article:"http://en.wikipedia.org/wiki/United_states"
}, {
continent:"Asia", countryName:"China", countryCode:"CH", area:9596960, population:1313973713, gdp:8859.0, government:"Communist state", government_desc:0, capital:"Beijing", member_g8:false, article:"http://en.wikipedia.org/wiki/China"
}, {
continent:"Asia", countryName:"Japan", countryCode:"JA", area:377835, population:127463611, gdp:4018.0, government:"constitutional monarchy with parliamentary government", government_desc:1, capital:"Tokyo", member_g8:true, article:"http://en.wikipedia.org/wiki/Japan"
}, {
continent:"Asia", countryName:"India", countryCode:"IN", area:3287590, population:1095351995, gdp:3611.0, independence:new Date(1947,7,15), government:"federal republic", government_desc:2, capital:"New Delhi", member_g8:false, article:"http://en.wikipedia.org/wiki/India"
}, {
continent:"Europe", countryName:"Germany", countryCode:"GM", area:357021, population:82422299, gdp:2504.0, independence:new Date(1871,0,18), government:"federal republic", government_desc:2, capital:"Berlin", member_g8:true, article:"http://en.wikipedia.org/wiki/Germany"
}, {
continent:"Europe", countryName:"United Kingdom", countryCode:"UK", area:244820, population:60609153, gdp:1830.0, independence:new Date(1801,0,1), government:"constitutional monarchy", government_desc:1, capital:"London", member_g8:true, article:"http://en.wikipedia.org/wiki/United_kingdom"
}, {
continent:"Europe", countryName:"France", countryCode:"FR", area:547030, population:60876136, gdp:1816.0, government:"republic", government_desc:5, capital:"Paris", member_g8:true, article:"http://en.wikipedia.org/wiki/France"
}, {
continent:"Europe", countryName:"Italy", countryCode:"IT", area:301230, population:58133509, gdp:1698.0, independence:new Date(1861,2,17), government:"republic", government_desc:5, capital:"Rome", member_g8:true, article:"http://en.wikipedia.org/wiki/Italy"
}, {
continent:"Asia", countryName:"Russia", countryCode:"RS", area:17075200, population:142893540, gdp:1589.0, independence:new Date(1991,7,24), government:"federation", government_desc:3, capital:"Moscow", member_g8:true, article:"http://en.wikipedia.org/wiki/Russia"
}, {
continent:"South America", countryName:"Brazil", countryCode:"BR", area:8511965, population:188078227, gdp:1556.0, independence:new Date(1822,8,7), government:"federative republic", government_desc:3, capital:"Brasilia", member_g8:false, article:"http://en.wikipedia.org/wiki/Brazil"
}, {
continent:"North America", countryName:"Canada", countryCode:"CA", area:9984670, population:33098932, gdp:1114.0, independence:new Date(1867,6,1), government:"constitutional monarchy with parliamentary democracy and federation", government_desc:1, capital:"Ottawa", member_g8:true, article:"http://en.wikipedia.org/wiki/Canada"
}, {
continent:"North America", countryName:"Mexico", countryCode:"MX", area:1972550, population:107449525, gdp:1067.0, independence:new Date(1810,8,16), government:"federal republic", government_desc:2, capital:"Mexico (Distrito Federal)", member_g8:false, article:"http://en.wikipedia.org/wiki/Mexico"
}, {
continent:"Europe", countryName:"Spain", countryCode:"SP", area:504782, population:40397842, gdp:1029.0, independence:new Date(1492,0,1), government:"parliamentary monarchy", government_desc:4, capital:"Madrid", member_g8:false, article:"http://en.wikipedia.org/wiki/Spain"
}, {
continent:"Asia", countryName:"South Korea", countryCode:"KS", area:98480, population:48846823, gdp:965.3, independence:new Date(1945,7,15), government:"republic", government_desc:5, capital:"Seoul", member_g8:false, article:"http://en.wikipedia.org/wiki/South_korea"
}, {
continent:"Asia", countryName:"Indonesia", countryCode:"ID", area:1919440, population:245452739, gdp:865.6, independence:new Date(1945,7,17), government:"republic", government_desc:5, capital:"Jakarta", member_g8:false, article:"http://en.wikipedia.org/wiki/Indonesia"
} ] isc.DataSource.create({
ID: "countryDS", fields:[ {name:"countryCode", title:"Code"}, {name:"countryName", title:"Country"}, {name:"capital", title:"Capital"} ], clientOnly: true, testData: countryData
}) isc.ListGrid.create({
ID: "countryList", width:500, height:224, alternateRecordStyles:true, data: countryData, fields:[ {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"}, {name:"countryName", title:"Country"}, {name:"capital", title:"Capital"}, {name:"continent", title:"Continent"} ], sayCellEvent: function (eventText, record, colNum) { isc.say( eventText + " " + this.getField(colNum).title + ":" + record[this.getFieldName(colNum)] + " (Country:" + record.countryName + ")" ) }, cellClick: function (record, rowNum, colNum) { clickDisplay.setContents( "Clicked " + this.getField(colNum).title + ":" + record[this.getFieldName(colNum)] + " (Country:" + record.countryName + ")" ) }, cellDoubleClick: "this.sayCellEvent("Double-clicked", record, colNum)", cellContextClick: "this.sayCellEvent("Context-clicked", record, colNum); return false;"
})
isc.Label.create({
ID:"clickDisplay", width:200, top:250, align:"center", border:"1px solid #808080", contents:"click a value in the grid"
})
</SCRIPT>
</BODY> </HTML>
</source>
Click the ListGrid to fill a form
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> // simple client-only dataSource isc.DataSource.create({
ID:"employees", clientOnly:true, fields:[ {name:"employeeID", type:"sequence", hidden:true, primaryKey:true}, {name:"name", title:"Name"}, {name:"hireDate", title:"Hiring Date", type:"date"} ], testData:[ {employeeID:452, name:"Gene Porter", hireDate:new Date(2005,1,4)}, {employeeID:782, name:"Cheryl Pearson", hireDate:new Date(2007,11,6)}, {employeeID:751, name:"Rogine Leger", hireDate:new Date(2007,10,22)}, ]
}) Date.setShortDisplayFormat("toJapanShortDate"); Date.setInputFormat("YMD"); isc.ListGrid.create({
ID:"employeeGrid", width:250, height:100, canEdit:true, dataSource:"employees", autoFetchData:true, recordClick:"employeeForm.editRecord(record)"
}) isc.DynamicForm.create({
ID:"employeeForm", top:150, dataSource:"employees", fields:[ {name:"name"}, {name:"hireDate", useTextField:true}, {type:"button", title:"Save Edits", click:"form.saveData()"} ]
}) </SCRIPT> </BODY> </HTML>
</source>
Display selected rows in another ListGrid
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD>
<BODY BGCOLOR="silver"> <SCRIPT> countryData = [ {
continent:"North America", countryName:"United States", countryCode:"US", area:9631420, population:298444215, gdp:12360.0, independence:new Date(1776,6,4), government:"federal republic", government_desc:2, capital:"Washington, DC", member_g8:true, article:"http://en.wikipedia.org/wiki/United_states"
}, {
continent:"Asia", countryName:"China", countryCode:"CH", area:9596960, population:1313973713, gdp:8859.0, government:"Communist state", government_desc:0, capital:"Beijing", member_g8:false, article:"http://en.wikipedia.org/wiki/China"
}, {
continent:"Asia", countryName:"Japan", countryCode:"JA", area:377835, population:127463611, gdp:4018.0, government:"constitutional monarchy with parliamentary government", government_desc:1, capital:"Tokyo", member_g8:true, article:"http://en.wikipedia.org/wiki/Japan"
}, {
continent:"Asia", countryName:"India", countryCode:"IN", area:3287590, population:1095351995, gdp:3611.0, independence:new Date(1947,7,15), government:"federal republic", government_desc:2, capital:"New Delhi", member_g8:false, article:"http://en.wikipedia.org/wiki/India"
}, {
continent:"Europe", countryName:"Germany", countryCode:"GM", area:357021, population:82422299, gdp:2504.0, independence:new Date(1871,0,18), government:"federal republic", government_desc:2, capital:"Berlin", member_g8:true, article:"http://en.wikipedia.org/wiki/Germany"
}, {
continent:"Europe", countryName:"United Kingdom", countryCode:"UK", area:244820, population:60609153, gdp:1830.0, independence:new Date(1801,0,1), government:"constitutional monarchy", government_desc:1, capital:"London", member_g8:true, article:"http://en.wikipedia.org/wiki/United_kingdom"
}, {
continent:"Europe", countryName:"France", countryCode:"FR", area:547030, population:60876136, gdp:1816.0, government:"republic", government_desc:5, capital:"Paris", member_g8:true, article:"http://en.wikipedia.org/wiki/France"
}, {
continent:"Europe", countryName:"Italy", countryCode:"IT", area:301230, population:58133509, gdp:1698.0, independence:new Date(1861,2,17), government:"republic", government_desc:5, capital:"Rome", member_g8:true, article:"http://en.wikipedia.org/wiki/Italy"
}, {
continent:"Asia", countryName:"Russia", countryCode:"RS", area:17075200, population:142893540, gdp:1589.0, independence:new Date(1991,7,24), government:"federation", government_desc:3, capital:"Moscow", member_g8:true, article:"http://en.wikipedia.org/wiki/Russia"
}, {
continent:"South America", countryName:"Brazil", countryCode:"BR", area:8511965, population:188078227, gdp:1556.0, independence:new Date(1822,8,7), government:"federative republic", government_desc:3, capital:"Brasilia", member_g8:false, article:"http://en.wikipedia.org/wiki/Brazil"
}, {
continent:"North America", countryName:"Canada", countryCode:"CA", area:9984670, population:33098932, gdp:1114.0, independence:new Date(1867,6,1), government:"constitutional monarchy with parliamentary democracy and federation", government_desc:1, capital:"Ottawa", member_g8:true, article:"http://en.wikipedia.org/wiki/Canada"
}, {
continent:"North America", countryName:"Mexico", countryCode:"MX", area:1972550, population:107449525, gdp:1067.0, independence:new Date(1810,8,16), government:"federal republic", government_desc:2, capital:"Mexico (Distrito Federal)", member_g8:false, article:"http://en.wikipedia.org/wiki/Mexico"
}, {
continent:"Europe", countryName:"Spain", countryCode:"SP", area:504782, population:40397842, gdp:1029.0, independence:new Date(1492,0,1), government:"parliamentary monarchy", government_desc:4, capital:"Madrid", member_g8:false, article:"http://en.wikipedia.org/wiki/Spain"
}, {
continent:"Asia", countryName:"South Korea", countryCode:"KS", area:98480, population:48846823, gdp:965.3, independence:new Date(1945,7,15), government:"republic", government_desc:5, capital:"Seoul", member_g8:false, article:"http://en.wikipedia.org/wiki/South_korea"
}, {
continent:"Asia", countryName:"Indonesia", countryCode:"ID", area:1919440, population:245452739, gdp:865.6, independence:new Date(1945,7,17), government:"republic", government_desc:5, capital:"Jakarta", member_g8:false, article:"http://en.wikipedia.org/wiki/Indonesia"
} ] isc.DataSource.create({
ID: "countryDS", fields:[ {name:"countryCode", title:"Code"}, {name:"countryName", title:"Country"}, {name:"capital", title:"Capital"} ], clientOnly: true, testData: countryData
}) isc.ListGrid.create({
ID: "countryList", width:500, height:224, alternateRecordStyles:true, data: countryData, fields:[ {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"}, {name:"countryName", title:"Country"}, {name:"capital", title:"Capital"}, {name:"continent", title:"Continent"} ], selectionType: "multiple", canDragSelect: true, selectionChanged: "selectedCountries.setData(this.getSelection())"
})
isc.ListGrid.create({
ID: "selectedCountries", width:250, height:100, top:250, alternateRecordStyles:true, showAllRecords:true, emptyMessage: "
nothing selected</b>", fields:[ {name:"countryName", title:"Selected countries"} ]
})
</SCRIPT>
</BODY> </HTML>
</source>
Multiple selection
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD>
<BODY BGCOLOR="silver"> <SCRIPT> countryData = [ {
continent:"North America", countryName:"United States", countryCode:"US", area:9631420, population:298444215, gdp:12360.0, independence:new Date(1776,6,4), government:"federal republic", government_desc:2, capital:"Washington, DC", member_g8:true, article:"http://en.wikipedia.org/wiki/United_states"
}, {
continent:"Asia", countryName:"China", countryCode:"CH", area:9596960, population:1313973713, gdp:8859.0, government:"Communist state", government_desc:0, capital:"Beijing", member_g8:false, article:"http://en.wikipedia.org/wiki/China"
}, {
continent:"Asia", countryName:"Japan", countryCode:"JA", area:377835, population:127463611, gdp:4018.0, government:"constitutional monarchy with parliamentary government", government_desc:1, capital:"Tokyo", member_g8:true, article:"http://en.wikipedia.org/wiki/Japan"
}, {
continent:"Asia", countryName:"India", countryCode:"IN", area:3287590, population:1095351995, gdp:3611.0, independence:new Date(1947,7,15), government:"federal republic", government_desc:2, capital:"New Delhi", member_g8:false, article:"http://en.wikipedia.org/wiki/India"
}, {
continent:"Europe", countryName:"Germany", countryCode:"GM", area:357021, population:82422299, gdp:2504.0, independence:new Date(1871,0,18), government:"federal republic", government_desc:2, capital:"Berlin", member_g8:true, article:"http://en.wikipedia.org/wiki/Germany"
}, {
continent:"Europe", countryName:"United Kingdom", countryCode:"UK", area:244820, population:60609153, gdp:1830.0, independence:new Date(1801,0,1), government:"constitutional monarchy", government_desc:1, capital:"London", member_g8:true, article:"http://en.wikipedia.org/wiki/United_kingdom"
}, {
continent:"Europe", countryName:"France", countryCode:"FR", area:547030, population:60876136, gdp:1816.0, government:"republic", government_desc:5, capital:"Paris", member_g8:true, article:"http://en.wikipedia.org/wiki/France"
}, {
continent:"Europe", countryName:"Italy", countryCode:"IT", area:301230, population:58133509, gdp:1698.0, independence:new Date(1861,2,17), government:"republic", government_desc:5, capital:"Rome", member_g8:true, article:"http://en.wikipedia.org/wiki/Italy"
}, {
continent:"Asia", countryName:"Russia", countryCode:"RS", area:17075200, population:142893540, gdp:1589.0, independence:new Date(1991,7,24), government:"federation", government_desc:3, capital:"Moscow", member_g8:true, article:"http://en.wikipedia.org/wiki/Russia"
}, {
continent:"South America", countryName:"Brazil", countryCode:"BR", area:8511965, population:188078227, gdp:1556.0, independence:new Date(1822,8,7), government:"federative republic", government_desc:3, capital:"Brasilia", member_g8:false, article:"http://en.wikipedia.org/wiki/Brazil"
}, {
continent:"North America", countryName:"Canada", countryCode:"CA", area:9984670, population:33098932, gdp:1114.0, independence:new Date(1867,6,1), government:"constitutional monarchy with parliamentary democracy and federation", government_desc:1, capital:"Ottawa", member_g8:true, article:"http://en.wikipedia.org/wiki/Canada"
}, {
continent:"North America", countryName:"Mexico", countryCode:"MX", area:1972550, population:107449525, gdp:1067.0, independence:new Date(1810,8,16), government:"federal republic", government_desc:2, capital:"Mexico (Distrito Federal)", member_g8:false, article:"http://en.wikipedia.org/wiki/Mexico"
}, {
continent:"Europe", countryName:"Spain", countryCode:"SP", area:504782, population:40397842, gdp:1029.0, independence:new Date(1492,0,1), government:"parliamentary monarchy", government_desc:4, capital:"Madrid", member_g8:false, article:"http://en.wikipedia.org/wiki/Spain"
}, {
continent:"Asia", countryName:"South Korea", countryCode:"KS", area:98480, population:48846823, gdp:965.3, independence:new Date(1945,7,15), government:"republic", government_desc:5, capital:"Seoul", member_g8:false, article:"http://en.wikipedia.org/wiki/South_korea"
}, {
continent:"Asia", countryName:"Indonesia", countryCode:"ID", area:1919440, population:245452739, gdp:865.6, independence:new Date(1945,7,17), government:"republic", government_desc:5, capital:"Jakarta", member_g8:false, article:"http://en.wikipedia.org/wiki/Indonesia"
} ] isc.DataSource.create({
ID: "countryDS", fields:[ {name:"countryCode", title:"Code"}, {name:"countryName", title:"Country"}, {name:"capital", title:"Capital"} ], clientOnly: true, testData: countryData
}) isc.ListGrid.create({
ID: "countryList", width:500, height:224, alternateRecordStyles:true, data: countryData, fields:[ {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"}, {name:"countryName", title:"Country"}, {name:"capital", title:"Capital"}, {name:"continent", title:"Continent"} ], selectionType: "multiple", selectionChanged: "selectedCountries.setData(this.getSelection())"
})
isc.ListGrid.create({
ID: "selectedCountries", width:250, height:100, top:250, alternateRecordStyles:true, showAllRecords:true, emptyMessage: "
nothing selected</b>", fields:[ {name:"countryName", title:"Selected countries"} ]
})
</SCRIPT>
</BODY> </HTML>
</source>
Record click event
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD>
<BODY BGCOLOR="silver"> <SCRIPT> countryData = [ {
continent:"North America", countryName:"United States", countryCode:"US", area:9631420, population:298444215, gdp:12360.0, independence:new Date(1776,6,4), government:"federal republic", government_desc:2, capital:"Washington, DC", member_g8:true, article:"http://en.wikipedia.org/wiki/United_states"
}, {
continent:"Asia", countryName:"China", countryCode:"CH", area:9596960, population:1313973713, gdp:8859.0, government:"Communist state", government_desc:0, capital:"Beijing", member_g8:false, article:"http://en.wikipedia.org/wiki/China"
}, {
continent:"Asia", countryName:"Japan", countryCode:"JA", area:377835, population:127463611, gdp:4018.0, government:"constitutional monarchy with parliamentary government", government_desc:1, capital:"Tokyo", member_g8:true, article:"http://en.wikipedia.org/wiki/Japan"
}, {
continent:"Asia", countryName:"India", countryCode:"IN", area:3287590, population:1095351995, gdp:3611.0, independence:new Date(1947,7,15), government:"federal republic", government_desc:2, capital:"New Delhi", member_g8:false, article:"http://en.wikipedia.org/wiki/India"
}, {
continent:"Europe", countryName:"Germany", countryCode:"GM", area:357021, population:82422299, gdp:2504.0, independence:new Date(1871,0,18), government:"federal republic", government_desc:2, capital:"Berlin", member_g8:true, article:"http://en.wikipedia.org/wiki/Germany"
}, {
continent:"Europe", countryName:"United Kingdom", countryCode:"UK", area:244820, population:60609153, gdp:1830.0, independence:new Date(1801,0,1), government:"constitutional monarchy", government_desc:1, capital:"London", member_g8:true, article:"http://en.wikipedia.org/wiki/United_kingdom"
}, {
continent:"Europe", countryName:"France", countryCode:"FR", area:547030, population:60876136, gdp:1816.0, government:"republic", government_desc:5, capital:"Paris", member_g8:true, article:"http://en.wikipedia.org/wiki/France"
}, {
continent:"Europe", countryName:"Italy", countryCode:"IT", area:301230, population:58133509, gdp:1698.0, independence:new Date(1861,2,17), government:"republic", government_desc:5, capital:"Rome", member_g8:true, article:"http://en.wikipedia.org/wiki/Italy"
}, {
continent:"Asia", countryName:"Russia", countryCode:"RS", area:17075200, population:142893540, gdp:1589.0, independence:new Date(1991,7,24), government:"federation", government_desc:3, capital:"Moscow", member_g8:true, article:"http://en.wikipedia.org/wiki/Russia"
}, {
continent:"South America", countryName:"Brazil", countryCode:"BR", area:8511965, population:188078227, gdp:1556.0, independence:new Date(1822,8,7), government:"federative republic", government_desc:3, capital:"Brasilia", member_g8:false, article:"http://en.wikipedia.org/wiki/Brazil"
}, {
continent:"North America", countryName:"Canada", countryCode:"CA", area:9984670, population:33098932, gdp:1114.0, independence:new Date(1867,6,1), government:"constitutional monarchy with parliamentary democracy and federation", government_desc:1, capital:"Ottawa", member_g8:true, article:"http://en.wikipedia.org/wiki/Canada"
}, {
continent:"North America", countryName:"Mexico", countryCode:"MX", area:1972550, population:107449525, gdp:1067.0, independence:new Date(1810,8,16), government:"federal republic", government_desc:2, capital:"Mexico (Distrito Federal)", member_g8:false, article:"http://en.wikipedia.org/wiki/Mexico"
}, {
continent:"Europe", countryName:"Spain", countryCode:"SP", area:504782, population:40397842, gdp:1029.0, independence:new Date(1492,0,1), government:"parliamentary monarchy", government_desc:4, capital:"Madrid", member_g8:false, article:"http://en.wikipedia.org/wiki/Spain"
}, {
continent:"Asia", countryName:"South Korea", countryCode:"KS", area:98480, population:48846823, gdp:965.3, independence:new Date(1945,7,15), government:"republic", government_desc:5, capital:"Seoul", member_g8:false, article:"http://en.wikipedia.org/wiki/South_korea"
}, {
continent:"Asia", countryName:"Indonesia", countryCode:"ID", area:1919440, population:245452739, gdp:865.6, independence:new Date(1945,7,17), government:"republic", government_desc:5, capital:"Jakarta", member_g8:false, article:"http://en.wikipedia.org/wiki/Indonesia"
} ] isc.DataSource.create({
ID: "countryDS", fields:[ {name:"countryCode", title:"Code"}, {name:"countryName", title:"Country"}, {name:"capital", title:"Capital"} ], clientOnly: true, testData: countryData
}) isc.ListGrid.create({
ID: "countryList", width:500, height:224, alternateRecordStyles:true, data: countryData, fields:[ {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"}, {name:"countryName", title:"Country"}, {name:"capital", title:"Capital"}, {name:"continent", title:"Continent"} ], recordClick: "countryDetails.setData(record)", recordDoubleClick: "isc.say("Double-clicked country: "+record.countryName+"")", rowContextClick: "isc.say("Context-clicked country: "+record.countryName+""); return false;"
})
isc.DetailViewer.create({
ID:"countryDetails", width:500, top:250, fields:[ {name:"countryName", title:"Country"}, {name:"countryCode", title:"Code"}, {name:"government", title:"Government"} ], emptyMessage:"click a row in the grid"
})
</SCRIPT>
</BODY> </HTML>
</source>
Simple ListGrid selection
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD>
<BODY BGCOLOR="silver"> <SCRIPT> countryData = [ {
continent:"North America", countryName:"United States", countryCode:"US", area:9631420, population:298444215, gdp:12360.0, independence:new Date(1776,6,4), government:"federal republic", government_desc:2, capital:"Washington, DC", member_g8:true, article:"http://en.wikipedia.org/wiki/United_states"
}, {
continent:"Asia", countryName:"China", countryCode:"CH", area:9596960, population:1313973713, gdp:8859.0, government:"Communist state", government_desc:0, capital:"Beijing", member_g8:false, article:"http://en.wikipedia.org/wiki/China"
}, {
continent:"Asia", countryName:"Japan", countryCode:"JA", area:377835, population:127463611, gdp:4018.0, government:"constitutional monarchy with parliamentary government", government_desc:1, capital:"Tokyo", member_g8:true, article:"http://en.wikipedia.org/wiki/Japan"
}, {
continent:"Asia", countryName:"India", countryCode:"IN", area:3287590, population:1095351995, gdp:3611.0, independence:new Date(1947,7,15), government:"federal republic", government_desc:2, capital:"New Delhi", member_g8:false, article:"http://en.wikipedia.org/wiki/India"
}, {
continent:"Europe", countryName:"Germany", countryCode:"GM", area:357021, population:82422299, gdp:2504.0, independence:new Date(1871,0,18), government:"federal republic", government_desc:2, capital:"Berlin", member_g8:true, article:"http://en.wikipedia.org/wiki/Germany"
}, {
continent:"Europe", countryName:"United Kingdom", countryCode:"UK", area:244820, population:60609153, gdp:1830.0, independence:new Date(1801,0,1), government:"constitutional monarchy", government_desc:1, capital:"London", member_g8:true, article:"http://en.wikipedia.org/wiki/United_kingdom"
}, {
continent:"Europe", countryName:"France", countryCode:"FR", area:547030, population:60876136, gdp:1816.0, government:"republic", government_desc:5, capital:"Paris", member_g8:true, article:"http://en.wikipedia.org/wiki/France"
}, {
continent:"Europe", countryName:"Italy", countryCode:"IT", area:301230, population:58133509, gdp:1698.0, independence:new Date(1861,2,17), government:"republic", government_desc:5, capital:"Rome", member_g8:true, article:"http://en.wikipedia.org/wiki/Italy"
}, {
continent:"Asia", countryName:"Russia", countryCode:"RS", area:17075200, population:142893540, gdp:1589.0, independence:new Date(1991,7,24), government:"federation", government_desc:3, capital:"Moscow", member_g8:true, article:"http://en.wikipedia.org/wiki/Russia"
}, {
continent:"South America", countryName:"Brazil", countryCode:"BR", area:8511965, population:188078227, gdp:1556.0, independence:new Date(1822,8,7), government:"federative republic", government_desc:3, capital:"Brasilia", member_g8:false, article:"http://en.wikipedia.org/wiki/Brazil"
}, {
continent:"North America", countryName:"Canada", countryCode:"CA", area:9984670, population:33098932, gdp:1114.0, independence:new Date(1867,6,1), government:"constitutional monarchy with parliamentary democracy and federation", government_desc:1, capital:"Ottawa", member_g8:true, article:"http://en.wikipedia.org/wiki/Canada"
}, {
continent:"North America", countryName:"Mexico", countryCode:"MX", area:1972550, population:107449525, gdp:1067.0, independence:new Date(1810,8,16), government:"federal republic", government_desc:2, capital:"Mexico (Distrito Federal)", member_g8:false, article:"http://en.wikipedia.org/wiki/Mexico"
}, {
continent:"Europe", countryName:"Spain", countryCode:"SP", area:504782, population:40397842, gdp:1029.0, independence:new Date(1492,0,1), government:"parliamentary monarchy", government_desc:4, capital:"Madrid", member_g8:false, article:"http://en.wikipedia.org/wiki/Spain"
}, {
continent:"Asia", countryName:"South Korea", countryCode:"KS", area:98480, population:48846823, gdp:965.3, independence:new Date(1945,7,15), government:"republic", government_desc:5, capital:"Seoul", member_g8:false, article:"http://en.wikipedia.org/wiki/South_korea"
}, {
continent:"Asia", countryName:"Indonesia", countryCode:"ID", area:1919440, population:245452739, gdp:865.6, independence:new Date(1945,7,17), government:"republic", government_desc:5, capital:"Jakarta", member_g8:false, article:"http://en.wikipedia.org/wiki/Indonesia"
} ] isc.DataSource.create({
ID: "countryDS", fields:[ {name:"countryCode", title:"Code"}, {name:"countryName", title:"Country"}, {name:"capital", title:"Capital"} ], clientOnly: true, testData: countryData
}) isc.ListGrid.create({
ID: "countryList", width:500, height:224, alternateRecordStyles:true, data: countryData, fields:[ {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"}, {name:"countryName", title:"Country"}, {name:"capital", title:"Capital"}, {name:"continent", title:"Continent"} ], selectionType: "simple", selectionChanged: "selectedCountries.setData(this.getSelection())"
})
isc.ListGrid.create({
ID: "selectedCountries", width:250, height:100, top:250, alternateRecordStyles:true, showAllRecords:true, emptyMessage: "
nothing selected</b>", fields:[ {name:"countryName", title:"Selected countries"} ]
})
</SCRIPT>
</BODY> </HTML>
</source>
Single selection
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD>
<BODY BGCOLOR="silver"> <SCRIPT> countryData = [ {
continent:"North America", countryName:"United States", countryCode:"US", area:9631420, population:298444215, gdp:12360.0, independence:new Date(1776,6,4), government:"federal republic", government_desc:2, capital:"Washington, DC", member_g8:true, article:"http://en.wikipedia.org/wiki/United_states"
}, {
continent:"Asia", countryName:"China", countryCode:"CH", area:9596960, population:1313973713, gdp:8859.0, government:"Communist state", government_desc:0, capital:"Beijing", member_g8:false, article:"http://en.wikipedia.org/wiki/China"
}, {
continent:"Asia", countryName:"Japan", countryCode:"JA", area:377835, population:127463611, gdp:4018.0, government:"constitutional monarchy with parliamentary government", government_desc:1, capital:"Tokyo", member_g8:true, article:"http://en.wikipedia.org/wiki/Japan"
}, {
continent:"Asia", countryName:"India", countryCode:"IN", area:3287590, population:1095351995, gdp:3611.0, independence:new Date(1947,7,15), government:"federal republic", government_desc:2, capital:"New Delhi", member_g8:false, article:"http://en.wikipedia.org/wiki/India"
}, {
continent:"Europe", countryName:"Germany", countryCode:"GM", area:357021, population:82422299, gdp:2504.0, independence:new Date(1871,0,18), government:"federal republic", government_desc:2, capital:"Berlin", member_g8:true, article:"http://en.wikipedia.org/wiki/Germany"
}, {
continent:"Europe", countryName:"United Kingdom", countryCode:"UK", area:244820, population:60609153, gdp:1830.0, independence:new Date(1801,0,1), government:"constitutional monarchy", government_desc:1, capital:"London", member_g8:true, article:"http://en.wikipedia.org/wiki/United_kingdom"
}, {
continent:"Europe", countryName:"France", countryCode:"FR", area:547030, population:60876136, gdp:1816.0, government:"republic", government_desc:5, capital:"Paris", member_g8:true, article:"http://en.wikipedia.org/wiki/France"
}, {
continent:"Europe", countryName:"Italy", countryCode:"IT", area:301230, population:58133509, gdp:1698.0, independence:new Date(1861,2,17), government:"republic", government_desc:5, capital:"Rome", member_g8:true, article:"http://en.wikipedia.org/wiki/Italy"
}, {
continent:"Asia", countryName:"Russia", countryCode:"RS", area:17075200, population:142893540, gdp:1589.0, independence:new Date(1991,7,24), government:"federation", government_desc:3, capital:"Moscow", member_g8:true, article:"http://en.wikipedia.org/wiki/Russia"
}, {
continent:"South America", countryName:"Brazil", countryCode:"BR", area:8511965, population:188078227, gdp:1556.0, independence:new Date(1822,8,7), government:"federative republic", government_desc:3, capital:"Brasilia", member_g8:false, article:"http://en.wikipedia.org/wiki/Brazil"
}, {
continent:"North America", countryName:"Canada", countryCode:"CA", area:9984670, population:33098932, gdp:1114.0, independence:new Date(1867,6,1), government:"constitutional monarchy with parliamentary democracy and federation", government_desc:1, capital:"Ottawa", member_g8:true, article:"http://en.wikipedia.org/wiki/Canada"
}, {
continent:"North America", countryName:"Mexico", countryCode:"MX", area:1972550, population:107449525, gdp:1067.0, independence:new Date(1810,8,16), government:"federal republic", government_desc:2, capital:"Mexico (Distrito Federal)", member_g8:false, article:"http://en.wikipedia.org/wiki/Mexico"
}, {
continent:"Europe", countryName:"Spain", countryCode:"SP", area:504782, population:40397842, gdp:1029.0, independence:new Date(1492,0,1), government:"parliamentary monarchy", government_desc:4, capital:"Madrid", member_g8:false, article:"http://en.wikipedia.org/wiki/Spain"
}, {
continent:"Asia", countryName:"South Korea", countryCode:"KS", area:98480, population:48846823, gdp:965.3, independence:new Date(1945,7,15), government:"republic", government_desc:5, capital:"Seoul", member_g8:false, article:"http://en.wikipedia.org/wiki/South_korea"
}, {
continent:"Asia", countryName:"Indonesia", countryCode:"ID", area:1919440, population:245452739, gdp:865.6, independence:new Date(1945,7,17), government:"republic", government_desc:5, capital:"Jakarta", member_g8:false, article:"http://en.wikipedia.org/wiki/Indonesia"
} ] isc.DataSource.create({
ID: "countryDS", fields:[ {name:"countryCode", title:"Code"}, {name:"countryName", title:"Country"}, {name:"capital", title:"Capital"} ], clientOnly: true, testData: countryData
}) isc.ListGrid.create({
ID: "countryList", width:500, height:224, alternateRecordStyles:true, data: countryData, fields:[ {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"}, {name:"countryName", title:"Country"}, {name:"capital", title:"Capital"}, {name:"continent", title:"Continent"} ], selectionType: "single", selectionChanged: "selectedCountries.setData(this.getSelection())"
})
isc.ListGrid.create({
ID: "selectedCountries", width:250, height:100, top:250, alternateRecordStyles:true, showAllRecords:true, emptyMessage: "
nothing selected</b>", fields:[ {name:"countryName", title:"Selected country"} ]
})
</SCRIPT>
</BODY> </HTML>
</source>