:: Forum >>

Select All / Deselect All Checkbox

We have a grid control with a checkbox in the first column. We want to add a checkbox in the header
of this column that allows a Select All / Deselect All feature.

Here's what's working:
- Added checkbox to column header.
- Clicking this checkbox selects all the checkboxes in the column

Then the grid refreshes, and all the checkboxes are cleared.

We've disabled the sort normally triggered when clicking in a column header using the technique
described here:
http://www.activewidgets.com/javascript.forum.2036.4/disable-sort-in-some-columns.html

It works correctly if I disable all column header sorting, as described here:
http://www.activewidgets.com/javascript.forum.1470.11/disable-sort-feature.html

However, that is not an acceptable solution. Other columns must remain sortable.

Anyone have any ideas?

Here are source code listings providing an example of what we've tried, so far. Sorry for the poor
names (resize*), but these example files were used to find a solution to resizing the grids)

*** Be sure to update the paths for ***
*** grid.css, grid.js, and resizeGrid.js ***
*** to reflect your environment. ***


SOURCE LISTING: resizeGridSelectAll.html
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<LINK rel="stylesheet"
href="/afs/common/ActiveWidgets/runtime/styles/classic/grid.css"
type="text/css">
<title>Example Grid with Select All</title>
<script src="/afs/common/ActiveWidgets/runtime/lib/grid.js"
type="text/javascript"></script>
<script src="/afs/resizeGrid.js"
type="text/javascript"></script>

</head>
<body onload="adjustHeight()">

<!-- header -->
<div id="applicationHeader">
<table border="1" bordercolor="red">
    <tr valign="top">
        <td>Fixed Header</td>
    </tr>
</table>
</div>


<!-- data -->
<div id="scroll">
<form name="myForm">
<table border="1" bordercolor="purple" style="height:100%;table-layout: fixed;">
<tr><td>
<xml id="dataGridXML"><rows>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187929'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929781' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187928' &gt;Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929782' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187926'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929783' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187925'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929784' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187924'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929785' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187923'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929786' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187922'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929787' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187921'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929788' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>

</rows></xml>
<style id="dataGridStyle">
#dataGrid .active-column-0 {width:90px;}
#dataGrid .active-column-1 {width:90px;}
#dataGrid .active-column-2 {width:110px;}
#dataGrid .active-column-3 {width:110px;}
#dataGrid .active-grid-row {height: 20px;}
#dataGrid .active-row-cell {
    border: #0000ff 1px solid;
}
</style>
<script language="javascript">
var dataGridCols=new Array();
dataGridCols[0]='Response <input type=\"checkbox\" name=\"topBox\" onmousedown=\"selectColumn(myForm.topBox, myForm.selectedCase);\">';
dataGridCols[1]='A Column';
dataGridCols[2]='Next Column';
dataGridCols[3]='Final Column';
var dataGridTable = new Active.XML.Table;
var xml=document.getElementById("dataGridXML");
dataGridTable.setXML(xml);
var string = new Active.Formats.String;
var formats=[string,string,string,string,string,string,string,string,string,string,string];
dataGridTable.setFormats(formats);
var dataGridObj=new Active.Controls.Grid;
dataGridObj.setId("dataGrid")
dataGridObj.setProperty("column/count",4);
dataGridObj.setColumnHeaderHeight("20px");
dataGridObj.setRowHeaderWidth("0px");
dataGridObj.setModel("data",dataGridTable);
dataGridObj.setColumnText(function (i) {return dataGridCols[i]});
dataGridTable.getTooltip = function(i, j){ var node = this.getNode(i, j);return node ? node.getAttribute("tooltip") : "";};
dataGridObj.setDataModel(dataGridTable);
dataGridObj.getColumnTemplate().setAttribute("title",function(){return this.getItemProperty("tooltip")});
var clickedRow = -1;
dataGridObj.setAction("click", function(src){
clickedRow = src.getRowProperty("index");});

// Uncomment the next line to see checkbox selection work correctly.
//dataGridObj.getTemplate("top/item").setEvent("onmousedown", null);

// This allows other columns to remain sortable, but loses the checkbox selection
// when the grid appears to refresh.
var _sort = dataGridObj.sort;
dataGridObj.sort = function(index, direction){
    if (index == 0){
        alert(myForm.topBox.checked);
        return;
    } else {
        _sort.call(this, index, direction);
    }
}

document.write(dataGridObj);
</script>
</td></tr>
</table>
</form>
</div>
<!-- footer -->
<table id="footer" border="1" bordercolor="black">
    <tr>
        <td>Fixed Footer</td>
    </tr>
</table>
</body>
</html>

SOURCE LISTING: resizeGrid.js
function adjustHeight() {
// Calculate the height of the header.
var headerHeight = 0;
var header = document.getElementById("applicationHeader");

if (header != null) {
headerHeight = header.offsetHeight;
}

// Calculate the height of the footer section.
var footerHeight = 0;
var footer = document.getElementById("footer");
if (footer != null) {
footerHeight = footer.offsetHeight;
}

// Calculate the height of application components that are always visible.
var applicationHeight = headerHeight + footerHeight;

// Target height for the remainder of the screen is the browser height
// minus the height of the fixed components.
var targetHeight = document.body.clientHeight - applicationHeight;

    // Adjust the height of the scrollable segment.
    var scroller = document.getElementById("scroll");
    if (scroller != null) {
        // It's off a bit. For now, adjust it with a hard-coded value.
        targetHeight -= 50;
        scroller.style.setExpression("height", targetHeight);
    }
}

window.onresize=adjustHeight;


// Set an entire column to the current value of topCheckbox.
function selectColumn(topCheckbox, columnCheckboxes) {
    var message = "topCheckbox.checked=" + topCheckbox.checked + " columnCheckboxes.length=" + columnCheckboxes.length;
    window.status=message;
    alert(message);
    topCheckbox.checked = !topCheckbox.checked;
    for (i = 0; i < columnCheckboxes.length; i++) {
        columnCheckboxes[i].checked = topCheckbox.checked;
    }
}
Craig
Tuesday, May 17, 2005
Problem solved.

The source listing containing the solution is at the end of this message. It uses the same resizeGrid.js listing in the original post. Feel free to remove the annoying alert() call.

The key piece was installing a custom onmousedown event handler for all column headers and then giving special treatment to the one with a checkbox. All other column headers do their normal sort routine.

The "Select All" checkbox also needs an onmousedown event handler. This JavaScript function does the work of selecting all the other checkboxes.

var header = new Active.Templates.Header;

// Install a custom handler for mousedown events for all column headers.
// Most will still do the normal sort operation, but the "Select All"
// column should not be sorted.
header.setEvent("onmousedown", function(event){
    // Do nothing if the event's source is an INPUT field.
    // This assumes any INPUT in a header is "Select All" checkbox and
    // that columns with a checkbox should not be sorted.
    var tag = event.srcElement.tagName;
    if (tag != "INPUT") {
this.setClass("header", "pressed");
this.timeout(function(){this.action("columnSort")});
}
});

I got the idea from Alex's response in this post:
http://www.activewidgets.com/javascript.forum.2094.5/context-menu-on-header.html

Here's the complete listing of the HTML file containing the Select All checkbox example:

<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<LINK rel="stylesheet"
href="/afs/common/ActiveWidgets/runtime/styles/classic/grid.css"
type="text/css">
<title>Example Grid with Select All</title>
<script src="/afs/common/ActiveWidgets/runtime/lib/grid.js"
type="text/javascript"></script>
<script src="/afs/resizeGrid.js"
type="text/javascript"></script>

</head>
<body onload="adjustHeight()">

<!-- header -->
<div id="applicationHeader">
<table border="1" bordercolor="red">
    <tr valign="top">
        <td>Fixed Header</td>
    </tr>
</table>
</div>


<!-- data -->
<div id="scroll">
<form name="myForm">
<table border="1" bordercolor="purple" style="height:100%;table-layout: fixed;">
<tr><td>
<xml id="dataGridXML"><rows>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187929'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929781' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187928' &gt;Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929782' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187926'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929783' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187925'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929784' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187924'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929785' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187923'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929786' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187922'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929787' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>
<row>
<col tooltip="Hello?">&lt;input type='checkbox' name='selectedCase' value='187921'&gt; Hello?</col>
<col tooltip="Is">Is</col>
<col tooltip="anyone">anyone</col>
<col tooltip="home?">home?</col>
</row>
<row>
<col tooltip="Nobody">&lt;input type='checkbox' name='selectedCase' value='929788' &gt;Nobody</col>
<col tooltip="here">here</col>
<col tooltip="but us">but us</col>
<col tooltip="chickens.">chickens.</col>
</row>

</rows></xml>
<style id="dataGridStyle">
#dataGrid .active-column-0 {width:90px;}
#dataGrid .active-column-1 {width:90px;}
#dataGrid .active-column-2 {width:110px;}
#dataGrid .active-column-3 {width:110px;}
#dataGrid .active-grid-row {height: 20px;}
#dataGrid .active-row-cell {
    border: #0000ff 1px solid;
}
</style>
<script language="javascript">
var dataGridCols=new Array();
dataGridCols[0]='<input type=\"checkbox\" name=\"topBox\" onmousedown=\"selectColumn(myForm.topBox, myForm.selectedCase);\">';
dataGridCols[1]='A Column';
dataGridCols[2]='Next Column';
dataGridCols[3]='Final Column';
var dataGridTable = new Active.XML.Table;
var xml=document.getElementById("dataGridXML");
dataGridTable.setXML(xml);
var string = new Active.Formats.String;
var formats=[string,string,string,string,string,string,string,string,string,string,string];
dataGridTable.setFormats(formats);
var dataGridObj=new Active.Controls.Grid;
dataGridObj.setId("dataGrid")
dataGridObj.setProperty("column/count",4);
dataGridObj.setColumnHeaderHeight("20px");
dataGridObj.setRowHeaderWidth("0px");
dataGridObj.setModel("data",dataGridTable);
dataGridObj.setColumnText(function (i) {return dataGridCols[i]});
dataGridTable.getTooltip = function(i, j){ var node = this.getNode(i, j);return node ? node.getAttribute("tooltip") : "";};
dataGridObj.setDataModel(dataGridTable);
dataGridObj.getColumnTemplate().setAttribute("title",function(){return this.getItemProperty("tooltip")});
var clickedRow = -1;
dataGridObj.setAction("click", function(src){
clickedRow = src.getRowProperty("index");});

var header = new Active.Templates.Header;

// Install a custom handler for mousedown events for all column headers.
// Most will still do the normal sort operation, but the "Select All"
// column should not be sorted.
header.setEvent("onmousedown", function(event){
    // Do nothing if the event's source is an INPUT field.
    // This assumes any INPUT in a header is "Select All" checkbox and
    // that columns with a checkbox should not be sorted.
    var tag = event.srcElement.tagName;
    if (tag != "INPUT") {
this.setClass("header", "pressed");
this.timeout(function(){this.action("columnSort")});
}
});

dataGridObj.setTemplate("top/item", header);
document.write(dataGridObj);
</script>
</td></tr>
</table>
</form>
</div>
<!-- footer -->
<table id="footer" border="1" bordercolor="black">
    <tr>
        <td>Fixed Footer</td>
    </tr>
</table>
</body>
</html>
Craig
Wednesday, May 18, 2005
obj.setAction("columnSort", function(src){
var i = src.getItemProperty("index");
if(i!=0){
var d = (this.getSortProperty("index") == i) && (this.getSortProperty("direction")=="ascending") ? "descending" : "ascending";
window.status = "Sorting...";
this.sort(i, d);
this.refresh();
this.timeout(function(){window.status = ""});
}
});

in if(i!=0) you disable sorting in the column with index=0.
Angelo Braga
Tuesday, July 19, 2005

This topic is archived.


Back to support forum

Forum search