JavaScript DHTML/SmartClient/ListGrid Drag Drop
Содержание
Create ListGrid to hold droppable data
<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/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.TileGrid.create({
ID: "testList", width: 500, height: 400, autoDraw:false,
tileWidth:150,
tileHeight:170,
data: [
{
picture:"Camel.jpg",
commonName:"Arabian Camel",
information:"Can eat any vegetation including thorns. Has one hump for fat storage. Is well known as a beast of burden.",
lifeSpan:50,
scientificName:"Camelus dromedarius",
diet:"Herbivore",
status:"Not Endangered"
},
{
picture:"BaldEagle.jpg",
commonName:"Bald Eagle",
information:" Females lay one to three eggs. Visual acuity is 3-4 times greater than a human. Bald eagles build the largest nest of any North American bird. The largest nest found was 3.2 yds (2.9 m) in diameter and 6.7 yds (6.1 m) tall. Protection of the Bald Eagle is afforded by three federal laws: (1) the Endangered Species Act, (2) the Bald Eagle and Golden Eagle Protection Act, and (3) the Migratory Bird Treaty Act.",
lifeSpan:50,
scientificName:"southern subspecies: Haliaeetus leucocephalus leuc",
diet:"Carnivore",
status:"Endangered"
},
{
picture:"BlackSpiderMonkey.jpg",
commonName:"Black Spider Monkey",
information:"They can perform remarkable feats with their tails.",
lifeSpan:20,
scientificName:"Ateles panicus",
diet:"Herbivore",
status:"Not Endangered"
}
],
canAcceptDrop: true,
canDrag: true,
fields: [
{name:"picture", type:"image", imageURLPrefix:"/isomorphic/system/reference/inlineExamples/tiles/images/"},
{name:"commonName"}
]
});
isc.HLayout.create({
membersMargin: 10,
members: [
isc.ListGrid.create({
ID: "testGrid", autoDraw:false,
width:300, height: 400,
canDragRecordsOut: true,
canAcceptDroppedRecords: true,
canReorderRecords: true,
fields: [
{name:"commonName", title:"Common Name"},
{name:"lifeSpan", title:"Lifespan"},
{name:"status", title:"Status"}
]
}),
testList
]
});
</SCRIPT>
</BODY>
</HTML>
</source>
Drag and drop between 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: "countryList1",
width:325, height:224,
data: countryData,
canDragRecordsOut:true, canAcceptDroppedRecords:true,
canReorderRecords:true, dragDataAction:"move",
fields:[
{name:"countryCode", title:"Flag", frozen:true, width:40,
type: "image", imageURLPrefix: "flags/16/", imageURLSuffix: ".png"},
{name:"countryName", frozen:true, title:"Country", width:100},
{name:"capital", title:"Capital", width:100},
{name:"continent", title:"Continent", width:100},
{name:"government", title:"Government", width:100},
{name:"independence", title:"Independence", type:"date", width:100},
{name:"population", title:"Population", width:100, type:"int"}
]
})
isc.ListGrid.create({
ID: "countryList2",
left:350, width:225, height:224,
data: countryData,
canDragRecordsOut:true, canAcceptDroppedRecords:true,
canReorderRecords:true, dragDataAction:"move",
fields:[
{name:"countryName", title:"Country"}
]
})
</SCRIPT>
</BODY> </HTML>
</source>
Drag and drop to copy rows
<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: "countryList1",
width:300, 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"}
],
canReorderRecords: true,
canDragRecordsOut: true,
canAcceptDroppedRecords: true,
dragDataAction: "copy"
})
isc.ListGrid.create({
ID: "countryList2",
width:200, height:224, left:350, alternateRecordStyles:true, showAllRecords:true,
fields:[
{name:"countryCode", title:"Flag", width:40, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
{name:"countryName", title:"Country"}
],
emptyMessage: "drop rows here",
canReorderRecords: true,
canAcceptDroppedRecords: true
})
</SCRIPT>
</BODY> </HTML>
</source>
Drag and drop to move the rows between 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: "countryList1",
width:300, 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"}
],
canReorderRecords: true,
canDragRecordsOut: true,
canAcceptDroppedRecords: true,
dragDataAction: "move"
})
isc.ListGrid.create({
ID: "countryList2",
width:200, height:224, left:350, alternateRecordStyles:true, showAllRecords:true,
fields:[
{name:"countryCode", title:"Flag", width:40, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
{name:"countryName", title:"Country"}
],
emptyMessage: "drop rows here",
canReorderRecords: true,
canDragRecordsOut: true,
canAcceptDroppedRecords: true,
dragDataAction: "move"
})
</SCRIPT>
</BODY> </HTML>
</source>
Drag and drop to reorder a 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"}
],
canReorderRecords: true
})
</SCRIPT>
</BODY> </HTML>
</source>
Drag to select ListGrid rows
<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>
