Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Groove
185
Insert check all/Uncheck all checkbox in template column header at Runtime
posted

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

Parents
  • 5118
    posted

    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:

    C#

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

        }

    }

    VB.NET

    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:

    C#

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

    VB.NET

    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...

    C#

    public class PlaceHolderTemplate : ITemplate

    {

        public void InstantiateIn(Control container)

        {

            // Cast the container to a CellItem

            CellItem cellitem = (CellItem)container;

            CheckBox cb = new CheckBox();

            cb.ID = "cellCB";

            cellitem.Controls.Add(cb);

        }

    }

    VB.NET

    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.

Reply Children