I am attaching a sample to change datasource with a diffrent column count in WebGrid and setting a different column header color for each datatable.

In the sample the datasource in the WebGrid will be changed using button click and RefreshAll WebGrid method.

The snippet to change the header color using SetDefaultStyle function works without any issue in my environment. 

The sample is run on the environment using the latest WebGrid 6 and WebUIFramework 3. Eventough you are using 2008 R1, you are still eligible for WebGrid 6 and WebUIFramework 3 update.

Hi Glenn,

Is there any way to achieve this in JavaScript?

Regards

Hello,

I created a WebGrid page, I bound the WebGrid to access data source (Northwind.mdb database & Shippers table).
I added a HTML input button to the page and created a JavaScript code to modify the Phone column color into red.

Here’s the example snippet code to modify column’s color:

function SetColor(){
    var WebGrid1 = ISGetObject("WebGrid1");
    WebGrid1.RootTable.Columns[2].GetElement().style.backgroundColor = "Red";
}

I attached the WebGrid page, so that you could see the result furthermore.

Hope this helps.

Regards,
Hans K.

Hi Hans,

Thanks for your reply.

I am trying to add the background colour to the header when column is added from the context menu.

I tried to add the code provided by you as shown below,  but its throwing JavaScript error “Unable to get property 'style’ of undefined ornull reference”.

Can you please tell what’s wrong with this implementation and a way to achieve the given scenario?

Regards
Dev

Hello,

Thank you for the reply.

I tried to modify your code so that it can resolve your issue. I add setTimeout() method to your code. Here’s the how I add the setTimeout() method:

function WebGrid1_OnColumnChanged(controlId, tblName, colName, action){
    if (action == "Added")
    {
        if (ISGetObject(controlId).RootTable.GetColumn(colName).AllowGrouping == "Yes")
        {
            window.setTimeout(function ()
            {
                ISGetObject(controlId).RootTable.GetColumn(colName).GetElement().style.backgroundColor = "Red";
            }, 100);
        }
    }
}

Please kindly have review on the attached page & video about the result of this workaround.

Hope this helps.

Regards,
Hans K.

Hi Hans,

Thanks for the workaround. It solved my problem.

But this is not working if I use the “Reset” option in thecontext menu.

On grid initiation I am setting the background colour for the Header now if the user removes the column and add it back the colour should come back as well.

Using the “OnColumnChanged” event I am able to handle the “Apply” click but I am not getting any event for “Reset” click.

Please suggest a solution.

Regards
Dev

Hello,

The “Reset” event will cause the WebGrid will do postback event. It won’t call “OnColumnChanged” client side event.

So I modified the attached WebGrid page, by adding “OnInitializeLayout” server side event to the WebGrid.
In “OnInitializeLayout” event, I add a line of code to modify “Phone” column header color to “Red”.
Here’s the snippet code:

protected void WebGrid1_InitializeLayout(object sender, ISNet.WebUI.WebGrid.LayoutEventArgs e){
    WebGrid1.RootTable.Columns.GetNamedItem("Phone").HeaderStyle.BackColor = System.Drawing.Color.Red;
}

I attached the modified page as well. Please let me know your response.

Regards,
Hans K.

Hi Hans,

Thanks for sample code.

The solution provided by you works fine.

Thanks,
Dev

Hello,

Thank you for the confirmation.

I’m glad to hear that the solution works fine on your end.

Should you have further question, please do not hesitate to contact us.

Regards,
Hans K.