Charts Inside GridView Cells. Problems During the Scrolling.

[Anton]

 Hi!

I have a Telerik GridView (RadGridView1), and two columns of this GridView contains cells (GridDataCellElement) with charts (RadChartElement())

Durung the scrolling all the cells are distorting. I've read a lot of topics, but I still don't understand how should I fix it. My case is different, than others.

How can I fix it?

 

Private Sub InitalizeGrid()
        AddHandler RadGridView1.CreateCell, AddressOf radGridView1_CreateCell
        Me.RadGridView1.TableElement.RowHeight = 130
        Me.RadGridView1.ReadOnly = True
        Me.RadGridView1.AutoExpandGroups = True
        Me.RadGridView1.AllowAddNewRow = False
        Me.RadGridView1.AllowColumnReorder = True
        Me.RadGridView1.EnableSorting = True
        Me.RadGridView1.ShowGroupPanel = False
        Me.RadGridView1.ShowRowHeaderColumn = True
        Me.RadGridView1.ForeColor = Color.Black
        Me.RadGridView1.AllowSearchRow = True
        Me.RadGridView1.AutoGenerateColumns = False
        Me.RadGridView1.VirtualMode = False
        Me.RadGridView1.MasterTemplate.VirtualMode = False

        RadGridView1.MasterTemplate.Columns.Add(newTextBoxColumn("ID", 100, "ID"))
        RadGridView1.MasterTemplate.Columns.Add(newTextBoxColumn("Name", 220, "Name"))
        RadGridView1.MasterTemplate.Columns.Add(newTextBoxColumn("Chart 1", 220, "Chart 1))
        RadGridView1.MasterTemplate.Columns.Add(newTextBoxColumn("Chart 2", 220, "Chart 2"))

        'SQL
        Dim sqlDt As SqlDataTable
        Try
----------------------------------------------
            Dim sqlDa As New SqlDataAdapter()
            sqlDa.SelectCommand = SqlCmd
            sqlDa.Fill(sqlDt)
----------------------------------------------

            Me.RadGridView1.MasterTemplate.BeginUpdate()
            RadGridView1.DataSource = sqlDt
            Me.RadGridView1.MasterTemplate.EndUpdate()

            gvSourceAnalysis.DataSource = sqlDt
            sqlDa.Dispose()
        Catch ex As Exception
            Throw ex
        End Try
    End Sub

   Private Function newTextBoxColumn(ByVal columnName As String, ByVal columnWidth As Integer, ByVal fieldName As String) As GridViewTextBoxColumn
        Dim textBoxColumn As New GridViewTextBoxColumn()
        textBoxColumn.Name = columnName
        textBoxColumn.HeaderText = columnName
        textBoxColumn.FieldName = fieldName
        textBoxColumn.Width = columnWidth
        textBoxColumn.TextAlignment = ContentAlignment.BottomRight
        textBoxColumn.ReadOnly = True
        Return textBoxColumn
    End Function

    Private Sub radGridView1_CreateCell(ByVal sender As Object, ByVal e As GridViewCreateCellEventArgs)
        If e.CellType Is GetType(GridDataCellElement) AndAlso (e.Column.Name = "Chart 1" OrElse
                                                               e.Column.Name = "Chart 2" OrElse) Then
            Dim chart As New RadChartElement()
            Dim lineSeries As New LineSeries()
            chart.View.Margin = New Padding(3)
            chart.GradientStyle = Telerik.WinControls.GradientStyles.Solid
            chart.AutoToolTip = True
            chart.View.ShowTrackBall = True

            lineSeries = New LineSeries()
            lineSeries.BorderColor = Color.FromArgb(68, 68, 68)
            'lineSeries.PointSize = New SizeF()
            If sqlDt.Rows.Count > 0 Then
                If e.Column.Name = "Chart 1" Then
                    lineSeries.DataPoints.Add(New CategoricalDataPoint(CDbl(Val(sqlDt.Rows(e.Row.Data.Index).Item("ColumnFromSql1"))), "1"))
                    lineSeries.DataPoints.Add(New CategoricalDataPoint(CDbl(Val(sqlDt.Rows(e.Row.Data.Index).Item("ColumnFromSql2"))), "2"))
                    lineSeries.DataPoints.Add(New CategoricalDataPoint(CDbl(Val(sqlDt.Rows(e.Row.Data.Index).Item("ColumnFromSql3"))), "3"))
                    lineSeries.DataPoints.Add(New CategoricalDataPoint(CDbl(Val(sqlDt.Rows(e.Row.Data.Index).Item("ColumnFromSql4"))), "4"))
                    lineSeries.DataPoints.Add(New CategoricalDataPoint(CDbl(Val(sqlDt.Rows(e.Row.Data.Index).Item("ColumnFromSql5"))), "5"))
                    lineSeries.DataPoints.Add(New CategoricalDataPoint(CDbl(Val(sqlDt.Rows(e.Row.Data.Index).Item("ColumnFromSql6"))), "6"))
                ElseIf e.Column.Name = "Chart 2" Then
                    lineSeries.DataPoints.Add(New CategoricalDataPoint(CDbl(Val(sqlDt.Rows(e.Row.Data.Index).Item("ColumnFromSql7"))), "7"))
                    lineSeries.DataPoints.Add(New CategoricalDataPoint(CDbl(Val(sqlDt.Rows(e.Row.Data.Index).Item("ColumnFromSql8"))), "8"))
                    lineSeries.DataPoints.Add(New CategoricalDataPoint(CDbl(Val(sqlDt.Rows(e.Row.Data.Index).Item("ColumnFromSql9"))), "9"))
                    lineSeries.DataPoints.Add(New CategoricalDataPoint(CDbl(Val(sqlDt.Rows(e.Row.Data.Index).Item("ColumnFromSql10"))), "10"))
                    lineSeries.DataPoints.Add(New CategoricalDataPoint(CDbl(Val(sqlDt.Rows(e.Row.Data.Index).Item("ColumnFromSql11"))), "11"))
                    lineSeries.DataPoints.Add(New CategoricalDataPoint(CDbl(Val(sqlDt.Rows(e.Row.Data.Index).Item("ColumnFromSql12"))), "12"))
                End If
            End If
            chart.View.Series.Add(lineSeries)
            Dim gridDataCell As New GridDataCellElement(e.Column, e.Row)
            gridDataCell.Padding = New Padding(0)
            gridDataCell.Children.Add(chart)
            e.CellElement = gridDataCell
            e.CellType = GetType(GridDataCellElement)
        End If
    End Sub

[Dimitar]

Hello Anton,

Thank you for writing.

The correct way for this would be to create a custom column. An example is available here: Creating custom cells. In addition, I have attached a small sample project that shows how you can create a custom cell with a chart element.

I hope this helps.

Regards,
Dimitar
Telerik