ActiveWidgets • How to add a custom property to a grid row?

How to add a custom property to the grid row,and retrive it when double click row?

For example,When I construct a gird,I want to add some property to the row: idvalue/typevalue/targetDiv... and so on. And,these property is hidden property,I don't want to display it in the table,these are controll property when I double click on the row.

What's the best way to construct this table?

Can I write some code like these?

var obj = new Grid Object.

var row = new Row Object.

row.setProperty("prop1","value1");

row.setProperty("prop2","value2");



obj.addRow(row);

.......



obj.setEvent("ondblclick",function(event){

     var row = event.getSelectedRow();

     alert(row.getProperty("prop1"));

     alert(row.getProperty("prop2"));

});

Or has some other easy way to do it?

Thanks your guys :)

Assuming we want adding 'color' property to the row data model -

// define new row property with the default value = "white"

    obj.defineRowProperty("color", "white");



    // assign "red" to row 1

    obj.setRowColor("red", 1);



    obj.onRowClicked = function(event, i){

        alert(this.getRowColor(i));

    }

Hi,Alex:

I think It's not comfortable with a row index to set the row property when output the table's datas. So I found another way to use xmlisland object to set the table's data model,and setting extra properties to the row.

Here is my code:

<%@taglib prefix="ww" uri="webwork" %>

<%@page language="java" contentType="text/html;charset=UTF-8" %>

<html>

<head>

<script src="<ww:url includeParams='none' value='/script/aw/runtime/lib/aw.js' encode='false'/>"></script>

<link href="<ww:url includeParams='none' value='/script/aw/runtime/styles/xp/aw.css' encode='false'/>" rel="stylesheet"></link>



<title>test</title>

</head>

<body>

<xml id="obj_configList_xmlDataIsland">

    <rows>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a481c00c6"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a481c00c6&quot;/&amp;gt;</col>

        <col>config0</col>

        <col>config0's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a481c00c7"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a481c00c7&quot;/&amp;gt;</col>

        <col>config1</col>

        <col>config1's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a481c00c8"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a481c00c8&quot;/&amp;gt;</col>

        <col>config2</col>

        <col>config2's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a482c00c9"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a482c00c9&quot;/&amp;gt;</col>

        <col>config3</col>

        <col>config3's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a482c00ca"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a482c00ca&quot;/&amp;gt;</col>

        <col>config4</col>

        <col>config4's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a482c00cb"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a482c00cb&quot;/&amp;gt;</col>

        <col>config5</col>

        <col>config5's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a482c00cc"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a482c00cc&quot;/&amp;gt;</col>

        <col>config6</col>

        <col>config6's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a482c00cd"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a482c00cd&quot;/&amp;gt;</col>

        <col>config7</col>

        <col>config7's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a482c00ce"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a482c00ce&quot;/&amp;gt;</col>

        <col>config8</col>

        <col>config8's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a482c00cf"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a482c00cf&quot;/&amp;gt;</col>

        <col>config9</col>

        <col>config9's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a482c00d0"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a482c00d0&quot;/&amp;gt;</col>

        <col>config10</col>

        <col>config10's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a483b00d1"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a483b00d1&quot;/&amp;gt;</col>

        <col>config11</col>

        <col>config11's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a483b00d2"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a483b00d2&quot;/&amp;gt;</col>

        <col>config12</col>

        <col>config12's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a483b00d3"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a483b00d3&quot;/&amp;gt;</col>

        <col>config13</col>

        <col>config13's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a483b00d4"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a483b00d4&quot;/&amp;gt;</col>

        <col>config14</col>

        <col>config14's remark</col>

    </row>

    

    <row 

        idvalue="8a8182d70bff5a43010bff5a483b00d5"

    >

        <col>&amp;lt;input type=checkbox name=&quot;p['ids']&quot; value=&quot;8a8182d70bff5a43010bff5a483b00d5&quot;/&amp;gt;</col>

        <col>config15</col>

        <col>config15's remark</col>

    </row>

    </rows>

</xml>



            <div id="configList_container"></div>



            &lt;&lt; &lt; &gt; &gt;&gt;





<script>

    var obj_configList_table = new AW.XML.Table;

    var obj_configList_table_xml = document.getElementById("obj_configList_xmlDataIsland");

    var obj_configList_table_html = new AW.Formats.HTML;

    var obj_configList_table_formats=[

    obj_configList_table_html,

        obj_configList_table_html,

        obj_configList_table_html

    ];

    obj_configList_table.setFormats(obj_configList_table_formats);

    

    obj_configList_table.setXML(obj_configList_table_xml);



    var obj_configList = new AW.UI.Grid;

    obj_configList.setId("configList");

    var obj_configList_columns = [

    "<input type=checkbox onclick=checkit(this) target=\"p['ids']\"/>",

    "config name",

    "remark"

        ];

    

    obj_configList.setSize(800, 280);

    obj_configList.setHeaderText(obj_configList_columns);

    obj_configList.setCellModel(obj_configList_table);

    //    enable row selectors

    obj_configList.setSelectorVisible(true);

    obj_configList.setSelectorText(function(i){return this.getRowPosition(i)+1});

    obj_configList.setSelectorWidth(25);

    

    obj_configList.setColumnCount(obj_configList_columns.length);

    

    obj_configList.setRowCount(obj_configList_table_xml.documentElement.childNodes.length);

    

    obj_configList.setSelectionMode("single-row");

    obj_configList.setEvent("ondblclick", function(event){

        var selectedRow = obj_configList.getSelectedRows();

        var rows = obj_configList_table_xml.documentElement.childNodes;

        var row = rows.item(selectedRow);

        if(typeof(dblclickrow) != "undefine"){

            dblclickrow(event,row);

        }

    });



    obj_configList.setEvent("oncontextmenu", function(event){

        event.cancelBubble = true;

        event.returnValue = false;    

        var selectedRow = obj_configList.getSelectedRows();

        var rows = obj_configList_table_xml.documentElement.childNodes;

        var row = rows.item(selectedRow);

        if(typeof(rightclickrow) != "undefine"){

            rightclickrow(event,row);

        }

    });



    document.getElementById("configList_container").innerHTML = obj_configList;



</script>



</body>

</html>

Now,I can set any property when output the table's data,and I can retrive these properties with DOM method call.

How to add a custom property to a grid row?

Forum search