Hi,
I have created a column at runtime that I need to be able to modify and add a checkbox in the header. This checkbox should enable the user to select all / unselect all items in the ultrawebgrid. If anyone knows please tell me how I can add this checkbox to the header at runtime and make this happen. I tried doing
Dim CheckAll As New CheckBox
column.HeaderItem.TemplateControl.Controls.Add(CheckAll)
but this did not work. I have to create this at Runtime since the column is also created in Runtime, all examples I found so far show how to do this in design. Any help is greatly appreciated
Hello,
Alright so to do this we need to add the checkbox to the header template before the column is even created... so before I assigned the datasource property of the grid I needed to setup the template column. <In the snippet you added I am guessing you did that in the InitializeLayout event handler or after you've set the DataSource and called DataBind and that is too late to hook items into the HeaderTemplate, do it in the Page's OnInit instead.>
So here's the code to do that column setup:
C#
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
// Create a templated column
TemplatedColumn col = new TemplatedColumn(true);
this.UltraWebGrid1.DisplayLayout.Bands[0].Columns.Add(col);
col.Key = "CheckBoxCol";
col.Header.Caption = "";
GridHeaderTemplate tempHeader = new GridHeaderTemplate();
// Set the header template.
col.HeaderTemplate = tempHeader;
this.UltraWebGrid1.DataSource = LoadGrid();
this.UltraWebGrid1.DataBind();
}
VB.NET
Protected Overrides Sub OnInit(ByVal e As EventArgs)
MyBase.OnInit(e)
' Create a templated column Dim col As New TemplatedColumn(True) Me.UltraWebGrid1.DisplayLayout.Bands(0).Columns.Add(col) col.Key = "CheckBoxCol" col.Header.Caption = "" Dim tempHeader As New GridHeaderTemplate() ' Set the header template. col.HeaderTemplate = tempHeader Me.UltraWebGrid1.DataSource = LoadGrid() Me.UltraWebGrid1.DataBind() End Sub
So now what does my GridHeaderTemplate look like:
public class GridHeaderTemplate : ITemplate
public void InstantiateIn(Control container)
// Cast the container to a HeaderItem
HeaderItem headerItem = (HeaderItem)container;
CheckBox checkBox = new CheckBox();
CheckBox cb = new CheckBox();
cb.ID = "headerCB";
cb.Attributes.Add("onclick", "HeaderCheckedChanged();");
headerItem.Controls.Add(cb);
Public Class GridHeaderTemplate Implements ITemplate Public Sub InstantiateIn(ByVal container As Control) ' Cast the container to a HeaderItem Dim headerItem As HeaderItem = DirectCast(container, HeaderItem) Dim checkBox As New CheckBox() Dim cb As New CheckBox() cb.ID = "headerCB" cb.Attributes.Add("onclick", "HeaderCheckedChanged();") headerItem.Controls.Add(cb) End Sub End Class
Next I setup the Cell Template dynamically in the WebGrid's InitializeLayout event handler:
TemplatedColumn col = (TemplatedColumn)(e.Layout.Bands[0].Columns.FromKey("CheckBoxCol"));
PlaceHolderTemplate tempCell = new PlaceHolderTemplate();
// Set the cell template.
col.CellTemplate = tempCell;
// make the checkbox the last column of band 0.
col.Move(e.Layout.Bands[0].Columns.Count - 1);
this.ClientScript.RegisterClientScriptBlock(this.GetType(), "CheckBoxKey", "<script type='text/javascript'>var headerCheckBoxID = '" + col.HeaderItem.FindControl("headerCB").ClientID + "';</script>");
this.ClientScript.RegisterClientScriptBlock(this.GetType(), "GridKey", "var gridID = '" + this.UltraWebGrid1.ClientID + "';", true);
Dim col As TemplatedColumn = DirectCast((e.Layout.Bands(0).Columns.FromKey("CheckBoxCol")), TemplatedColumn)
Dim tempCell As New PlaceHolderTemplate() ' Set the cell template. col.CellTemplate = tempCell
' make the checkbox the last column of band 0. col.Move(e.Layout.Bands(0).Columns.Count - 1)
Me.ClientScript.RegisterClientScriptBlock(Me.[GetType](), "CheckBoxKey", "<script type='text/javascript'>var headerCheckBoxID = '" + col.HeaderItem.FindControl("headerCB").ClientID + "';</script>") Me.ClientScript.RegisterClientScriptBlock(Me.[GetType](), "GridKey", "var gridID = '" + Me.UltraWebGrid1.ClientID + "';", True)
The PlaceHolderTemplate used for the Cell Template should be awfully familiar now that we've seen the header...
public class PlaceHolderTemplate : ITemplate
// Cast the container to a CellItem
CellItem cellitem = (CellItem)container;
cb.ID = "cellCB";
cellitem.Controls.Add(cb);
Public Class PlaceHolderTemplate Implements ITemplate Public Sub InstantiateIn(ByVal container As Control) ' Cast the container to a CellItem Dim cellitem As CellItem = DirectCast(container, CellItem) Dim cb As New CheckBox() cb.ID = "cellCB" cellitem.Controls.Add(cb) End Sub End Class
Now I told the Header Checkbox to call a javascript function when its onclick fires... so here's the js I used to toggle the checkbox:
<script type="text/javascript">
function HeaderCheckedChanged(){
var headerCheckBox = document.getElementById(headerCheckBoxID);
var grid = igtbl_getGridById(gridID);
for (i = 0; i < grid.Rows.length; i++)
grid.Rows.getRow(i).getCellFromKey("CheckBoxCol").getElement().children[0].checked = headerCheckBox.checked;
</script>
The javascript function can be written in several ways and accomplish the same task this is merely one way to accomplish this task.
Also as you can see in the code behind I registered a script block to render the grid's id to the client for use in my HeaderCheckedChanged function and I also threw the Header CheckBox's Id out to the client as well. You can use a stringbuilder and do this part a little neater but I think the point of what I've done to solve the task presented has been displayed in these code snippets.
What have others done in the past to solve this task?
EDIT: Updated code snippets to handle OnInit instead of Page_Load as page load was again too late in the Page's Lifecycle.
Mathew
When binding the second time.. one thing which I noticed is "InstantiateIn" of GridHeaderTemplate doesn't fire, because of which the checkbox is not getting added. Another thing is the reference to "col.HeaderItem.FindControl("headerCB").ClientID" is not available which again because the HeaderCB didn't get added. Any help?
Thanks
Saran
Hi Mathew,
I tried using the code given by you. When I bind the grid for the second time, the checkbox in the Header column disappears. Any suggestion?? Appreciate your help.
hi, what I have done is added a CheckBox in template column header and called javascript function to check/uncheck all the checkboxes in the cell template this works fine, but I cant access checkboxes inside grid added in celltemplate. here is HTML and C# code which I am using.
<Bands>
<AddNewRow Visible="NotSet" View="NotSet"></AddNewRow>
<Columns>
<igtbl:TemplatedColumn Key="selectall" >
<Header Caption="Select" >
<RowLayoutColumnInfo OriginX="1" />
</Header>
<HeaderTemplate>
<asp:CheckBox ID="cbSelectAll" runat="server" onclick="BLOCKED SCRIPTcheckall()" />
<asp:Label ID="lbl_select" runat="server" Text="Select"></asp:Label>
</HeaderTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Value="False" />
</CellTemplate>
<CellStyle HorizontalAlign="Center" ></CellStyle>
<HeaderStyle HorizontalAlign="Center" />
<Footer>
</Footer>
</igtbl:TemplatedColumn>
<igtbl:UltraGridColumn BaseColumnName="Name" Key="Name" IsBound="True" >
<Header Caption="Name" ></Header>
</igtbl:UltraGridColumn>
</Columns>
<RowTemplateStyle BackColor="Window" BorderColor="Window" BorderStyle="Ridge">
<BorderDetails WidthBottom="3px" WidthLeft="3px" WidthRight="3px" WidthTop="3px" />
</RowTemplateStyle>
<RowEditTemplate>
<br />
</igtbl:UltraGridBand>
and following is the script
frm.elements.checked = document.getElementById("UltraWebGrid1_ctl01_cbSelectAll").checked;//document.getElementById(id).checked;
and following is the code for checking which text boxes are checked or uncheked.
Response.Write(UltraWebGrid1.Rows.Cells[0].Value);
this code returns me always blank value though i have tick some of the checkboxes.
Plz help me.
Thanks.