Issue#1:

The HeaderStyle will be applied to each TR element in the header section, in your project sample, the Header section has 3 TR element and each TR is applied the correct style.

Issue#2:

The WebGrid header freeze pane border style currently could not be modified using the skin. If you would like to modify the style you will need to change the element style manually during WebGrid Initialize event.

Hi,

Issue #1.

Its a plain and simple question, How do I apply the style to the Header of the WebGrid, through the skin?

The HeaderRow which shows the Coloumns on the top, I want to set the bottom border and no top border, can you provide me the style tags which I should be using in the skin file please?

Issue #2.

Please provide me with the code which I should be using in the Initialize Event funtion.

BR,

Shahjahan Ansari 

Hi,

I had a chat with Jimmy about Issue #1 and the separator TR element which appears between the Header Row and Filter row is causing this problem. According to him, javascrpt code can be used to set the style to the separator TR element. Can you please provide me with the necessary scripts please?

Br,

Shahjahan Ansari

Here is the script snippet for your issue:

issue #1:

function grdObj_OnAfterInitialize(controlId)
{
	var grdObj = ISGetObject(controlId);

	var headerRows = grdObj.RootTable.GetElement(WG40.COLHEADER, WG40.HTMLROW).getElementsByTagName("tr");

	for (var i = 0; i < headerRows.length; i++) {
	    if (headerRows[i].type == "RowSeparator" || headerRows[i].type == "FilterRow") {
	        var colElem = headerRows[i].getElementsByTagName("td");
	        for (var j = 0; j < colElem.length; j++)
	            colElem[j].style.borderTopColor = "#DBDBDB";
	    }
	}
	
	return true;
}

issue #2:

function grdObj_OnAfterInitialize(controlId)
{
	var grdObj = ISGetObject(controlId);

	var headerRows = grdObj.RootTable.GetElement(WG40.COLHEADER, WG40.HTMLROW).getElementsByTagName("tr");

	for (var i = 0; i < headerRows.length; i++) {
	    if (headerRows[i].type == "ColHeader") {
	        var colElem = headerRows[i].getElementsByTagName("td");
	        colElem[2].style.borderRightColor = "";
	        colElem[2].style.borderRightWidth = "";
	    }
	}
	
	return true;
}

Since you are using skin you will need to set the event handling in the skin file.

<LayoutSettings>
    <ClientSideEvents OnAfterInitialize="grdObj_OnAfterInitialize"/>
...
</LayoutSettings>