]project-open[ : @This Wiki

Welcome, Unregistered Visitor

Contact ·  Index · Login · Register


Remote Training
SaaS Service

2 registered users
 in last 24 hours

Ajax Support for Tables

General Challenges­ implementing AJAX tables   ­

  • Depending deployment environment  and feature sets required AJAX libs to be used might vary
  • Server side vs. Client side programming skill sets of ]po[/OpenACS developers
  • AJAX/JS implementations contain special characters that would need to be escaped in .tcl files and impair readability of code 

Challenges­ transforming traditional tables to tables with AJAX support ­

  • General "Send/Update" button might becomes obsolete
  • Check boxes in tables usually become buttons
  • Providing Ajax support for tables created with List Builder
  • How to handle im_view_columns::column_render_tcl ?
  • How to handle single cells that are different from the column type ?
    (see: /intranet-translation/trans-tasks/task-list?view_name=trans_tasks&project_id=[PROJECT_ID] )
  • Some of the ]po[ tables extract data from several db tables based on complex business logic (WF)
    It should be avoided to add another layer of complexity    


  • Follow common design patterns to separate layout from business logic
  • Keep options open to support various AJAX libraries
  • Hide DHTML/Ajax implementation from tcl developers (like: .adp vs. .tcl files) 
  • Pave the way to support other end user devices than a browser
  • Allow smooth transition from current tables to AJAX supported tables with a transition period that allow usage of both variants

]po[ meta-format for tables 

set aj_table_layout {
    <table_class> <table_view_id>

<table_class> ::= string   (table class as defined in style.[SKIN_NAME].css or style.default.css)
<table_view_id> ::= integer -> refers to im_view_columns

Table description

set aj_table_definition {

<table_columns> ::=  <column_type> <key> <formatter> <sortable> | <table_columns>

<column_type> ::= <field> | <date> | <button> | <checkbox> | <radio> | <select> | <multiselect>
<key> ::= string
<formatter>  ::= string (used in YUI libs to define formatting)a
<editable_p> ::= 0 | 1 (Can table cell in this column be edited?)
<sortable> ::= 0 | 1 (Should column be sortable?)

<field> ::= "field" <editable_p>
<date> ::= "date" <editable_p>
<button> ::=  "button" <label> 
<label> ::= string
<checkbox> ::= "checkbox" <editable_p>
<radio> ::= "radio" <editable_p>

<select> ::= "select" <select_options>
<multiselect> ::= "multiselect" <select_options>
<select_options> ::=  string | <select_options>


set aj_table_title {
    { <title_col1> <title_col2> <title_col3> ... }
column_title ::= string  (title or path to img file)
set aj_table_content {
    { <object_id_line1> <line1_cell1> <line1_cell2> <line1_cell3> ... }
    { <object_id_line2> <line2_cell1> <line2_cell2> <line2_cell3> ... }
    { ... }

<line[x]_cell1[y]> :== string when column_type="field" , empty-string when column_type != "field"
<object_id_line[x]> :== integer -> usually object_id of record shown 

Sample code YUI tables

These samples illustrate AJAX support to ]po[ tables using YUI DataTable Control http://developer.yahoo.com/yui/datatable/  

Set data

YAHOO.example.Data = {
    formatting: {
        items: [
            {field1: "bananas", field2:new Date(2007, 1, 1), field3:111, field4:"23.4", field5:"bob", field6:"http://www.yahoo.com"},
            {field1: undefined, field2:new Date(2006, 1, 1), field3:12.3, field4:"35.12", field5:"ann", field6:"http://www.yahoo.com"}

Set column definitions

        var myColumnDefs = [
            {key:"flag", formatter:"myCustom"}, // use custom shortcut
            {key:"button", label:"Show record data", formatter:YAHOO.widget.DataTable.formatButton}, // use the built-in button formatter
            {key:"field1", formatter:"dropdown", dropdownOptions:["apples","bananas","cherries"],sortable:true}

Using YUI Inline Cell Editing



        var myColumnDefs = [
            {key:"button", label:"Show record data", formatter:YAHOO.widget.DataTable.formatButton}, // use the built-in button formatter

Setting action 

        this.myDataTable.subscribe("buttonClickEvent", function(oArgs){
            var oRecord = this.getRecord(oArgs.target);

Check Box

        var myColumnDefs = [
            {key:"check", formatter:"checkbox"}, // use the built-in checkbox formatter (shortcut)

Drop down lists:

        var myColumnDefs = [
            {key:"field1", formatter:"dropdown", dropdownOptions:["apples","bananas","cherries"],sortable:true}

Radio Button

        var myColumnDefs = [
            {key:"radio", formatter:"radio"}, // use the built-in radio formatter





Please take a moment to complete this form to help us improve our service.

Please only provide feedback in regards to content this page shows. For support inquiries please refer either to the Community Support forum at Sourceforge or check out our 'Professional Support'

Did this page help you to achieve your goal?

 Yes  No  Don't know

Please provide us with comments to improve this page:

How useful is the information?

 1  2  3  4  5


Demo Server
Modules & Functionality
Business Processes supported


Getting started
User Manuals
Configuration Manuals
Community Support
Professional Support


RSS Community / Sourceforge
Register for Newsletter

Get in touch


Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.0 Generic License - Privacy Policy