Hi,

My first thought is always to turn off UseOSThemes on the control.  I'll take a look and see if there's more to do here but that's always my go to!

Hi,

This sounds familiar to something that has been requested in the past about being able to control the disabled appearances and the problem was we let the OS handle the rendering when disabled… but then why do we expose these diasabled appearances…give us a bit to dive into that area again.  Have you tried this with UseOSThemes turned off? 

You can clear the contents of the licenses.licx file.  Chances are you re-installed the release version of the 10.1 version and you were using a service release prior.  You might have wanted that Service Release so if you grab the Service Release build 2195 this would go away but for now to continue working you can just clear the contents of that licenses.licx file. 

Excellent point, I should have done that in the first place.  The setup needs to be completed in the OnInit as Page_Load happens too late in the page lifecycle.  I've updated the code to reflect this change.

Hi,

A few things first:

Try to avoid hard coding any ids in your script

[quote user="amol123"]

frm.elements.checked = document.getElementById(

"UltraWebGrid1_ctl01_cbSelectAll").checked;//document.getElementById(id).checked;

[/quote]

instead render out the clientID to a global javascript variable for the page like I did here:

[quote user="mkraft"]

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

[/quote]

so anywhere in the javascript I can reference the grid and the HeaderCheckBox.  I've also seen others render an array of the id's of the checkboxes in the cells to the client in the same manner so they can just call document.getElementById(x) where "x" is the id from the array. 

On the client I showed how to do access the checkbox in my HeaderCheckedChange function which looked like this:

[quote user="mkraft"]

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

[/quote]

On the Server if you want access the CheckBox in the CellTemplate it would look like this:

//create a variable for the templated column in the WebGrid
TemplatedColumn  templatedColumn = (TemplatedColumn) this.UltraWebGrid1.Columns.FromKey("TemplatedColumn");

//get a cellitem reference in the cellitems collection
CellItem cellItem = (CellItem) templatedColumn.CellItems[myRowIndex];

//find the control
Control cs = cellItem.FindControl("CheckBox1");

//cast the control into the correct type
CheckBox myCheckBox = (CheckBox) cs;

Now you have a reference to the CheckBox control that is in the cell… interrogate the value of the checked property or set it as you see fit. 

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.