public class RowI want to display multiple rows in SfDataGrid. Each row should contain a SparkLine to display DataPoints. How can I bind it in XAML?
{
public string Name { get; set; }
public ObservableCollection<double> DataPoints { get; set; }
}
<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> |
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>
<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);
} |
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.
Sample link : https://www.syncfusion.com/downloads/support/forum/124397/ze/SyncFusionSparkLineGridPOC_Modified-2101753377
|
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. |
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