Hi Guys,
I've a requirement to change the WebHierarchicalDataGrid column header CSS from code behind. Below is the code snippet:
For Each col As Infragistics.Web.UI.GridControls.BoundDataField In WebHierarchicalDataGrid1.GridView.Columns If htFilterCaption.ContainsKey(col.Key) Then col.Header.Tooltip = String.Join(Environment.NewLine, DirectCast(htFilterCaption(col.Key), ArrayList).ToArray) col.Header.CssClass = "FilteredHeader" Else col.Header.Tooltip = "" col.Header.CssClass = "" End If Next
The code above is working as expected in Infragistics 2013.1 SR 2069 but it does not working anymore when we upgrade the SR to 2331.
As you can see, we need to change the header CSS class to "FilteredHeader".
Any help is appreciated! Thanks!
Hello Nazmi,
When are you executing this code and what sort of styling are you applying with FilteredHeader? How is hfFilterCaption populated? Knowing this information can allow me to better answer why this logic isn't working in your application.
Changing the header CSS should still be possible exactly the way you are doing it. I've attached a small sample below that I used to verify that setting the Header's CssClass works when using 13.1.20131.2331. Please let me know if this sample works for you as well.
Hi Jason,
Thanks for your prompt response.
I’ve tried the sample you’ve provided and indeed it is working as expected. Then I’ve modified it a bit to follow how we would want to achieve it. But, the header style is not changing.
Please refer to the code on where we are trying to change the header style from a click of a button:
Design
<body>
<form id="form1" runat="server">
<div>
<ig:WebScriptManager ID="WebScriptManager1" runat="server"></ig:WebScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode ="Conditional" >
<ContentTemplate>
<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px" DataKeyFields="ID" AutoGenerateColumns="false" OnDataBound="Data_Bound">
<Columns>
<ig:bounddatafield Key="ID" DataFieldName="ID" Header-Text="ID">
</ig:bounddatafield>
<ig:bounddatafield Key="Text" DataFieldName="Text" Header-Text="Text">
<ig:bounddatafield Key="Value" DataFieldName="Value" Header-Text="Value">
</Columns>
</ig:WebDataGrid>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnChange" runat="server" Text="Change"
onclick="btnChange_Click" />
<asp:Button ID="btnUnChange" runat="server" Text="Un-Change"
onclick="btnUnChange_Click" />
</div>
</form>
</body>
Code Behind
namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
public void Page_Load(object sender, EventArgs e)
if (Session["Data"] == null)
SampleData data = new SampleData();
Session["Data"] = data.Items;
}
WebDataGrid1.DataSource = Session["Data"];
public void Data_Bound(object sender, EventArgs e)
WebDataGrid1.Columns[0].Header.CssClass = "SampleHeader";
protected void btnChange_Click(object sender, EventArgs e)
UpdatePanel1.Update();
protected void btnUnChange_Click(object sender, EventArgs e)
WebDataGrid1.Columns[0].Header.CssClass = "";
As requested, we are applying these styling on the “FilteredHeader” CSS:
.FilteredHeader
background-color: transparent;
background-position: 50% bottom;
background-image: url(../CSS/InfragisticsStyles/Office2007Silver/images/FilteredGridHeader.jpg);
border-width: 0px;
border-color: Transparent;
border-right-width: 1px;
border-right-color: DarkGray;
padding: 3px;
Thanks!
Looking in to this further it appears that an issue was found where the value of the Header.CssClass was not being checked correctly in the Setter method. A fix was made for this issue in August of this year and was released in builds 13.2.20132.2255, 14.1.20141.2283, and the release build of 14.2, build 14.2.20142.1028. To be able to change the Header.CssClass on the server you'll need to upgrade to one of those versions or later.
As a note, I see that you have the WebDataGrid inside of an UpdatePanel. Since the WebDataGrid is an AJAX control itself you may find that you have odd behaviors when allowing it to use its AJAX functionality inside of the UpdatePanel. To avoid this, please set EnableAjax to false on the grid if you want to keep it inside of the UpdatePanel.
Were you able to download and install the service release and if so did this resolve the Header CssClass behavior? Please let me know if I may be of any further help.