Drag and drop between two grids
<!--
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.com) 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.com/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/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR='papayawhip' MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>
ListGrid drag-and-drop example
</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>
Isomorphic SmartClient
</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>
<!--------------------------
Example code starts here
---------------------------->
<SCRIPT>
// Data to be displayed
var animalData1 = [
{canAcceptDrop:false, commonName:"Anaconda *", scientificName:'Eunectes murinus',diet:'Carnivore',lifeSpan:'unknown',information:"The anaconda is an excellent swimmer, but it also climbs on branches to dry off. It uses the water to rapidly escape predators and to conceal itself while searching for food. The anaconda is the world's longest, heaviest, and most powerful snake.",status:'Not currently listed'},
{commonName:'Elephant (African)',scientificName:'Loxodonta africana',diet:'Herbivore',lifeSpan:'40-60 years',information:'The African Elephant is the largest of all land animals and also has the biggest brain of any land animal. Both males and females have ivory tusks. Elephants are also wonderful swimmers. Man is the only real enemy of the elephant. Man threatens the elephant by killing it for its tusks and by destroying its habitat.',status:'Threatened'},
{commonName:'Alligator (American)',scientificName:'Allligator mississippiensis',diet:'Carnivore',lifeSpan:'50 years',information:'In the 16th century, Spanish explorers in what is now Florida encountered a large formidable animal which they called "el largo" meaning "the lizard". The name "el largo" gradually became pronounced "alligator".',status:'Not Endangered'},
{commonName:'Anteater',scientificName:'Myrmecophaga tridactyla',diet:'Ground dwelling ants/termites',lifeSpan:'25 years',information:'Anteaters can eat up to 35,000 ants daily. Tongue is around 2 feet long and is not sticky but rather covered with saliva. They have very strong sharp claws used for digging up anthills and termite mounds.',status:'Not Endangered'},
{commonName:'Camel (Arabian Dromedary)',scientificName:'Camelus dromedarius',diet:'Herbivore',lifeSpan:'20-50 years',information:'Can eat any vegetation including thorns. Has one hump for fat storage. Is well known as a beast of burden.',status:'Not Endangered'},
{commonName:'Bald Eagle',scientificName:'southern subspecies: Haliaeetus leucocephalus leuc',diet:'Carnivore',lifeSpan:'Up to 50 years',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.',status:'Endangered'},
{commonName:'Black Spider Monkey',scientificName:'Ateles panicus',diet:'Herbivore',lifeSpan:'20 years',information:'They can perform remarkable feats with their tails.',status:'Not Endangered'},
{commonName:'Bottlenosed Dolphin',scientificName:'Tursiops truncatus',diet:'Fish shrimp eels and squid',lifeSpan:'35 years',information:'The bottlenosed dolphin is classified as a toothed whale. They are excellent hunters. They use sound waves to "see" their environment and where they are going through a process known as echolocation.',status:'Dolphins are vulnerable to commercial fishing practices and ocean pollution.'},
{commonName:'Boa Constrictor(Common)',scientificName:'Boa constrictor constrictor',diet:'Carnivore',lifeSpan:'40 years',information:'Boas kill by constriction, actually suffocating rather than crushing their prey. Spend time in trees but are primarily ground dwellers.',status:'Not Endangered'},
{commonName:'Screech Owl(Common)',scientificName:'Otus asio',diet:'Carnivore',lifeSpan:'10 years',information:' Generally does not migrate, most common in North America. Three color phases: red, grey and brown.',status:'Not Endangered'},
{commonName:'Costas Hummingbird',scientificName:'Calypte costae',diet:'Nectar and small insects',lifeSpan:'Up to 12 years',information:'Costas habit of soaring between flower beds is helpful in distinguishing it. Has a preference for red flowers. Males do not participate in nesting or raising young. Of the seven major species breeding in the West, the Costas prefers the driest climates. Nests are frequently held together with spider webs.',status:'Not Endangered'}
],
animalData2 = [
{commonName:'Baboon (Guinea Baboon)',scientificName:'Papio papio',diet:'Omnivore',lifeSpan:'25-30 years',information:'These baboons live in large groups which consist of a hierarchical group structure based on a dominating male while breeding occurs; after breeding, the male leaves and a dominant female leads the troop. Much of their time is spent in feeding, grooming, and sleeping.',status:'May become threatened'},
{commonName:'Howler Monkey',scientificName:'Alouatta spp.',diet:'Herbivore',lifeSpan:'Over 20 years',information:' These animals produce a low growling sound that has been compared to the roar of a lion. These calls can be heard up to 3 km through the forest and are used to communicate danger as well as keeping the troop together.',status:'Endangered'},
{commonName:'Indian Rock Python',scientificName:'Python molurus molurus',diet:'Carnivore',lifeSpan:'20-30 years',information:'Can become very tame. The Python species are covered by import regulations and are therefore most available as captive bred specimens. Frightening numbers of these snakes have been killed for the leather trade.',status:'Not Endangered'},
{commonName:'Koala',scientificName:'Phascolarctos cinereus',diet:'Herbivore (Eucalyptus leaves)',lifeSpan:'10-15 years',information:'Koalas do not require water. Males larger than females. Noctural/crepuscular, sleeps up to 19 hours a day. Young are carried on mothers back after leaving pouch.',status:'Protected'},
{commonName:'Lion',scientificName:'Panthera leo - various subspecies',diet:'Carnivore',lifeSpan:'15 years',information:'Males have manes on cheeks and throat, some species have manes on shoulders and bellies. Young lions have leopard like markings. A pride usually consists of 4-12 related adult females, their offspring and 1-6 adult males. Lions eat animals weighing 110 or 1100 lbs.',status:'Endangered (Asiatic Lion only)'},
{commonName:'Salamander (Marbled Salamander)',scientificName:'Ambystoma opacum',diet:'Carnivore',lifeSpan:'5 to 8 years',information:'It is a beautiful animal, black with white or silvery bands. Lives well in captivity.',status:'Not Endangered.'},
{commonName:'Orangutan',scientificName:'Pongo pygmaeus',diet:'Fruits, Vegetation and Birds eggs',lifeSpan:'Up to 50 years',information:'Orangutan means "man of the forest". Enemies include tigers, clouded leopard, humans.',status:'Endangered'},
{commonName:'Ostrich',scientificName:'Struthio camelus',diet:'Insects, Fruit, seeds and grasses',lifeSpan:'40-50 years',information:'Largest of living birds. Adult males may exceed 8 feet in height and 300 lbs. in weight. In Egypt, the ostrich was the emblem of the Goddess of Truth and Justice.',status:'Endangered'},
{commonName:'Piranha',scientificName:'Plecostomus - Hypostomus plecostomus',diet:'Carnivore (mainly smaller fish)',lifeSpan:'Unknown',information:'Afraid of nothing; will attack any animal regardless of size. Is attracted by the smell of blood. Considered the most dangerous fish in the Amazon',status:'Not Endangered'},
{commonName:'Platypus',scientificName:'Ornithorhynchus Anatinus',diet:'Insects and Larvae',lifeSpan:'10-15 years',information:'Were thought to be a hoax when first discovered. The male has a venemous spur on his hind legs. Capable of many vocalizations including sounds like a growling puppy and a brooding hen.', status:'Not Endangered'},
{commonName:'Polar Bear',scientificName:'Ursus maritimus',diet:'Carnivore',lifeSpan:'30-40 years',information:'The polar bear is the largest non-aquatic carnivore. Its stomach can hold more than 150 lbs of food. The polar bears fur is water repellant and the individual hairs are clear due to hollow hair shafts. The feet of the polar bear serve as snow boots and as paddles when they are in the water.',status:'Protected in Russia'}
],
briefAnimalFields = [
// Note: Columns not included in this list will not show up in the List viewer
{name:"commonName", title:"Animal"},
{name:"scientificName", title:"Scientific Name"}
// {name:"lifeSpan", title:"Life Span"},
// {name:"status",title:"Endangered Species Status"}
// {name:"diet", title:"Diet"},
// {name:"information", title:"Interesting Fact"}
],
verboseAnimalFields = [
{name:"commonName", title:"Animal"},
{name:"scientificName", title:"Scientific Name"},
{name:"lifeSpan", title:"Life Span"},
{name:"diet", title:"Diet"},
{name:"status", title:"Endangered Status"}
];
ListGrid.create({
ID:"list1",
data:animalData1,
fields:briefAnimalFields,
left:50,
top:75,
width:300,
height:300,
cellPadding:3,
alternateRecordStyles:true,
canDragRecordsOut:true,
canAcceptDroppedRecords:true,
canReorderRecords:true,
canReorderFields:true,
canResizeFields:true
});
ListGrid.create({
ID:"list2",
autoDraw:false,
data:animalData2,
fields:verboseAnimalFields,
left:25,
top:25,
width:500,
height:300,
cellPadding:3,
alternateRecordStyles:true,
canDragRecordsOut:true,
canAcceptDroppedRecords:true,
canReorderRecords:false,
canReorderFields:true,
canResizeFields:true
});
Canvas.create({
ID:"list2Canvas",
left:400,
top:50,
width:550,
height:350,
backgroundColor:"pink",
children:[list2]
});
Label.create({
ID:"footnote",
left:75,
top:375,
width:300,
contents:"* - canAcceptDrop property set to <b>false</b>"
});
</SCRIPT>
</BODY>
</HTML>
Related examples in the same category