DataGrid Columns Binding

[Ignacio]

 

I currently have a GRID with data with four columns (Hour, "Yesterday's Price", "Current Price", "Tomorrow's Price")
but they ask me that the price columns can be 1 day or more days.
How can I BINDING the columns?

 

(VIew FILE)

<telerikDataGrid:RadDataGrid x:Name="DataGrid"
                                             AutoGenerateColumns="False" 
                                             ItemsSource="{Binding EnergyPriceValues}"    >
                    <telerikDataGrid:RadDataGrid.Columns>
                        <telerikDataGrid:DataGridTextColumn  CanUserGroup ="False"   CanUserFilter="False" CanUserEdit="False"  PropertyName="Date"            HeaderText="{Binding TitleColDate}"  />
                        <telerikDataGrid:DataGridTextColumn  CanUserGroup ="False"  CanUserFilter="False" CanUserEdit="False" PropertyName="YesterdayValue"       HeaderText="{Binding TitleColYesterday}"  />
                        <telerikDataGrid:DataGridTextColumn  CanUserGroup ="False"  CanUserFilter="False" CanUserEdit="False" PropertyName="TodayValue"           HeaderText="{Binding TitleColToday}"  >
                            <telerikDataGrid:DataGridTextColumn.CellDecorationStyle>
                                <telerikDataGrid:DataGridBorderStyle BackgroundColor="Aqua"  />
                            </telerikDataGrid:DataGridTextColumn.CellDecorationStyle>
                        </telerikDataGrid:DataGridTextColumn>
                        <telerikDataGrid:DataGridTextColumn CanUserGroup  ="False"  CanUserFilter="False" CanUserEdit="False" PropertyName="TomorrowValue"        HeaderText="{Binding TitleColTomorrow}"  />
                    </telerikDataGrid:RadDataGrid.Columns>
                  
                </telerikDataGrid:RadDataGrid>

-------------------------------------

(In ViewModel, fill the object "EnergyPriceValues")

           EnergyPriceValues.Add(new GridEnergyPrices()
                {
                    Date = DateValue.Hour.ToString () ,
                    YesterdayValue = Math.Round(_energyYesterday[i].value, 2).ToString(),
                    TodayValue = Math.Round(_energyPriceToday[i].value, 2).ToString(),
                    TomorrowValue = Math.Round(_energyTomorrow[i].value, 2).ToString()
                });

-----------------------------------------

Thank you in advance :-)

 

[Ignacio]

 :-(

Sorry, wrong forum, I wanted to put it in "DataGrid"

[Lance | Manager Technical Support]

Hello Ignacio,

I have changed the thread to the correct Forum for you.

Onto your question. I'm not sure what you're asking for. The DataGrid will show one column for each property you want it to show. Before I directly answer your question, let me briefly cover the basic functionality.

Column Property Binding

In general, the column is bound to whatever property your data model has, it will not aggregate or coolate data for you in additional columns. From what I can see, the model is this:

public class GridEnergyPrices
{
   public DateTime Date {get;set;}
   public string YesterdayValue {get;set;}
   public string TodayValue {get;set;}
   public string TomorrowValue {get;set;}
}

The DataGrid column's PropertyName needs to match the property name in the model, and it appears you are correctly doing this:

<telerikDataGrid:RadDataGrid x:Name="DataGrid" AutoGenerateColumns="False" ItemsSource="{Binding EnergyPriceValues}" >
    <telerikDataGrid:RadDataGrid.Columns>
        <telerikDataGrid:DataGridTextColumn PropertyName="Date" />
        <telerikDataGrid:DataGridTextColumn PropertyName="YesterdayValue" />
        <telerikDataGrid:DataGridTextColumn PropertyName="TodayValue"  />
        <telerikDataGrid:DataGridTextColumn PropertyName="TomorrowValue" />
    </telerikDataGrid:RadDataGrid.Columns>
</telerikDataGrid:RadDataGrid>

If you are not seeing any rows added, then the collection is likely not an ObservableCollection or the BindingContext is incorrect. Here's the best option for the ItemsSource:

public class MyViewModel
{
    public ObservableCollection<GridEnergyPrices> EnergyPriceValues {get} = new ObservableCollection<GridEnergyPrices>();

    public void LoadData()
    {
        EnergyPriceValues.Add(...);
    }
}

Please take a moment to visit the DataGrid Columns documentation and explore the column types available, as well as those column's unique features.

Agreggrating Data

If you need multiple days to be shown in another column, then you will need to aggregate the data and set that value to a new property.

public class GridEnergyPrices
{
    public DateTime Date {get;set;}
    public string YesterdayValue {get;set;}
    public string TodayValue {get;set;}
    public string TomorrowValue {get;set;}

    public double ThreeDayPrice {get;set;}
}

Then when you read the data from your data source, you can add up all three values and set the ThreeDayPrice.

var totalPrice = _energyYesterday[i].value + _energyPriceToday[i].value + _energyTomorrow[i].value;

EnergyPriceValues.Add(new GridEnergyPrices()
{
    Date = DateValue.Hour.ToString () ,
    YesterdayValue = Math.Round(_energyYesterday[i].value, 2).ToString(),
    TodayValue = Math.Round(_energyPriceToday[i].value, 2).ToString(),
    TomorrowValue = Math.Round(_energyTomorrow[i].value, 2).ToString(),
    ThreeDayPrice = totalPrice
});

Finally, add a new column for that numeric value (you really should be using a double and numeric columns for the other values too).

<telerikDataGrid:RadDataGrid x:Name="DataGrid" AutoGenerateColumns="False" ItemsSource="{Binding EnergyPriceValues}" >
    <telerikDataGrid:RadDataGrid.Columns>
        <telerikDataGrid:DataGridTextColumn PropertyName="Date" />
        <telerikDataGrid:DataGridTextColumn PropertyName="YesterdayValue" />
        <telerikDataGrid:DataGridTextColumn PropertyName="TodayValue"  />
        <telerikDataGrid:DataGridTextColumn PropertyName="TomorrowValue" />

        <telerikDataGrid:DataGridNumericalColumn PropertyName="ThreeDayPrice" CellContentFormat="{}{0:C2}" />
    </telerikDataGrid:RadDataGrid.Columns>
</telerikDataGrid:RadDataGrid>

There is another way to use a TemplateColumn and an IValueConverter to do that math for custom UI content, but that's outside the scope of this topic.

Further Assistance

If you have any further issues with t his scenario, due to the custom nature of this scenario not being directly related to a DataGrid feature, please open a support ticket here and attach the rest of the code so that we can investigate further.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

[Ignacio]

Thanks Lance :-)   and forgive me for my low level of English :-( 

The question in brief is :

What if instead of three columns I have "n" columns?
(The number of columns is not known)
The only known column is the Price
Price | column 1 | column 2 | column 3|....|column n
How is the XML file ¿?

<telerikDataGrid:RadDataGrid x:Name="DataGrid" AutoGenerateColumns="False" ItemsSource="{Binding EnergyPriceValues}" >
    <telerikDataGrid:RadDataGrid.Columns>
        <telerikDataGrid:DataGridTextColumn PropertyName="Date" />
    <….???/>
    </telerikDataGrid:RadDataGrid.Columns>
</telerikDataGrid:RadDataGrid>

[Lance | Manager Technical Support]

Hi Ignacio,

In that case, you're going to need to use one of two options:


Option 1

If you want to use XAML, you'll need to let the DataGrid create the columns for you by setting AutoGenerateColumns="True"

<telerikDataGrid:RadDataGrid x:Name="DataGrid" AutoGenerateColumns="True" .../>

We will internally determine th ebets column type and wire up all the functionality for you.


Option 2

Manually create the columns youself in C# after using custom logic to read the properties of your data using .NET reflection.

Note that option 2 will require a lot of custom work by you using .NET's reflection feature to determine what the data type is, what the property name is, etc.

Telerik doesn't have any documentation to help you with general .NET programming, but you'll find a lot of resources on line on how to do this. For example, to get you started, here's the serarch result for "How do I loop through all the properties of a class?".

Once you get those properties, then you can decide which DataGridColumn type to use.

As an example, let's assume the model class is City:

public class City
{
    public string Name { get; set; }
    public int Population { get; set; }
}

You need to know when to use a DataGridTextColumn or a DataGridNumericalColumn, using reflexction, find the properr type to use and set up the column

Type type = typeof(City);

PropertyInfo[] properties = type.GetProperties();

foreach (PropertyInfo property in properties)
{
    DataGridTypedColumn columnToAdd = null;

    // If the property is a string, use a TextColumn
    if (property.PropertyType == typeof(string))
    {
        columnToAdd = new DataGridTextColumn();
    }

    // If the property is an int, use a TextColumn
    if (property.PropertyType == typeof(int))
    {
        columnToAdd = new DataGridNumericalColumn();
    }

    // If the property is a DateTime, use a DateColumn
    if (property.PropertyType == typeof(DateTime))
    {
        columnToAdd = new DataGridDateColumn();
    }

    // Add conditions for the other column types

    if (columnToAdd != null)
    {
        // Finish the rest of the column properties you need to set
        columnToAdd.PropertyName = property.Name;

        DataGrid.Columns.Add(columnToAdd);
    }
}

Due to the custom natiure of this setup, open a Support Ticket to request help from the development team if you have any further issues with the DataGrid setup. Be sure to include all the code you're using so that they can directly investigate (you can attach a ZIP to a Support Ticket).

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik