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.

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.

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>

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>

Forum search