Hi I need a ultrawebgrid with column(0) as checkbox. When I check the header checkbox i have to check all the checkboxes in the column(0).
how to do this. early response would be greatly appreciated.
Thanks,
ATMY@chevron.com
Javascript is:
//variable used to retain a reference to the grid for when we need to check all the roads.var oGrid;var cbSelectAll;//Selects all checkboxes in the gridfunction SelectAll(colIndex){ var checked = cbSelectAll.checked; for (i = 0; i < oGrid.Rows.length; i++) { oGrid.Rows.getRow(i).getCell(colIndex).setValue(checked); }}//Intialization function which sets the grid referencefunction igrdInitializeLayout(object){ oGrid = igtbl_getGridById(object); //need to set it here due to Infragistic's handling of columns. cbSelectAll = document.getElementById("cbSelectAll");}
Band using this is (note usage of name of the checkbox in script above and templated column below):
<igtbl:UltraGridBand BaseTableName="myTable" Key="key" > <columns><igtbl:UltraGridColumn Hidden="True" Key="key" BaseColumnName="key"></igtbl:UltraGridColumn><igtbl:TemplatedColumn Key="someKey" Type="CheckBox" BaseColumnName="ColumnWhatever" AllowUpdate="Yes">
<HeaderTemplate> <input id="cbSelectAll" name="cbSelectAll" type="checkbox" onclick="BLOCKED SCRIPTSelectAll(1)" /> </HeaderTemplate></igtbl:TemplatedColumn>
Hi,
I am trying to make the script you provided work but need help with it. I included your script in the form header, I have to include the checkbox column as a template column at runtime, inside the header text for this column I insert
column.HeaderText = "<div><input type = 'checkbox' name = 'cbSelectAll' value = 'false' onclick='SelectAll(0);'><div>"
which inserts the checkbox in the column header but when I try to select it it gives me an error saying 'cbSelectAll.checked' is null or not an object. Can someone who has made this script work give me ideas? the only difference from your example is that I am creating the template column at runtime. Thanks in advance!!
I forgot to mention (I think) the declaration of the javascript variables:
var oGrid;var cbSelectAll
These are global variables.
Ok I got it to work! half way though!! how can I check the value and select / and unselect all?? right now it selects everything but I cant seem to figure a way out to revesr it I tried doing this
{
//oGrid.Rows.getRow(i).getCell(0).setValue(checked);
alert(object)
}
else
but this does not work how can I evaluate the property and reverse it based on the value? I cannot seem to set the value to false or uncheck?!?
Here is my code, where I have Column with checkboxes and header is checkbox too. When header checkbox is selected all cell's checkboxes are selected too. If in one of the cell the checkbox is unchecked, uncheck the header too.
// html markup
<igtbl:TemplatedColumn basecolumnname="Read" key="Read" type="CheckBox" datatype="System.Boolean" allowupdate="Yes" width="20px"> <HeaderTemplate> <input id="chboxNotificationsHeaderCheck" onclick="checkHeader_OnClick_Read('<%= GridNotificationSortByRead.ClientID %>',this)" type="checkbox"> </HeaderTemplate> <HeaderStyle customrules="padding: 0px; text-align: right;"></HeaderStyle></igtbl:TemplatedColumn>
..........
<ClientSideEvents AfterCellUpdateHandler="grid_OnAfterCellUpdate_Read" />
// javascript code
// Function for grids where the check column name is "Read"function grid_OnInitializeLayout_Read(gridName){ // Check all Rows checkboxes if they are checked var checkboxColumnName = "Read"; var oGrid = igtbl_getGridById(gridName); for(var i = 0; i < oGrid.Rows.length; i++) { var oRow = oGrid.Rows.getRow(i); var cell = oRow.getCellFromKey(checkboxColumnName); var cellCheckValue = oRow.getCellFromKey(checkboxColumnName).getValue(); // if at least one is unchecked, set the variable and return from the function if (!cellCheckValue) { document.getElementById(cell.Column.Id).children[0].checked = false; return; } } // Change Header checkbox document.getElementById(cell.Column.Id).children[0].checked = true;}// Function for grids where the check column name is "Read"function checkHeader_OnClick_Read(gridName, cellId){ var checkboxColumnName = "Read"; var oGrid = igtbl_getGridById(gridName); var oRows = oGrid.Rows; var cellEvent = oGrid.Events.AfterCellUpdate[0]; oGrid.Events.AfterCellUpdate[0] = ""; for(var i = 0; i < oRows.length; i++) { var oRow = oRows.getRow(i);
// this calls AfterCellUpdate, that is why we use IsInHeaderClickHandler oRow.getCellFromKey(checkboxColumnName).setValue(sender.checked); // This works only for the multi bind grids, for other cases the count is 0 for(var j = 0;j < oRow.ChildRowsCount; j++) { chRowId = oRow.Id + "_" + j.toString(); oChRow = igtbl_getRowById(chRowId); oChRow.getCellFromKey("IsSelectedChild").setValue(oRow.getCellFromKey(checkboxColumnName).getValue()); } } oGrid.Events.AfterCellUpdate[0] = cellEvent;}
-------------------------------------------------------------------------------------------------------------------------------------------
And everything was fine, before I put the last version of the Infragistics controls. Now in some button event handler (when my button is clicked), the new state of the checkboxes isn't right. All rows are with Unchanged data.
I don't know how to fix this problem. Pls, help
Iva
I tried getting the code examples above to work but did not have any success. What is calling
function igrdInitializeLayout(object)? Do I need to make a call to this function somewhere?
Thanks
ok I found it hope this helps someone else save some time, this worked for me
var object = eval(oGrid.Rows.getRow(i).getCell(0).getValue(checked));
oGrid.Rows.getRow(i).getCell(0).setValue(true);