How to put RadChartView inside RadGridView

4 posts, 0 answers
  1. Pedram
    Pedram avatar
    2 posts
    Member since:
    Feb 2015

    Posted 10 Feb 2015 Link to this post

    I have a radChartView and also a radGridView. I want to put Chart View on new row of Grid View. How can I perform this ?
    here is my Chart View sample data code :
    var series = new LineSeries {LegendTitle = "تعداد امانت بر اساس ماه", BorderWidth = 2};
            series.DataPoints.Add(new CategoricalDataPoint(10, "Jan"));
            series.DataPoints.Add(new CategoricalDataPoint(30, "Feb"));
            series.DataPoints.Add(new CategoricalDataPoint(22, "Mar"));
            series.DataPoints.Add(new CategoricalDataPoint(15, "Apr"));
            series.DataPoints.Add(new CategoricalDataPoint(40, "May"));
            series.DataPoints.Add(new CategoricalDataPoint(80, "Jun"));
            series.DataPoints.Add(new CategoricalDataPoint(10, "Jul"));
            series.DataPoints.Add(new CategoricalDataPoint(30, "Aug"));
            series.DataPoints.Add(new CategoricalDataPoint(22, "Sep"));
            series.DataPoints.Add(new CategoricalDataPoint(15, "Oct"));
            series.DataPoints.Add(new CategoricalDataPoint(40, "Nov"));
            series.DataPoints.Add(new CategoricalDataPoint(80, "Dec"));
            this.radChartView1.ShowSmartLabels = true;
            radChartView1.ShowLegend = true;
            this.radChartView1.Series.Add(series);

    I try this code but a row was added without any value :
    this.radGridView1.Rows.Add("Sample", radChartView1);
  2. Dess
    Admin
    Dess avatar
    1605 posts

    Posted 12 Feb 2015 Link to this post

    Hello Pedram,

    Thank you for writing.

    In order to achieve your goal, you can use a custom GridRowElement. Here is a sample code snippet which result is illustrated on the attached screenshot. It is important to subscribe to the CreateRowInfo event at design time:
    public Form1()
    {
        InitializeComponent();
     
        this.radGridView1.TableElement.ViewInfo.TableAddNewRow.Height = 200;
        this.radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
        this.radGridView1.DataSource = this.categoriesBindingSource;
    }
     
    private void radGridView1_CreateRowInfo(object sender, GridViewCreateRowInfoEventArgs e)
    {
        if (e.RowInfo is GridViewNewRowInfo)
        {
            e.RowInfo = new CustomGridViewRowInfo(e.ViewInfo);
        }
    }
     
    public class CustomGridRowElement : GridRowElement
    {
        private GridCellElement cellElement;
        private RadChartElement radChartElement;
         
        public CustomGridRowElement()
        {
        }
     
        protected override void CreateChildElements()
        {
            base.CreateChildElements();
            this.cellElement = new GridCellElement(null, this);
            this.cellElement.StretchHorizontally = true;
            this.cellElement.StretchVertically = true;
            this.Children.Add(cellElement);
     
            this.radChartElement = new RadChartElement();
            this.radChartElement.View.Series.Clear();
            LineSeries series = new LineSeries();
            series.DataPoints.Add(new CategoricalDataPoint(10, "Jan"));
            series.DataPoints.Add(new CategoricalDataPoint(30, "Feb"));
            series.DataPoints.Add(new CategoricalDataPoint(22, "Mar"));
            series.DataPoints.Add(new CategoricalDataPoint(15, "Apr"));
            series.DataPoints.Add(new CategoricalDataPoint(40, "May"));
            series.DataPoints.Add(new CategoricalDataPoint(80, "Jun"));
            series.DataPoints.Add(new CategoricalDataPoint(10, "Jul"));
            series.DataPoints.Add(new CategoricalDataPoint(30, "Aug"));
            series.DataPoints.Add(new CategoricalDataPoint(22, "Sep"));
            series.DataPoints.Add(new CategoricalDataPoint(15, "Oct"));
            series.DataPoints.Add(new CategoricalDataPoint(40, "Nov"));
            series.DataPoints.Add(new CategoricalDataPoint(80, "Dec"));
            this.radChartElement.View.ShowSmartLabels = true;
            this.radChartElement.ShowLegend = true;
            this.radChartElement.View.Series.Add(series);
     
            this.cellElement.Children.Add(this.radChartElement);
            this.cellElement.ClipDrawing = true;
        }
     
        public override bool IsCompatible(GridViewRowInfo data, object context)
        {
            return data is CustomGridViewRowInfo;
        }
    }
     
    public class CustomGridViewRowInfo : GridViewNewRowInfo
    {
        public CustomGridViewRowInfo(GridViewInfo viewInfo) : base(viewInfo)
        {
        }
     
        public override Type RowElementType
        {
            get
            {
                return typeof(CustomGridRowElement);
            }
        }
    }
         
    private void Form1_Load(object sender, EventArgs e)
    {
        this.categoriesTableAdapter.Fill(this.nwindDataSet.Categories);
    }

    I hope this information helps. Should you have further questions, I would be glad to help.

    Regards,
    Dess
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Pedram
    Pedram avatar
    2 posts
    Member since:
    Feb 2015

    Posted 24 Feb 2015 in reply to Dess Link to this post

    Hi Dess, Thank you for your answer.
    However It looks true but I can't use this. I mean I don't know how can I use this code. Can you please explain more about how it work ?

    Thanks a lot , Pedram
  5. Dess
    Admin
    Dess avatar
    1605 posts

    Posted 27 Feb 2015 Link to this post

    Hello Pedram,

    Thank you for writing back.

    It is necessary to subscribe to the RadGridView.CreateRowInfo event at design time and replace the default GridViewNewRowInfo with a custom one. This custom GridViewNewRowInfo should use a custom GridRowElement with a RadChartElement added as a child. I have attached my sample project for your convenience.

    I hope this information helps. If you have any additional questions, please let me know.

    Regards,
    Dess
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top