This is a migrated thread and some comments may be shown as answers.
Charts Inside GridView Cells. Problems During the Scrolling.
1 Answer 19 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Anton asked on 19 Jan 2016, 10:46 PM


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"))

        Dim sqlDt As SqlDataTable
            Dim sqlDa As New SqlDataAdapter()
            sqlDa.SelectCommand = SqlCmd

            RadGridView1.DataSource = sqlDt

            gvSourceAnalysis.DataSource = sqlDt
        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
            Dim gridDataCell As New GridDataCellElement(e.Column, e.Row)
            gridDataCell.Padding = New Padding(0)
            e.CellElement = gridDataCell
            e.CellType = GetType(GridDataCellElement)
        End If
    End Sub

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 20 Jan 2016, 11:19 AM
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.

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question