JavaScript DHTML/SmartClient/ListGrid Columns

Содержание

1 Column sort
2 Disable column sorting
3 Disable the sorting arrow
4 Field data source
5 ListGrid column alignment
6 Merge fields
7 Set column size
8 Set column title
9 Setup fields for ListGrid
10 Show and hide columns
11 Sort different data types

Column sort

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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&sup2;)", formatCellValue:"isc.Format.toUSString(value)"}
    ],
    // initial sort on Population, high-to-low
    sortFieldNum: 2,
    sortDirection: "descending"
})


</SCRIPT>

</BODY>
</HTML>

Disable column sorting

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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&sup2;)", formatCellValue:"isc.Format.toUSString(value)"}
    ],
    // initial sort on Population, high-to-low
    sortFieldNum: 2,
    sortDirection: "descending"
})


</SCRIPT>

</BODY>
</HTML>

Disable the sorting arrow

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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&sup2;)", 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>

Field data source

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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>

ListGrid column alignment

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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>

Merge fields

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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>

Set column size

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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>

Set column title

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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>

Setup fields for ListGrid

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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>

Show and hide columns

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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>

Sort different data types

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<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&sup2;)", 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>

JavaScript DHTML/SmartClient/ListGrid Columns

Содержание

Column sort

Disable column sorting

Disable the sorting arrow

Field data source

ListGrid column alignment

Merge fields

Set column size

Set column title

Setup fields for ListGrid

Show and hide columns

Sort different data types

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты