JavaScript DHTML/SmartClient/ListGrid Columns
Содержание
Column sort
<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:"population", title:"Population", formatCellValue:"isc.Format.toUSString(value)"}, {name:"area", title:"Area (km²)", formatCellValue:"isc.Format.toUSString(value)"} ], // initial sort on Population, high-to-low sortFieldNum: 2, sortDirection: "descending"
})
</SCRIPT>
</BODY> </HTML>
</source>
Disable column sorting
<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", canSort:false }, {name:"countryName", title:"Country"}, {name:"population", title:"Population", formatCellValue:"isc.Format.toUSString(value)"}, {name:"area", title:"Area (km²)", formatCellValue:"isc.Format.toUSString(value)"} ], // initial sort on Population, high-to-low sortFieldNum: 2, sortDirection: "descending"
})
</SCRIPT>
</BODY> </HTML>
</source>
Disable the sorting arrow
<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:"population", title:"Population", formatCellValue:"isc.Format.toUSString(value)"}, {name:"area", title:"Area (km²)", formatCellValue:"isc.Format.toUSString(value)"} ], // initial sort on Population, high-to-low sortFieldNum: 2, sortDirection: "descending", showSortArrow: "corner" // other values: "field", "both", "none"
})
</SCRIPT>
</BODY> </HTML>
</source>
Field data source
<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.ListGrid.create({
ID: "countryList", width:500, height:224, alternateRecordStyles:true, fields:[ {name:"countryCode", title:"Code"}, {name:"countryName", title:"Country"}, {name:"independence", title:"Nationhood", type:"date"}, {name:"population", title:"Population", type:"integer"}, {name:"gdp", title:"GDP", type:"float"} ], data: countryData
})
</SCRIPT> </BODY> </HTML>
</source>
ListGrid column alignment
<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, top:100, alternateRecordStyles:true, data: countryData, fields:[ {name:"countryCode", title:"Flag", width:50, align:"center", type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"}, {name:"countryName", title:"Country"}, {name:"capital", title:"Capital"}, {name:"continent", title:"Continent"} ]
})
isc.FormLayout.create({
items:[{ type:"radioGroup", showTitle:false, valueMap:["left","center","right"], defaultValue:"center", change:"countryList.getField("countryCode").align = value; countryList.markForRedraw()" }]
})
</SCRIPT>
</BODY> </HTML>
</source>
Merge fields
<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, fields:[ // move countryCode before country name and replace with flag image/title {name:"countryCode", title:"Flag", width:40, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"}, {name:"countryName"}, // change title and alignment of independence date {name:"independence", title:"Nationhood", align:"center"}, // format population number {name:"population", formatCellValue:"isc.Format.toUSString(value)"}, // format GDP as $M instead of $B {name:"gdp", title:"GDP ($M)", formatCellValue:"(value*1000).toUSString()"} ], dataSource: countryDS, autoFetchData: true
})
</SCRIPT> </BODY> </HTML>
</source>
Set column size
<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"} ], canResizeFields: true
})
</SCRIPT>
</BODY> </HTML>
</source>
Set column title
<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, top:50, 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"} ], canReorderFields: false
})
isc.IButton.create({
left:0, title:"\"Name\"", click:"countryList.setFieldProperties(1, {title:"Name"})"
}) isc.IButton.create({
left:120, title:"\"Country\"", click:"countryList.setFieldProperties(1, {title:"Country"})"
})
</SCRIPT>
</BODY> </HTML>
</source>
Setup fields for 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, dataSource: countryDS, autoFetchData: true
})
</SCRIPT> </BODY> </HTML>
</source>
Show and hide columns
<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", showIf:"false"}, {name:"continent", title:"Continent"} ], canReorderFields: true
})
isc.IButton.create({
left:0, top:240, title:"Show Capitals", click:"countryList.showField("capital")"
}) isc.IButton.create({
left:120, top:240, title:"Hide Capitals", click:"countryList.hideField("capital")"
})
</SCRIPT>
</BODY> </HTML>
</source>
Sort different data types
<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:"independence", title:"Nationhood", type:"date"}, {name:"area", title:"Area (km²)", type:"float", formatCellValue:"isc.Format.toUSString(value)"}, {name:"gdp_percap", title:"GDP (per capita)", align:"right", formatCellValue: function (value, record) { var gdpPerCapita = Math.round(record.gdp*1000000000/record.population); return isc.Format.toUSDollarString(gdpPerCapita); }, sortNormalizer: function (record) { return record.gdp/record.population; } } ], // initial sort on Area, high-to-low sortFieldNum: 3, sortDirection: "descending"
})
</SCRIPT>
</BODY> </HTML>
</source>