Charts Inside GridView Cells. Problems During the Scrolling.

2 posts, 0 answers
  1. Anton
    Anton avatar
    1 posts
    Member since:
    Dec 2012

    Posted 19 Jan Link to this post

     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

  2. Dimitar
    Admin
    Dimitar avatar
    1413 posts

    Posted 20 Jan Link to this post

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