William wrote:I tried the "DataFormat" method as you said but it doesn't work. Is it possible that the properties of the grid or callbackpanel are not set correctly?
We looked into this and noticed that you must have a cell value. The Grid does not apply DataFormat when it does not have a cell value.
William wrote:I also tried the "Text" method:
<eo:StaticColumn DataField="" DataFormat="" HeaderText="Delete" Text="<input type='checkbox' disabled=false id='cbDel' />">
</eo:StaticColumn>
and then set all the checkbox except the last one to be enabled by calling the following function through ClientSideOnLoad of the grid:
function Set_initialGrid()
{
var grid = eo_GetObject('gridResult');
var i = 0;
for (i = 0; i < grid.getItemCount() ; i++)
{
document.all.cbDel2[i].disabled=false;
}
return;
}
I can access the checkbox. But they return to the original setting right away. Is there other things I should do?
This is normal because whenever the Grid tries to "refresh" a cell, it refreshes based on Value, DataFormat and Text, in your case, based on your Text property. So when it does a refresh, it reloads Text and you lose every change you made. Thus it is important any change you made is made to the cell value. This also means you need to update the Grid cell value whenever user clicks on the checkbox. The Grid remembers and maintains cell values and considers everything else can be regenerated.
Another value that the Grid remembers and maintains on a per cell basis is the cell style. You can call overrideStyle to update the cell style. This can be useful for your situation. Below is a working sample for your scenario:
Code: CSS
DIV.normal input.normal
{
}
DIV.normal input.disabled
{
display: none;
}
DIV.disabled input.normal
{
display: none;
}
DIV.disabled input.disabled
{
}
Code: JavaScript
//This function is called after the Grid is loaded
//through ClientSideOnLoad
function initGrid()
{
var grid = eo_GetObject("Grid1");
var itemCount = grid.getItemCount();
for (var i = 0; i < itemCount; i++)
{
//Get the cell object
var cell = grid.getItem(i).getCell(0);
//"Attach" the item index to the checkbox object
cell.setValue("itemIndex='" + i + "'");
//Disable/enable checkbox
if (i == itemCount - 1)
cell.overrideStyle("disabled");
else
cell.overrideStyle("normal");
}
}
//This function is called when a checkbox is clicked
function checkboxClicked(cb)
{
var grid = eo_GetObject("Grid1");
//Get the item index from the checkbox
var itemIndex = parseInt(cb.itemIndex);
var cell = grid.getItem(itemIndex).getCell(0);
//Format the new cell value. This new cell value
//still contains the itemIndex, but also the new
//checked state
var cellValue = "itemIndex='" + itemIndex + "'";
if (cb.checked)
cellValue += " checked='checked'";
//Update the cell value. This will refresh
//the cell HTML if necessary
cell.setValue(cellValue);
}
Code: HTML/ASPX
<eo:Grid ClientSideOnLoad="initGrid" ....>
....
<Columns>
<eo:StaticColumn DataFormat="
<input class="normal" type="checkbox"
{0} onclick="checkboxClicked(this);" />
<input class="disabled" type="checkbox"
disabled="disabled" />" >
</eo:StaticColumn>
</Columns>
</eo:Grid>
The only static column's DataFormat is set to:
Code: HTML/ASPX
<input class="normal" type="checkbox" {0}
onclick="checkboxClicked(this)" />
<input class="disabled" type=checkbox" disabled="disabled" />
It actually generates two checkboxes per cell. One is enabled, and the other is disabled. If the cell's style is set to "normal", then rule "DIV.normal input.normal" is applied to the first checkbox and "DIV.normal input.disabled" is applied to the second checkbox. This results in the first checkbox being visible and the second one being invisible, thus rendering an enabled checkbox. If the cell's style is set to "disabled", then rule "DIV.disabled input.normal" is applied to the first checkbox and rule "DIV.disabled input.disabled" is applied to the second checkbox. This results in the first checkbox being invisible and the second one being visible, thus rendering a disabled checkbox.
The first checkbox also has an onclick handler which updates the cell value when clicked. It passes in "this" as the only parameter, which represents the checkbox itself. The code formats each cell's value to contains an itemIndex attribute so that later checkboxClicked can get the item index from the checkbox. It also updates "checked" attribute accordingly. For example, if the first item is clicked, the refresh HTML will be like this:
Code: HTML/ASPX
<input class="normal" type="checkbox"
itemIndex="0" checked="checked"
onclick="checkboxClicked(this)" />
<input class="disabled" type=checkbox" disabled="disabled" />
The second line the new "cell value".
Using CustomColumn for this particular scenario may result in cleaner code because CustomColumn calls your JavaScript to format cell HTML and passes you the cell object directly. However the underlying principle is the same. Changes are always made to the cell value and cell HTML is always regenerated from the cell value.
Hope this helps.
Thanks!