Gridview sorted header css not loading

[Cineno]

I have a GridView that has its columns loaded from codebehind. The header CSS class I specified in the aspx page, but it wasn't loading for these columns. So I added: GridView1.HeaderRow.CssClass = "HeaderStyle" in the codebehind after binding and then it loaded. I can't figure out how to do this for the sorted column style though.

Here's the codebehind. Any idea what I need to enter to style the sorted column and where it should be added?

Sub Page_load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
CreateGridColumns()
BindGrid()
End If
End Sub

Public Property SortExpression As String
Get
If ViewState("SortExpression") Is Nothing Then
ViewState("SortExpression") = "LastName ASC"
End If
Return ViewState("SortExpression").ToString
End Get
Set(ByVal value As String)
ViewState("SortExpression") = value
End Set
End Property

Private Sub CreateGridColumns()
Dim curLastName As New BoundField
curLastName.HeaderText = "Last Name"
curLastName.DataField = "LastName"
curLastName.SortExpression = "LastName"

GridView1.Columns.Insert(0, curLastName)


Dim curFirstName As New BoundField
curFirstName.HeaderText = "First Name"
curFirstName.DataField = "FirstName"
curFirstName.SortExpression = "FirstName"

GridView1.Columns.Insert(1, curFirstName)

End Sub

Private Sub BindGrid()
Try
Dim tblData = New DataTable
Using sqlCon As New SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings("dbConnectionString").ConnectionString.ToString())
Dim sql As String = "SELECT * FROM EmployeeList ORDER BY {0}"
Dim sqlCmd = New SqlClient.SqlCommand()
sqlCmd.CommandText = String.Format(sql, Me.SortExpression)
sqlCmd.Connection = sqlCon
Using objAdapter As New SqlClient.SqlDataAdapter(sqlCmd)
objAdapter.Fill(tblData)
End Using
End Using
GridView1.DataSource = tblData
GridView1.DataBind()

GridView1.HeaderRow.CssClass = "HeaderStyle"

Catch ex As Exception
' TODO: log error '
Throw
End Try
End Sub
Private Sub GridView1_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles GridView1.PageIndexChanging
Me.GridView1.PageIndex = e.NewPageIndex
BindGrid()
End Sub

Private Sub GridView1_Sorting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewSortEventArgs) Handles GridView1.Sorting
Dim currentSortColumn, currentSortDirection As String
currentSortColumn = Me.SortExpression.Split(" "c)(0)
currentSortDirection = Me.SortExpression.Split(" "c)(1)
If e.SortExpression.Equals(currentSortColumn) Then
' switch sort direction '
Select Case currentSortDirection.ToUpper
Case "ASC"
Me.SortExpression = currentSortColumn & " DESC"
Case "DESC"
Me.SortExpression = currentSortColumn & " ASC"
End Select
Else
Me.SortExpression = e.SortExpression & " ASC"
End If
BindGrid()

End Sub


I've seen code that uses SortedAscendingHeaderStyle so I tried GridView1.SortedAscendingHeaderStyle.CssClass = "sortasc" in BindGrind() but that's not working for me.


Thanks for any help!

 

[jbenson001]

If I am understanding your correctly you want to style columns(s) not rows.
If this this is the case, then you have to use the RowDataBound event, find the column(s) you want to style, and add the css that way.

        If e.Row.RowType = DataControlRowType.DataRow Then
            e.Row.Cells(cell index).CssClass = "Your Css Class"
        End If

 

[Cineno]

Thanks for the response!

Yes, I want to style the header of a sorted column. My GridView is set up like this in my aspx:

<asp:GridView ID="GridView1" runat="server" AllowSorting="True" AutoGenerateColumns="False"
EmptyDataText="There are no data records to display."
AllowPaging="True"

CssClass="GridViewStyle" GridLines="None" Width="100%"
SortedAscendingCellStyle-BackColor="Yellow"
SortedDescendingCellStyle-BackColor="Yellow"
>

<Columns>

<asp:HyperLinkField DataNavigateUrlFields="EmplID"
DataNavigateUrlFormatString="EmployeeProfile.aspx?EmplID={0}"
DataTextField="EmplID"
DataTextFormatString= "<img src='Images/icons/document-search-result.png' alt='View'/> <u>View</u>" >
<ControlStyle CssClass="titleLinksB" />
<ItemStyle Wrap="False" />
</asp:HyperLinkField>


</Columns>
<RowStyle CssClass="RowStyle" />
<EmptyDataRowStyle CssClass="EmptyRowStyle" />
<PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
<PagerStyle CssClass="PagerStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<EditRowStyle CssClass="EditRowStyle" />
<AlternatingRowStyle CssClass="AltRowStyle" />
<SortedAscendingHeaderStyle CssClass="sortasc"></SortedAscendingHeaderStyle>
<SortedDescendingHeaderStyle CssClass="sortdesc"></SortedDescendingHeaderStyle>

</asp:GridView>

The link column is the only one added on this page, the others come from codebehind. The "SortedAscendingHeaderStyle" and "SortedDescendingHeaderStyle" assignments listed here work perfectly if I'm using an SQLDataSource on the page. But it's not working if the GridView is set up from codebehind. The columns sort properly, and the header class is loaded correctly for all columns, but the class isn't being assigned to the sorted columns.

I'm pretty new to this so I'm still trying to figure out how to implement your tip. If you have any further notes please let me know.

Thanks again for the help.

 

[jbenson001]

When assigning css classes, remember the names are case sensitive. So make sure your class names really are "sortasc" and "sortdesc" and not something like "SortAsc"

 

[Cineno]

Yeah the case is correct. I'm really stumped since the "HeaderStyle" is being applied correctly. It's just the "SortedAscendingHeaderStyle" and "SortedDescendingHeaderStyle" that aren't coming through.

 

[Cineno]

I finally got the RowDataBound to handle it and it's working now. Thanks a lot for the advice, I appreciate it.

 

[jbenson001]

Cool, glad you got it working. Not sure why it didn't work through the markup, but at least it is working.