Basic Knowledge Demo #3 Checkboxes and Two Combo lists (set and get values)

Here at Jim's good suggestion, is the Basic Knowledge demo #3, re-redone so it shows the main point ON the PAGE as well as in comments. Sorry it makes them a bit more complex inside.

Please be sure to edit for your OWN site:
<link href="ActiveWidgets/runtime/styles/classic/aw.css" ...
<script src="ActiveWidgets/runtime/lib/aw.js"....

These demos are designed to be edited and toyed with, to help you learn the basics. Cut and Past the entire code, set the links to aw.js and aw.css properly. Then please post great new ideas or uses for AW.

Here goes,
Basic Knowledge Demo #3:
Checkboxes, setting initial value, and returning values; and Combo template, two different list show, set/get value...

<html> <head> 
    <script src="ActiveWidgets/runtime/lib/aw.js"></script> 
    <link href="ActiveWidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link> 

<style>
    .aw-column-1 {text-align: right;}
    .aw-grid-row {border-bottom: 1px solid threedlightshadow;} 
</style>
</head> <body> 

<script> 

    var HeaderText = ["Last Changed col","Best way?","Auto send","Dispose"]; 

    var CellData = [ 
        ["aa","USPS","f","reconciled"], 
        ["bb","Email","t","unreconciled"], 
        ["cc","FedEX","t","reconciled"], 
        ["cc","FedEX","f","hopeless"], 
        ["dd","Phone","f","unreconciled"]
    ]; 

    var popUpSelections_1 = ["Email","Phone","FedEX","USPS"];
    var popUpSelections_2 = ["reconciled","unreconciled","hopeless"];

    var obj = new AW.UI.Grid;
    obj.setHeaderText(HeaderText);

    obj.setCellText(function(c,r){return CellData[r][c]} ); 
    //obj.setCellText(CellData); // this makes col setting impossible isBUG ? bug : feature!!!

 	obj.setSize(450, 120);
    obj.setColumnCount(4); 
    obj.setRowCount(5); 
    obj.setColumnWidth(120, 0);  // set the width wide first col (c0)

    //  add a checkbox to col 2 (the 3rd col)
    obj.setCellTemplate(new AW.Templates.Checkbox, 2);
  
    //  set initial VALUE for column 2 From the CellData array NOTE: MUST BE SET to Boolean true/false.
    obj.setCellValue(function(col, row){return CellData[row][2]=="t" ? true : false}, 2);

    //  to get "checked" state put a function in cell text, which follows the checks and writes it back into the CELL! 
    obj.setCellText(function(col, row){return this.getCellValue(col, row) ? "Yes" : "No!"}, 2);



  //  Put the Combo "template" (as opposed to the "control") in to second col (c1) & forth (c3)
    obj.setCellTemplate(new AW.Templates.Combo, 1); 
    obj.setCellTemplate(new AW.Templates.Combo, 3);

  //  Populate the list, set the onClicked to move selection to cell, then hide the list.
    obj.setPopupTemplate(function(col, row){

        var list = new AW.UI.List;
          if(col==1){ 	// if populating col==1 use this set of selections and this count		
            list.setItemText(popUpSelections_1); // selection list
            list.setItemCount(4);			 // count
          } else{		// all other cols of PopupTemplate use this set of selections
            list.setItemText(popUpSelections_2); // different selection list
            list.setItemCount(3);			 // differnt count	
          }
          list.onItemClicked = function(event, i){
            var selectedText = this.getItemText(i);
            obj.setCellText(selectedText, col, row);
            obj.setCellValue(selectedText, col, row); 
            obj.getCellTemplate(col, row).hidePopup();
          }
          return list;
    }); 

    obj.onCellValueChanged = function(value, col, row){
        this.setCellText("c"+col+" r"+row+ " v="+value, 0, row); // show last new value in first col (c0)
      if(col == 1)alert("value:"+value+"  Column:"+col+"  Row:"+row); // alert for second col (c1) only
    } 


    document.write(obj);

</script>

</body> </html>

G Cayman

February 11,

Basic Knowledge demo #3 ABOVE is NOT the current or correct SOURCE!!!
Please use!!! (very sorry)

THIS ONE!

<html> <head> 
    <script src="ActiveWidgets/runtime/lib/aw.js"></script> 
    <link href="ActiveWidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link>

<!-- BK3AW2CheckboxCombo.html -->
<script>docs=
 "<br>"
+"<br>	<B>Demo to show:</B> Checkbox template in Grid, and setting initial values. Combo template, 2 lists, setting/getting  values." 
+"<br>	SEE:<b>** HERE is the MAIN POINT **</b> by viewing source, to see the important parts, there several."
+"<ul>"
+"<li>	From sample data set 'CellData'; The 2nd column (c1) [and fourth (c3)] contain initial values for <b>Combo boxes</b>."
+"<br>	"
+"		"
+"<li>	The checkbox initial value is SET from the the third column (c2) of CellData, you can use any text here (i.e '0'/'1' or 't'/'f')"
+"<br>	Then convert that to boolean true/false on setting the initial value. View source for example."
+"		"
+"		" 
+"</ul> "    
+" C A V E A T S!"
+"<ul><li>  For Checkboxes, the cell VALUE must be filled with a a Boolean true/false. That is, preset to all true or all false or "
+"		get all the initial values from data array as shown in this example. View source!"
+"<li>	You must MUST initially fill the grid using the <i>function method</i>. Just naming the 2d array will not work!!! View source!"
+"</ul>"
; </script>
 

<style>
    .aw-column-1 {text-align: right;}
    .aw-grid-row {border-bottom: 1px solid threedlightshadow;} 
</style>
</head> <body> 

<script> 

    var HeaderText = ["Last Changed col","Best way?","Auto send","Dispose"]; 

    var CellData = [ 
        ["aa","USPS","f","reconciled"], 
        ["bb","Email","t","unreconciled"], 
        ["cc","FedEX","t","reconciled"], 
        ["cc","FedEX","f","hopeless"], 
        ["dd","Phone","f","unreconciled"]
    ]; 


    var popUpSelections_1 = ["Email","Phone","FedEX","USPS"];
    var popUpSelections_2 = ["reconciled","unreconciled","hopeless"];

    // Create grid and set size etc.
    var obj = new AW.UI.Grid;
    obj.setHeaderText(HeaderText);

/* ******************************************************************************
    // ** HERE is the MAIN POINT **  in order for setting Cols to initial checkbox settings
             USE THIS method to fill grid.
********************************************************************************* */
    obj.setCellText(function(c,r){return CellData[r][c]} ); 
    //obj.setCellText(CellData); // DO NOT USE this  method to fill grid. 


 	obj.setSize(450, 120);
    obj.setColumnCount(4); 
    obj.setRowCount(5); 
    obj.setColumnWidth(120, 0);  // set the width wide first col (c0)



/* ******************************************************************************
    ** HERE is the MAIN POINT ** Here we setup the checkbox template, 
        initialize the values, then add a function to the cellText.
********************************************************************************* */
    //  add a checkbox to col 2 (the 3rd col)
    obj.setCellTemplate(new AW.Templates.Checkbox, 2);
  
    //  set initial VALUE for column 2 From the CellData array NOTE: MUST BE SET to Boolean true/false.
    obj.setCellValue(function(col, row){return CellData[row][2]=="t" ? true : false}, 2);

    //  to get "checked" state put a function in cell text, which follows the checks and writes it back into the CELL! 
    obj.setCellText(function(col, row){return this.getCellValue(col, row) ? "Yes" : "No!"}, 2);

/* --------------------------------------------------------------------------------- */


/* ******************************************************************************
    ** HERE is the MAIN POINT ** Here we setup the combo template, 
        NOTE: initial values are set from CellData. (cell TEXT itself, Not part of this template)
      	then set up Two differnt lists, one (popUpSelections_1) for col==1, 
        and all others get PopUpSelections_2 
********************************************************************************* */

  //  Put the Combo "template" (as opposed to the "control") in to second col (c1) & forth (c3)
    obj.setCellTemplate(new AW.Templates.Combo, 1); 
    obj.setCellTemplate(new AW.Templates.Combo, 3);

  //  Populate the list, set the onItemClicked to move selection to cell, then hide the list.
    obj.setPopupTemplate(function(col, row){

        var list = new AW.UI.List;

        // one list for col 1, the other list for any other columns made.
          if(col==1){ 	// if populating col==1 use this set of selections and this count		
            list.setItemText(popUpSelections_1); // selection list
            list.setItemCount(4);			 // count
          } else{		// all other cols of PopupTemplate use this set of selections
            list.setItemText(popUpSelections_2); // different selection list
            list.setItemCount(3);			 // differnt count	
          }

          list.onItemClicked = function(event, i){
            var selectedText = this.getItemText(i);
            obj.setCellText(selectedText, col, row);
            obj.setCellValue(selectedText, col, row); 
            obj.getCellTemplate(col, row).hidePopup();
          }
          return list;
    }); 
/* --------------------------------------------------------------------------------- */

   // When a cell is changed, put the col, row and new value, in the First col (c0)
    obj.onCellValueChanged = function(value, col, row){
        this.setCellText("c"+col+" r"+row+ " v="+value, 0, row); // show last new value in first col (c0)
      if(col == 1)alert("value:"+value+"  Column:"+col+"  Row:"+row); // alert for second col (c1) only
    } 


    document.write(obj);

    document.write(docs);
</script>

</body> </html>

G Cayman

February 11,

Geoff,

This demo on FF 1.5 seems to have an issue with the combos, they are not rolling back up. I checked the example that comes with 2.0 final and the combo seems to work fine but inside a grid it is not working so well. I am going to remove it from the demo page until we can figure out what the issue is.

Thaks for the great examples.

Jim Hunter (www.FriendsOfAW.com)

February 11,

Jim,
Great can you point to that demo that works, I'll try to see whats up
I was never able get the demos to close up ... in non IE

give me some hints ok?

Also,
I could NOT figure out how to find your "name" on your site. No browse that I could see.. that is now way to find a USER name, if you dont' know it. also Messaging comfused me, I push message it says something about a forum? I was lost...

anyway thanks
let me know if you can show a demo that works in FF?
-g

G Cayman

February 11,

I was just looking at the Controls demo that Alex had, I have not looked at any combos inside a grid. So sorry if I confused you.

Didn't I send you my e-mail address about a week ago? I'll send it again.

Jim Hunter (www.FriendsOfAW.com)

February 11,

No I did not get your email.... You told me to go to your site, I got hopelessly lost in the name lookup, and forum vs messaging... issues...

G Cayman

February 11,

Geoff,

This is a very nice demo. I am trying to use this type of functionality in between div tags and in a table and I am getting some very strange flashing behavior when I hover the grid cells. If you go to the
http://friendsofaw.com/nuke/modules.php?name=Demos and check out your example it experiences the same behavior. Do you know why it would act this way in a table or div and if there is a way to address this issue?

Thanks,
John

John

February 21,

The problem is not in the demo, the problem is in your browser. If you turn on the Status Bar you will see that the browser is downloading the images over and over and over again instead of caching them. I looked into IE6 SP1 to see where it can be turned on but I don't see it specifically addressed. If you look at the demo in FF you will not see the flashing, but you will see some other FF related issues.

Jim Hunter

February 21,

Jim,

Thanks for the response. Do you know how I should go about overriding the onControlMouseOver event of this list control so that it does not change images? Most of my users use IE and I don't particularly want them to have to change browser settings.

John

February 23,

Fixed my problem. I don't need to override any of the mouse events. It was actually a problem with the web server configuration. I am using IIS and I had the HTTP headers to expire immediately so it was constantly banging the server for the images. In IIS I changed the http headers property on the runtime folder to expire after one day and it works beautifully.

John

February 23,

Good to know the solution as many people have seen this problem before. Thanks for posting the solution.

Jim Hunter (www.FriendsOfAW.com)

February 23,

Take the following example:

grid.setPopupTemplate(function(col, row) {
    var grid = this;
    var list = new AW.UI.List;

    list.setItemText(["Option 1", "Option 2", "Option 3"]);
    list.setItemValue([1, 2, 3]);
    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;
});

If the column the combo is assigned to already has a value, eg. 2, how will one default the selection of the combo box option to the appropriate entry? In other words, instead of seeing "2" and only after closing the combo box see "Option 2", have the box set to "Option 2" from the start.

Neil Craig

June 7,

list.setSelectedItems([2]); // ?

Alex (ActiveWidgets)

June 7,

I'm sort of hlafway there. If one do not know the value in advance, one can do the following:

grid.setPopupTemplate(function(col, row) {
    var grid = this;
    var list = new AW.UI.List;

    list.setItemText(["Option 1", "Option 2", "Option 3"]);
    list.setItemValue([1, 2, 3]);
    list.setItemCount(3);

    for (i = 0; i < list.getItemCount(); i++) {
    if (grid.getCellValue(col, row) == list.getItemValue(i)) {
        list.setSelectedItems([i]);
            break;
        }
    }

    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;
});

But the inital display of the Combo box still read "2", clicking on down-arrow selects the option by default.

Neil Craig

June 7,

This topic is archived.

Basic Knowledge Demo #3 Checkboxes and Two Combo lists (set and get values)

See also:

Search

New Data Grid

Version 2