We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How can I add a SparkLine column to a SfDataGrid?

For example, I have a class named "Row":
public class Row
{   
    public string Name { get; set; }
    public ObservableCollection<double> DataPoints { get; set; }
}
I want to display multiple rows in SfDataGrid. Each row should contain a SparkLine to display DataPoints. How can I bind it in XAML?

14 Replies

JG Jai Ganesh S Syncfusion Team June 8, 2016 08:40 AM UTC

Hi Ivan, 
 
You can add the SparkLine inside the GridTemplateColumn in SfDataGrid like below, 
 
<syncfusion:GridTemplateColumn MappingName="EmployeeGrade" Width="150" > 
                    <syncfusion:GridTemplateColumn.CellTemplate> 
                        <DataTemplate> 
                            <Grid> 
                                <syncfusion:SfLineSparkline ItemsSource="{Binding EmployeeGrade}"  MarkerVisibility="Visible" 
                                                               Padding="4" YBindingPath="GradePercentage"> 
 
                                </syncfusion:SfLineSparkline> 
                            </Grid> 
                        </DataTemplate> 
                    </syncfusion:GridTemplateColumn.CellTemplate> 
 </syncfusion:GridTemplateColumn> 
 
 
Screen Shot: 
 
 
Regards, 
Jai Ganesh S 



AA Angad Abrol December 9, 2020 11:27 AM UTC

Hi Ganesh,

I actually am looking for the similar kind of functionality where I will be needing a sparkline column inside sfdatagrid but in my case I need the grid with multiple of such columns that is multiple sparkline columns with number of columns are not fixed and will be added at runtime can you please help me with some kind of sample code. Your help will be greatly appreciated.

Thanks


MA Mohanram Anbukkarasu Syncfusion Team December 10, 2020 02:04 PM UTC

Hi Angad, 

Thanks for the update.  

We suspect that your  requirement is to add GridTemplateColumn with SfLineSparkline template in code behind as you need to add it in runtime.  

Please refer the C# code section in the below given help documentation to add GridTemplateColumn in SfDataGrid as runtime.  

UG reference :  

Please revert to us with details if we have misunderstood your requirement. 

Regards, 
Mohanram A. 



AA Angad Abrol December 11, 2020 04:52 PM UTC

Hi Mohanram,

Thanks for you response but I am able to add columns at run time but not able to bind data to all my columns (sparkline).


the below is my code behind classes where I want to provide grid with Orders so that each spark line template column can show list of Order. 

  public class Orders
        {
            public Orders()
            {
                this.AllOrders = new List<List<Order>>();
            }

            private List<List<Order>> allorders;

            public List<List<Order>> AllOrders
            {
                get { return allorders; }
                set { allorders = value; }
            }
        }

  public List<Order> generateRowData(string key)
        {
            List<Order> MyOrdersRow = new List<Order>();
            var rand = new Random();

            //Creating 19 graph data boxes take it as a CV
            for (Int32 i = 0; i < 19; i++)
            {
                var member = new Order();
                for (int j = 1; j < 45; j++)
                    member.Orders.Add(new OrderData { CvDataPoint = j, MvfvDataPoint = rand.Next(0, 160) });
                MyOrdersRow.Add(member);
            }

            return MyOrdersRow;
        }


public class Order
        {
            public Order()
            {
                this.Orders = new List<OrderData>();
            }

            private List<OrderData> orders;

            /// <summary>
            /// this will be data source for sparkline charts
            /// </summary>
            public List<OrderData> Orders
            {
                get { return orders; }
                set { orders = value; }
            }

        }

        public class OrderData
        {
            private int cvDataPoint;

            public int CvDataPoint
            {
                get { return cvDataPoint; }
                set { cvDataPoint = value; }
            }

            private int mvfvDataPoint;

            public int MvfvDataPoint
            {
                get { return mvfvDataPoint; }
                set { mvfvDataPoint = value; }
            }
        }

The Below is the xaml Part :

<syncfusion:SfDataGrid  Height="Auto" Name="MySFGrid">
            <syncfusion:SfDataGrid.Columns>
                <syncfusion:GridTemplateColumn MappingName="CvDataPoint" Width="250" >
            <syncfusion:GridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid Height="Auto">
                        <syncfusion:SfLineSparkline ItemsSource="{Binding Orders}" Height="Auto"  MarkerVisibility="Visible"
                                                               Padding="4" YBindingPath="CvDataPoint" XBindingPath="MvfvDataPoint">

                        </syncfusion:SfLineSparkline>
                    </Grid>
                </DataTemplate>
            </syncfusion:GridTemplateColumn.CellTemplate>
        </syncfusion:GridTemplateColumn>
            </syncfusion:SfDataGrid.Columns>
        </syncfusion:SfDataGrid>



MA Mohanram Anbukkarasu Syncfusion Team December 14, 2020 02:37 PM UTC

Hi Angad, 

Thanks for the update.  

We have prepared a sample using the provided code snippets and it is available in the following link.  


Please check this sample and please revert to us if you have any concerns in this.  

Regards, 
Mohanram A. 



AA Angad Abrol December 15, 2020 05:13 AM UTC

Hi Mohanram,

Thanks for the reply but the sample application creates only one sparkline column with data my requirement is to have multiple sparkline columns with data so that I have a matrix view. That is why in Orders Class I want to bind each of the sparkline column with each of the list member of AllOrders Collection. Let me share the sample project I created where iam able to generate sparkline columns and create data but not able to bind that data with my view. Also let me share the screen shot of the view I am after.

Attachment: SyncFusionSparkLineGridPOC_3a6cc545.zip


MA Mohanram Anbukkarasu Syncfusion Team December 16, 2020 09:06 AM UTC

Hi Angad, 

Thanks for the update.  

We are able to understand the reported issue. You can resolve this by defining the DataTemplate in xaml and use it in code behind as given in the following code example.  

Code example :  

<Window.Resources> 
     <DataTemplate x:Key="sparkLineTemplate"> 
         <syncfusion:SfLineSparkline ItemsSource="{Binding Orders}" Height="Auto"  MarkerVisibility="Visible"  
                                                            Padding="4" YBindingPath="CvDataPoint" XBindingPath="MvfvDataPoint" /> 
     </DataTemplate> 
</Window.Resources> 
 
 
public void GenerateSFSparkLineColumn() 
{ 
    var templateColumn = new GridTemplateColumn() 
    { 
        MappingName = "CvDataPoint", 
        Width = 250 
    }; 
 
    Grid myGrid = new Grid(); 
    templateColumn.CellTemplate = App.Current.MainWindow.Resources["sparkLineTemplate"] as DataTemplate; 
    MySFGrid.Columns.Add(templateColumn); 
} 


Please let us know if you have any concerns in this.  

Regards, 
Mohanram A. 



AA Angad Abrol December 17, 2020 10:31 AM UTC

Hi MohanRam,

Thanks for the update. Now the issue is that if the no of columns are more the grid hides inside the main window and am not able to add or enable scroll bar both horizontal and vertical. Plus the data binded is not the correct data as we have say 5 collection and we want each collection to bind with each column but in our case only the first collection data is getting binded and displayed on each column. so to check this at your end you can run all the for loops till 5 iteration and check . And Also how can I reset the template column cell height at runtime.

Thanks
Angad


MA Mohanram Anbukkarasu Syncfusion Team December 18, 2020 04:06 PM UTC

Hi Angad,  

Thanks for the update.   
We are currently validating this. We will check and update with further details on December 22, 2020. We appreciate your patience until then.   

Regards,  
Mohanram A. 







MA Mohanram Anbukkarasu Syncfusion Team December 22, 2020 01:00 PM UTC

Hi Angad, 

Thanks for your patience.  

We have checked the reported scenarios in the provided sample. Please find the details below.  

Issue 
Response 
Now the issue is that if the no of columns are more the grid hides inside the main window and am not able to add or enable scroll bar both horizontal and vertical. 

This can be resolved by removing the ColumnDefinitons and RowDefinitons added to the Grid layout which is not needed as you are have only the SfDataGrid  in the window. Please find the modified sample below.  


Plus the data binded is not the correct data as we have say 5 collection and we want each collection to bind with each column but in our case only the first collection data is getting binded and displayed on each column. so to check this at your end you can run all the for loops till 5 iteration and check . And Also how can I reset the template column cell height at runtime. 
We have checked this and we are little unclear with this. As per the list created in the provided sample, you have added same values for the List<Order> for all the items added to the AllOrders collection in the generateRowData method. You have passes a string parameter key with different value for each items in AllOrders. But inside the method the key value not used and same values are populated for all the calls. Then the values will be same for all the items. Please revert to us with more details if we have misunderstood your scenario. 


Regards, 
Mohanram A. 




AA Angad Abrol December 24, 2020 07:58 AM UTC

Hi Mohanram,

I am attaching the new solution for your reference where I have given the comments also for the collection which needs to be binded to each column but only the first collection item of first column is getting binded, whereas each column should be binded with each collection.

Thanks And Regards,

Angad Abrol


Attachment: SyncFusionSparkLineGridPOC_a1fa61bd.zip


VS Vijayarasan Sivanandham Syncfusion Team December 29, 2020 09:44 PM UTC

Hi Angad Abrol,

Thanks for the update.

Currently, we are analyzing your requirement of “each column should be binded with each collection”. We will validate and update you the details on or before December 31, 2020. 
 
We appreciate your patience until then. 
 
Regards, 
Vijayarasan S

 



MA Mohanram Anbukkarasu Syncfusion Team January 4, 2021 03:56 AM UTC

Hi Angad Abrol, 

Sorry for the inconvenience.  

We are still working on this. We will validate and update you the details on January 4, 2021.  
  
We appreciate your patience and understanding. 
  
Regards,  
Mohanram A. 



MA Mohanram Anbukkarasu Syncfusion Team January 4, 2021 12:01 PM UTC

Hi Angad Abrol, 

Sorry for the inconvenience.  

We are still unclear with the comments provided in the sample. The items source collection created in the provided sample contains 5 items. Each item will be created as a row. But we are unable to understand the comment ”5 template columns where we want to bind each column with 5 collection items and each collection item has 9 values which should be bind with each columns” We are unclear with whether your requirement is to have 5 template columns or 9 template columns. The structure of the ItemsSource collection created in this sample is like List<List<Order>>. We are unclear with the need to have a list of another list of Order as ItemsSource. We suspect that the ItemsSource structure may be the cause for the issue you are facing and you have to modify the collection to meet your requirement. Kindly revert to us with details if you have any concerns in this.  

Regards, 
Mohanram A. 


Loader.
Up arrow icon