Use expandable panel to edit table data : ListGrid Renderer « SmartClient « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » SmartClient » ListGrid Renderer 
Use expandable panel to edit table data
 
<!--
Isomorphic SmartClient
Copyright(c1998 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 202008. 


-->

<!-- 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=MARGINWIDTH=LEFTMARGIN=TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=CELLPADDING=BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>

  Editable ListGrid example

</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>

  Isomorphic SmartClient

</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=CELLPADDING=BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=HEIGHT=4></TD></TR></TABLE>


<!--------------------------
  Example code starts here
---------------------------->

<SCRIPT>

// Data to be displayed
var animalData = [
    {commonName:'Elephant (African)',scientificName:'Loxodonta africana',diet:'H',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'},
    {enabled:false, commonName:'(disabledAlligator (American)',scientificName:'Alligator mississippiensis',diet:'C',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:'C',lifeSpan:'25 years',information:'Anteaters can eat up to 35,000 ants daily. Tongue is around 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:'H',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:'C',lifeSpan:'Up to 50 years',information:' Females lay one to three eggs. Visual acuity is 3-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 min diameter and 6.7 yds (6.1 mtall. Protection of the Bald Eagle is afforded by three federal laws: (1the Endangered Species Act, (2the Bald Eagle and Golden Eagle Protection Act, and (3the Migratory Bird Treaty Act.',status:'Endangered'},
    {commonName:'Black Spider Monkey',scientificName:'Ateles panicus',diet:'H',lifeSpan:'20 years',information:'They can perform remarkable feats with their tails.',status:'Not Endangered'},
    {commonName:'Bottlenosed Dolphin',scientificName:'Tursiops truncatus',diet:'C',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.'}
];

var animalFields = [
    {name:"commonName", title:"Animal"},
    {name:"scientificName", title:"Sci. Name (not editable)", canEdit:false, width:150},
    {name:"diet", title:"Diet", valueMap:{O:"Omnivore", C:"Carnivore", H:"Herbivore",I:"Insectivore",P:"Pescivore"}},
    {name:"information", title:"Interesting Facts", editorType:"textArea"}
];

ListGrid.create({
    ID:"animalList",
    canEdit:true,
    data:animalData,
    fields:animalFields,
    canReorderRecords:true,
    left:50,
    top:75,
    width:500,
    height:300,
    alternateRecordStyles:true
});


</SCRIPT>
</BODY>
</HTML>

   
  
Related examples in the same category
1. wrapCells: true, fixedRecordHeights: false
2. Autofil row count
3. Boolean value cell renderer and editor
4. ListGrid with calculated value
5. Image cell renderer
6. Linkable image in a ListGrid
7. Hyper link in a ListGrid
8. ListGrid cell styling
9. Cell value format
10. Set empty cell value
11. Dynamic grouping
12. Custom grouping
13. Turn rollover effect off/on
14. Cell value hover tooltip
15. Wrap cell value
16. Checkbox column
17. Table cell renderer: short date format
18. Localized date format
19. List grid with Checkbox cell renderer
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.