Display image in gridview header

8 posts, 2 answers
  1. SURESH
    SURESH   avatar
    16 posts
    Member since:
    May 2009

    Posted 09 Nov 2010 Link to this post



    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
  2. Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 09 Nov 2010 Link to this post

    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
  3. UI for WinForms is Visual Studio 2017 Ready
  4. SURESH
    SURESH   avatar
    16 posts
    Member since:
    May 2009

    Posted 09 Nov 2010 Link to this post

    HI

    Thanks for your reply

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



    Thanks
    Suresh.S
  5. Answer
    Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 09 Nov 2010 Link to this post

    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
  6. SURESH
    SURESH   avatar
    16 posts
    Member since:
    May 2009

    Posted 10 Nov 2010 Link to this post

    Thanks again

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



    Regards
    suresh.s
  7. Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 10 Nov 2010 Link to this post

    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
  8. SURESH
    SURESH   avatar
    16 posts
    Member since:
    May 2009

    Posted 10 Nov 2010 Link to this post

    hi


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

    thanks

    suresh
  9. Answer
    Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 10 Nov 2010 Link to this post

    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
Back to Top
UI for WinForms is Visual Studio 2017 Ready