3.2.0
Forum Demo Guide API Store

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:

This example shows how to Drag and Drop Rows in a v2.0 Grid to change the row order Rob Francis (59)
Grid in Grid - Inner grid lacks scroolbars Diego Vilar (13)
Search Grid Column For Match Joe (45)
2.0 - I need a Grid inside a Grid Rob Francis (17)
How do you add an image to the first column in a grid? L. Aragon (17)
Bug in 2.0.1 - grid top row disappears Alex (ActiveWidgets) (13)
Refresh Grid joe (27)
Grid Cell Not Displaying White Spaces Jez (True Track Software) (24)
Expanding / Collapsing a row ... Experiment-2..... Carlos (19)
AW.Input control in a grid header row - problem in FF Will (11)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us