Adding an icon to datagrid header cell at runtime

[iaswnidou]

Hello

I have a sortable datagrid and i want to add an icon indicating whether the result set is after the user has sorted in ascending or descending order.
After i click on the sortable column i want the icon to appear in the header cell next to the text.
I thought of saving the sorting direction in viewstate and then use the itemdatabound event of the grid to add this icon.
However, this event will be fired whenever i do something with the grid, not only when i sort it.
Have you got any ideas?

Thank you

 

[ca8msm]

Try changing the HeaderImageUrl property


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[bassguy]

Add the image tag to your header cell but leave the src empty.

then when you perform the sort, find the image in the image control and change the src = your up or down gif.

hth

bassguy

 

[iaswnidou]

ca8msm: I used the HeaderImageUrl property, but then I lost the text as i had set the HeaderText property earlier. I need after sorting to see the text as a hyperlink and the icon right next to it.

bassguy: Currently i have all my images in a folder, not using an image control. This is my sort event handler:

 Private Sub dgProperties_SortCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridSortCommandEventArgs) Handles dgProperties.SortCommand
        ViewState.Add("justSorted", 1)
        If ViewState("currentSortColumn") Is Nothing Then
            ViewState.Add("currentSortColumn", e.SortExpression)
            ViewState.Add("currentSortDirection", " asc")
            objQuery.SetGridData(Me.dgProperties, objQuery.GetDataTable(CreateGridSQL() & " order by " & e.SortExpression & " asc"))
        ElseIf ViewState("currentSortColumn") <> e.SortExpression Then
            ViewState("currentSortColumn") = e.SortExpression
            ViewState("currentSortDirection") = " asc"
            objQuery.SetGridData(Me.dgProperties, objQuery.GetDataTable(CreateGridSQL() & " order by " & e.SortExpression & " asc"))
        Else
            If ViewState("currentSortColumn") = e.SortExpression And ViewState("currentSortDirection") = " asc" Then
                ViewState("currentSortDirection") = " desc"
            Else
                ViewState("currentSortDirection") = " asc"
            End If
            objQuery.SetGridData(Me.dgProperties, objQuery.GetDataTable(CreateGridSQL() & " order by " & e.SortExpression & ViewState("currentSortDirection")))
        End If
    End Sub

Then i use the databound event to change the text in the cell:

 Private Sub DataGridItemDataBoundHandler(ByVal sender As System.Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs)

If Not ViewState("justSorted") Is Nothing Then
         If e.Item.ItemType = ListItemType.Header Then
                e.Item.Cells(0).Text = "Type <img src='images\AscendingTriangle.gif'>"
                'dg.Columns(0).HeaderImageUrl = "images\DescendingTriangle.gif"
            End If
        End If
    End Sub

After the postback i cannot see the image. It is there but it appears as a red X. And of-course "Type" appears as text, not a link, in the way i wrote it.
If you don't like anything in the code please comment.

 

[ca8msm]

How about just using the HeaderText property then and specifying the image as part of the text e.g

HeaderText = "Your Original Text<img src='ascending.gif'/>"

You can then just change the name of the gif on each sort.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[iaswnidou]

Thanks a lot...problem solved.