3.2.0

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?
Steven
June 4,
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 :)
Steven
June 4,
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));
    }


See also http://www.activewidgets.com/aw.ui.grid/row-mouse-events.html
Alex (ActiveWidgets)
June 5,
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.
Steven
June 23,

This topic is archived.

See also:


Back to support forum