DataGrid Columns Binding

5 posts, 0 answers
  1. Ignacio
    Ignacio avatar
    7 posts
    Member since:
    Aug 2018

    Posted 17 Apr 2019 Link to this post

     

    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 :-)

     

  2. Ignacio
    Ignacio avatar
    7 posts
    Member since:
    Aug 2018

    Posted 17 Apr 2019 in reply to Ignacio Link to this post

     :-(

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


  3. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 17 Apr 2019 Link to this post

    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
    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
  4. Ignacio
    Ignacio avatar
    7 posts
    Member since:
    Aug 2018

    Posted 23 Apr 2019 in reply to Lance | Manager Technical Support Link to this post

    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>

  5. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 23 Apr 2019 Link to this post

    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
    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
Back to Top