Display image in gridview header

[SURESH]

Hi

I am using radgrid in visual studio 2008 .i want to display image in grid header on left side when i click that imagebutton popup should show


so can anyone help how to display image in gridview header

regards
suresh.s

[Emanuel Varga]

Hello,

If you just want to display an image in the column header you can just do the following:

radGridView1.Columns[0].HeaderImage = Properties.Resources.Image;
radGridView1.Columns[0].HeaderTextAlignment = System.Drawing.ContentAlignment.MiddleCenter;
radGridView1.Columns[0].ImageLayout = ImageLayout.Zoom;
radGridView1.Columns[0].TextImageRelation = TextImageRelation.ImageBeforeText;

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga

[SURESH]

HI

Thanks for your reply

can u tell how to display image on first row only.



Thanks
Suresh.S

[Emanuel Varga]

Hello again,

Do you want to display the image in the header cell or in the first row?
To display it in the header you can use the code I've posted earlier, for the cells you have to handle the CellFormatting event and add it to the cell there

Best Regards,
Emanuel Varga

[SURESH]

Thanks again

its working .i want to display pop up when i am clicking header image only not in row click .



Regards
suresh.s

[Emanuel Varga]

Hello again,

Let me rephrase, if you want to set the image for the First Row cells, then you should use the CellFormatting event and check if RowIndex = 0, and set the image for the Cell, like so:

Private Sub RadGridView1_CellFormatting(ByVal sender As System.Object, ByVal e As Telerik.WinControls.UI.CellFormattingEventArgs) Handles RadGridView1.CellFormatting
    If (e.CellElement.RowIndex = 0) Then
        e.CellElement.Image = HeaderCustomImage
        e.CellElement.ImageAlignment = ContentAlignment.MiddleLeft
        e.CellElement.ImageLayout = ImageLayout.Zoom
        e.CellElement.TextImageRelation = TextImageRelation.ImageBeforeText
    End If

If you just want to set the Image for the Column header, you can register to the DataBindingComplete event, like this:

Private Sub RadGridView1_DataBindingComplete(ByVal sender As System.Object, ByVal e As Telerik.WinControls.UI.GridViewBindingCompleteEventArgs) Handles RadGridView1.DataBindingComplete
    RadGridView1.Columns(0).HeaderImage = HeaderCustomImage
    RadGridView1.Columns(0).ImageLayout = ImageLayout.Zoom
    RadGridView1.Columns(0).TextImageRelation = TextImageRelation.ImageBeforeText
End Sub

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga

[SURESH]

hi


i want to display popup when i click that image button from header only .....

thanks

suresh

[Emanuel Varga]

Hello,

For an image button inside the grid header you will need a custom header element, like so:

Imports System
Imports System.Collections.Generic
Imports System.Text
Imports Telerik.WinControls.UI
Imports Telerik.WinControls
Imports System.Drawing
Imports Telerik.WinControls.Enumerations
Imports Telerik.WinControls.Primitives

Public Class ImageHeaderCell
    Inherits GridHeaderCellElement

    Private m_ImageButton As RadButtonElement
    Public Property ImageButton() As RadButtonElement
        Get
            Return m_ImageButton
        End Get
        Set(ByVal value As RadButtonElement)
            m_ImageButton = value
        End Set
    End Property


    Private m_LabelPrimitive As TextPrimitive
    Public Property LabelPrimitive() As TextPrimitive
        Get
            Return m_LabelPrimitive
        End Get
        Set(ByVal value As TextPrimitive)
            m_LabelPrimitive = value
        End Set
    End Property

    Protected Overrides ReadOnly Property ThemeEffectiveType() As Type
        Get
            Return GetType(GridHeaderCellElement)
        End Get
    End Property

    Public Sub New(ByVal column As GridViewColumn, ByVal row As GridRowElement)
        MyBase.New(column, row)
        column.AllowSort = False
        m_LabelPrimitive.Text = column.HeaderText
        column.HeaderText = String.Empty
        ' Add image to imagebutton here
        'm_ImageButton.Image =
    End Sub

    Public Overrides Sub Initialize(ByVal column As GridViewColumn, ByVal row As GridRowElement)
        MyBase.Initialize(column, row)
    End Sub

    Protected Overrides Sub DisposeManagedResources()
        RemoveHandler m_ImageButton.Click, AddressOf imageButton_Click
        MyBase.DisposeManagedResources()
    End Sub

    Protected Overloads Overrides Sub CreateChildElements()
        MyBase.CreateChildElements()

        m_ImageButton = New RadButtonElement()
        m_ImageButton.MinSize = New Size(20, 20)
        AddHandler m_ImageButton.Click, AddressOf imageButton_Click
        m_LabelPrimitive = New TextPrimitive

        Me.Children.Add(m_LabelPrimitive)
        Me.Children.Add(m_ImageButton)
    End Sub

    Protected Overloads Overrides Function ArrangeOverride(ByVal finalSize As SizeF) As SizeF
        Dim size As SizeF = MyBase.ArrangeOverride(finalSize)

        Dim rect As RectangleF = GetClientRectangle(finalSize)
        Me.m_ImageButton.Arrange(New RectangleF(2, finalSize.Height / 2 - m_ImageButton.DesiredSize.Height / 2, m_ImageButton.DesiredSize.Width, m_ImageButton.DesiredSize.Height))
        Me.m_LabelPrimitive.Arrange(New RectangleF(m_ImageButton.DesiredSize.Width + 4, finalSize.Height / 2 - m_LabelPrimitive.DesiredSize.Height / 2, finalSize.Width, m_LabelPrimitive.DesiredSize.Height))

        Return size
    End Function

    Public Overloads Overrides Function IsCompatible(ByVal data As Telerik.WinControls.UI.GridViewColumn, ByVal context As Object) As Boolean
        Return data.Name = "Select" AndAlso TypeOf context Is GridTableHeaderRowElement AndAlso MyBase.IsCompatible(data, context)
    End Function

    Private Sub imageButton_Click(ByVal sender As Object, ByVal e As EventArgs)
        MessageBox.Show("ImageButton Clicked")
    End Sub
End Class

And the code for the column:

Public Class CustomCheckBoxColumn
    Inherits GridViewCheckBoxColumn
    Public Overrides Function GetCellType(ByVal row As GridViewRowInfo) As Type
        If TypeOf row Is GridViewTableHeaderRowInfo Then
            Return GetType(ImageHeaderCell)
        End If
        Return MyBase.GetCellType(row)
    End Function
End Class

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga