Which way to set a cell template?

Hi folks

I'm trying to put a Combo (same applies to checkboxes) into a given column in every row of a grid. I figure that both of the following achieve this:

(a) rowCombo = new AW.Templates.Combo;
obj.setCellTemplate(rowCombo, 1);

(b) rowCombo2 = new AW.UI.Combo;
obj.setCellTemplate(rowCombo, 1);

From the quickref/grid.htm example it seems we are guided to use approach (a). Now if I want to populate the Combo, I would use methods setItemText and setItemCount, but these methods only work with rowCombo2 i.e. approach (b).

So which is the way to do it (and why?) If it is (a), then how should you populate the Combo (I've tried to follow the relationship between Combo, List and Popup templates but I do not follow how to use them)?

Also (as with checkboxes), I'm hoping to have a "tag all" Combo in the header row so that this will be able to change all the Combos in the column. On this Combo I would use the event handler:

headerCombo.onControlValueChanged

when using this with a simple alert i.e.

headerCombo.onControlValueChanged = function(value){alert(value); }

you get two alerts when the value selected changes - not sure why this should happen - is this correct?

As ever, any input on these issues much appreciated.
Will

... actually

headerCombo.onControlValueChanged = function(value){alert(value); }

seems to go into and endless loop of alerts

Will

Will,

both a) and b) may work with the following differences:

- the 'control' class contains data, templates and static content and has one-to-one correspondence with the single DOM element on page.

- the 'template' class represents HTML fragment and does not contain data or inner templates (just static content) requesting everything from the parent control. Template can be called many times, each time with different indices, and has one-to-many correspondence with DOM elements on page (one per each combination of indices).

So if you want to use control - you should create a separate instance per each cell

var grid = new AW.UI.Grid;

    grid.setCellText(function(i, j){return j + "." + i});
    grid.setColumnCount(10);
    grid.setRowCount(10);

    for (var i=0; i<10; i++){

        var combo = new AW.UI.Combo;

        combo.setItemText(["text1", "text2", "text3"]);
        combo.setItemCount(3);

        grid.setCellTemplate(combo, 1, i);
    }

    document.write(grid);

Obviously it will work only with relatively small number of rows.

The better aproach is using templates but it is more complicated as you have to provide all necessary parts

var obj = new AW.UI.Grid;

    obj.setCellText(function(i, j){return j + "." + i});
    obj.setColumnCount(10);
    obj.setRowCount(10);

    obj.setCellTemplate(new AW.Templates.Combo, 1);

    obj.setPopupTemplate(function(col, row){

        var grid = this;
        var list = new AW.UI.List;

        list.setItemText(["text1", "text2", "text3"]);
        list.setItemCount(3);

        list.onItemClicked = function(event, i){
            var text = this.getItemText(i);
            grid.setCellText(text, col, row);
            grid.setCellValue(text, col, row);
            grid.getCellTemplate(col, row).hidePopup();
        }

        return list;
    });

    document.write(obj);

This code is actually something in between - it uses AW.Templates.Combo as cell template and uses single instance of the AW.UI.List control (created on demand) as popup template. I assume that only one popup can be open at any moment :-)

Frankly I don't yet have full understanding how it should be done. Initially I was thinking that I would only allow to switch cells one by one into the edit mode. However the scenario where all cells are immediately editable seem to be very popular so I am trying to find a solution.

Alex

Thanks very much for that. Very useful to have that background explanation. I should be able to proceed and put the second approach into practice now.

Although I seem to be asking a lot of questions, hopefully some of these issues will prompt ideas for the forthcoming programming guide & further examples!

Will

Making progress but would still appreciate a bit of further assitance.

To the code you provided I have added an additional header row, in which I have placed a Combo and two buttons "set all" and "clear all". These are to be controls that will enable all the combos in each row to be tagged with the same choice and also all combos to be cleared:

obj.setHeaderCount(2);

var headerCombo = new AW.UI.Combo;
headerCombo.setControlText("select");	
headerCombo.setItemText(["text1", "text2", "text3"]);
headerCombo.setItemCount(3);


var clear_all = new AW.UI.Button;
clear_all.setControlText("clear all");
clear_all.onClick = function(){
    obj.setCellText("",1);
    obj.refresh();
}

var set_all = new AW.UI.Button;
set_all.setControlText("set all");
set_all.onClick = function(){
    obj.setCellText(headerCombo.getControlText(),1);
    obj.refresh();
}

obj.setHeaderText(["", headerCombo+clear_all+set_all, "", "", ""], 1);

(I have ommitted some lines which help with the sizing & formatting of the header row).

Selecting a choice from the headerCombo popup and then pressing the "set all" button does work (also very fast for '000s rows). Also then pressing "clear all" clears each combo.

What I'm getting, though, is a similar scenario that I described in my post about trying to do the same with checkboxes ("Check all checkboxes in a column" 2 Nov post no. 8427), namely that, if one of the row combos has choice selected prior to using the "select all" button, then using "select all" and subsequently "clear all" buttons does not affect that particular combo.

I've wrestled with this for combos and checkboxes for a while now - I'd really like to solve this and then have a good platform for a "check all" and "select all" example that can be shared.

Will

Will,

there is an important point which I still don't understand. Imagine you have 10 000 rows. And you say 'select all' and then you clear selection for rows 2,3,5 - I guess you don't want to get array of 9 997 selected rows but rather something like 'selection mode = inverted', unselected rows = [2,3,5]

I assume that you want to send the list of selected rows to the server?

In case of combo boxes - if you set some value for all rows, does it mean that all rows become 'modified' and you have to send them all back to the server? How would you save this 'set all' operation to your database?

Could you please describe your save/update scenario in more details?

My application is about managing streetlights (not the most exciting I know, but somebody's got to do it!)

Say I have a 40,000 lights in a city. They are divided into groups according to various criteria. I have a grid showing the lights and the groups they are members of. Sometimes the user will need to 'move' lights (either the odd one or two lights, or sometimes hundreds or thousands) from one group to another. The way I'm doing this is to have a grid of lights with a column that represents 'new group' that the light needs to go into - this is a combo comprising all the possible existing groups. In the header at the top of this column is combo that is a 'select all' combo. The user can either set the new group combo for individual lights, or he can use the 'select all' to select a new group for all the lights contained in the grid at the time (according to filter settings that are present).

The page processes the grid and looks for lights where a new group has been selected and sends these to the server.

Thanks
Will

Is there a better way to add combos to the header than what Will is doing? I like the CellTemplate method used for the grid cells. Is there a similar technique for the header? I tried SetHeaderTemplate and that had bad result :-)