Radio in Grid

I'm sure someone has asked and answer this a few times already but I just can't seem to find what I am looking for.

I need a grid with a radio in one column and each row is independant.

I tried a similar approach to the combo box but am just missing something basic I'm sure.

var data = new AW.XML.Table;
    data.setURL(data_url);
    data.setRequestMethod("POST");
    data.setParameter("type", "data");
    data_response = data.response;
    data.response = function(xml) {
      data_response.call(this, xml);

      grid.setRowCount(data.getCount());
      grid.refresh();
    }

    var grid = new AW.UI.Grid;
    grid.setId("grid");
    grid.setHeaderText(["Column1", "Column2", "Column3", "Column4"]);
    grid.setCellModel(data);
    grid.setColumnCount(4);
    grid.setVirtualMode(false);
    grid.setSelectionMode("single-row");
    grid.setSelectorWidth(25);
    grid.setSelectorVisible(true);
    grid.setSelectorResizable(true);
    grid.setSelectorText(function(i){return this.getRowPosition(i)+1});

    var radioValues = ['value1', 'value2', 'value3'];

    grid.setCellEditable(true, 3)
    grid.setCellTemplate(new AW.Templates.Radio, 3);

I know this code doesn't do anything other than create a grid and bungle up column 3 but hopefully this kind of shows where I'm going.

Changing row 1 should not change row 2. Row 1's radio is independant. Also, how would I query it a specific rows radio value? Or set it?

Thanks in advance.

Mike

June 17,

Here is the example, which possibly does what you need -

var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
];


var myHeaders = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
var obj = new AW.UI.Grid;
obj.setId("myGrid");
obj.setCellText(myData);
obj.setHeaderText(myHeaders);
obj.setColumnCount(5);
obj.setRowCount(7);
obj.setSelectorVisible(false);
obj.setSelectionMode("none");

var radio = new AW.Templates.Checkbox;
radio.setClass("toggle", "radio");
radio.setClass("templates", "radio");

obj.setCellTemplate(radio, 0);

for (var i=0;i<obj.getRowCount();i++)
{
    obj.setCellValue(true,0,i);
}

document.write(obj);

The AW.Templates.Radio is linked to selection model (same as AW.Templates.CheckedItem), so instead you should use AW.Templates.Checkbox and make it look like radio with .aw-toggle-radio class.

Alex (ActiveWidgets)

June 21,

Thanks for the reply Alex!

Not quite what I was going after. I need multiple values in a single cell. Something that will look like the following but that actually works on a row basis. In your code, it looks like it was a single checkbox made to look like a radio so you can turn it on or off. What I need is a real radio with 3 values and each of the radio selections should be based on that row only and should not affect other rows. Also, in my scenario I have flow = horiztonal on radios. I'd love to know how to shrink the space between the elements given.

Thanks in advance,
Mike

<HTML>
<HEAD>
  <LINK href="/ActiveWidgets202/runtime/styles/aqua/aw.css" rel="stylesheet"></LINK>
  <SCRIPT src="/ActiveWidgets202/runtime/lib/aw.js"></SCRIPT>
  <style>
      #myGrid   .aw-column-0       {width: 250px; text-align: left;}
  </style>
</HEAD>
<BODY>
<script>
var myData = [ 
["", "MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"], 
["", "ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"], 
["", "SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"], 
["", "CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"], 
["", "ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"], 
["", "SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"], 
["", "VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"], 
]; 


var myHeaders = ["", "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"]; 
var obj = new AW.UI.Grid; 
obj.setId("myGrid"); 
obj.setCellText(myData); 
obj.setHeaderText(myHeaders); 
obj.setColumnCount(5); 
obj.setRowCount(7); 
obj.setSelectorVisible(false); 
obj.setSelectionMode("single-row"); 

//var radio = new AW.Templates.Checkbox; 
//radio.setClass("toggle", "radio"); 
//radio.setClass("templates", "radio"); 
//obj.setCellTemplate(radio, 0); 
//for (var i=0;i<obj.getRowCount();i++) {
//    obj.setCellValue(true,0,i); 
//} 

var radio = new AW.UI.Radio;
radio.setItemText(["A", "B", "C"]);
radio.setItemCount(3);
radio.setSelectedItems([0]);
radio.setClass("flow", "horizontal");

obj.setCellTemplate(radio, 0); 

document.write(obj); 
</SCRIPT>
</BODY>
</HTML>

Mike

June 23,

ok, I see. Maybe this is what you need -

<style>
    #myGrid {width:600px;}

    #myGrid .aw-column-1 {width:200px}
    #myGrid .aw-column-2 {width:150px}
    #myGrid .aw-column-3 {width:200px}

    #myGrid .aw-column-2 .aw-item-template {width: 32%}
    #myGrid .aw-column-3 .aw-item-template {width: 24%}
</style>
<script>

    var myCells = [
        ["MSFT","Microsoft Corporation", 0, 1],
        ["ORCL", "Oracle Corporation", 2, 3],
        ["SAP", "SAP AG (ADR)", 1, 0],
        ["CA", "Computer Associates Inter", 0, 0],
        ["ERTS", "Electronic Arts Inc.", 0, 0]
    ];

    var obj = new AW.UI.Grid;
    obj.setId("myGrid");

    obj.setCellData(myCells);
    obj.setColumnCount(4);
    obj.setRowCount(5);

    obj.defineModel("item", {
        count: 0, text:"", image:"", value: "", tooltip:""
    });

//	radio item template
    var item = new AW.Templates.Checkbox;
    item.setClass("toggle", "radio");
    item.setEvent("onclick", "");
    item.mapModel("control", "item");

    obj.defineTemplate("item", item);

//	list cell template
    var list = new AW.Templates.Cell;
    list.setContent("box/text", function(){
        var i, s = "";
        var count = this.getItemProperty("count");
        for (i=0; i<count; i++){
            s += this.getItemTemplate(i);
        }
        return s;
    });

//	column-2
    obj.setCellTemplate(list, 2);
    obj.setItemCount(3, 2);
    obj.setItemText(["a0", "a1", "a2"], 2);

//	column-3
    obj.setCellTemplate(list, 3);
    obj.setItemCount(4, 3);
    obj.setItemText(["b0", "b1", "b2", "b3"], 3);


    obj.setItemValue(function(i, col, row){
        return this.getCellValue(col, row) == i;
    });

//	add event handler which switches cell value
    obj.onItemClicked = function(event, i, col, row){
        this.setCellValue(i, col, row); // value = i
    }

    document.write(obj);

</script>

Alex (ActiveWidgets)

June 23,

Definately getting close.

Only problem I see is that it looks like hte onItemClicked event is not triggering properly. I am unable to change the selections using IE 6.0 SP2. When I click on any elements nothing happens. I tried making the cell editable and changing the selection mode ont the rows, neither worked.

Thanks again!

Mike

June 24,

This topic is archived.

Radio in Grid

See also:

Search

New Data Grid

Version 2