Filtering and fully seeing cell value

Hi,

In the table generated by the codes below, I'd like to apply filtering across all columns and also be able to see cell values, e.g. I cannot see value in the Comment column which have many characters.

Furthermore: the DateTime column only shows date; and when there is a null value for say 'Unit', the table doesn't get rendered.

EconomicCalendar.cs:

namespace SyncfusionWpfDataGridTest
{
    public class EconomicCalendar
    {
        public string? Title { get; set; }
        public string? Country { get; set; }
        public string? Period { get; set; }
        public DateTime DateTime { get; set; }
        public string? Indicator { get; set; }
        public int Importance { get; set; }
        public string? Actual { get; set; }
        public string? Previous { get; set; }
        public string? Forecast { get; set; }
        public string? RawActual { get; set; }
        public string? RawPrevious { get; set; }
        public string? RawForecast { get; set; }
        public string? Ticker { get; set; }
        public string? Category { get; set; }
        public string? Currency { get; set; }
        public string? Unit { get; set; }
        public string? Source { get; set; }
        public string? SourceUrl { get; set; }
        public string? Comment { get; set; }
    }
}
ViewModel.cs:
using System.Collections.ObjectModel;
using Npgsql;


namespace SyncfusionWpfDataGridTest
{
    public class ViewModel
    {
        public ObservableCollection<EconomicCalendar> EconomicCalendars { get; set; }
        public ViewModel()
        {
            EconomicCalendars = new ObservableCollection<EconomicCalendar>();
            LoadData();
        }
        private void LoadData()
        {
            NpgsqlConnection conn = new NpgsqlConnection("Host=192.168.1.2; Port=5432; Database=tradingapp; Username=vorlket; Password=Vcsokr.");
            conn.Open();
            string query = "SELECT Title, Country, Period, DateTime, Indicator, Importance, Actual, Previous, Forecast, \"Raw Actual\", \"Raw Previous\", \"Raw Forecast\", " +
                "Ticker, Category, Currency, Unit, Source, \"Source URL\", Comment FROM EconomicCalendar WHERE Country = 'United Arab Emirates' AND (DateTime >= '2015-01-01' AND " +
                "DateTime < '2016-01-01')";
            NpgsqlCommand cmd = new NpgsqlCommand(query, conn);
            NpgsqlDataReader reader = cmd.ExecuteReader();
            while (reader.Read())
            {
                EconomicCalendars.Add(new EconomicCalendar
                {
                    Title = reader.GetString(0),
                    Country = reader.GetString(1),
                    Period = reader.GetString(2),
                    DateTime = reader.GetDateTime(3),
                    Indicator = reader.GetString(4),
                    Importance = reader.GetInt32(5),
                    Actual = reader.GetString(6),
                    Previous = reader.GetString(7),
                    Forecast = reader.GetString(8),
                    RawActual = reader.GetString(9),
                    RawPrevious = reader.GetString(10),
                    RawForecast = reader.GetString(11),
                    Ticker = reader.GetString(12),
                    Category = reader.GetString(13),
                    Currency = reader.GetString(14),
                    Unit = reader.GetString(15),
                    Source = reader.GetString(16),
                    SourceUrl = reader.GetString(17),
                    Comment = reader.GetString(18)
                });
            }
        }
    }
}

MainWindows.xaml:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SyncfusionWpfDataGridTest"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Class="SyncfusionWpfDataGridTest.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <Grid x:Name="Root_Grid">
        <syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding EconomicCalendars}">
            <syncfusion:SfDataGrid.SortColumnDescriptions>
                <syncfusion:SortColumnDescription ColumnName="DateTime"/>
            </syncfusion:SfDataGrid.SortColumnDescriptions>
        </syncfusion:SfDataGrid>
    </Grid>
</Window>

Mainwindow.xaml.cs:

using System.Windows;
namespace SyncfusionWpfDataGridTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

3 Replies 1 reply marked as answer

SG Santhosh Govindasamy Syncfusion Team June 20, 2024 12:04 PM UTC

Hi Kook Jin Noh,

Query

Response

1. I'd like to apply filtering across all columns.

It can be achieved by enabling the AllowFiltering option to be true. For your reference, I have attached the UG link for handling filtering support.
UG Link-> https://help.syncfusion.com/wpf/datagrid/filtering#programmatic-filtering

<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding Orders}"

                        Grid.Column="0"  AutoGenerateColumns="True" AllowFiltering="True">

     <syncfusion:SfDataGrid.Columns>

         <syncfusion:GridDateTimeColumn   Pattern="FullDateTime"

                                 HeaderText="DateTime"

                                 MappingName="DateTime"

                                  />

         <syncfusion:GridTextColumn  MappingName="CustomerName" TextWrapping="Wrap"/>

     </syncfusion:SfDataGrid.Columns>

     <syncfusion:SfDataGrid.SortColumnDescriptions>

         <syncfusion:SortColumnDescription ColumnName="DateTime" />

2. Able to see cell values, e.g. I cannot see value in the Comment column which have many characters.

It can be achieved using the TextWrapping property to set the value to 'Wrap' and update the row height based on the content using the QueryRowHeight event.

For your reference, I have attached the UG link for handling RowHeight Customization support.

UG Link-> https://help.syncfusion.com/wpf/datagrid/row-height-customization

 

<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding Orders}"

                        Grid.Column="0"  AutoGenerateColumns="True" AllowFiltering="True">

     <syncfusion:SfDataGrid.Columns>

         <syncfusion:GridDateTimeColumn   Pattern="FullDateTime"

                                 HeaderText="DateTime"

                                 MappingName="DateTime"

                                  />

         <syncfusion:GridTextColumn  MappingName="CustomerName" TextWrapping="Wrap"/>

     </syncfusion:SfDataGrid.Columns>

     <syncfusion:SfDataGrid.SortColumnDescriptions>

         <syncfusion:SortColumnDescription ColumnName="DateTime" />



public MainWindow()

{

     InitializeComponent();

     

     dataGrid.QueryRowHeight += DataGrid_QueryRowHeight;

    

 }

GridRowSizingOptions gridRowResizingOptions = new GridRowSizingOptions();

double autoHeight;

private void DataGrid_QueryRowHeight(object sender, Syncfusion.UI.Xaml.Grid.QueryRowHeightEventArgs e)

{

    if (this.dataGrid.GridColumnSizer.GetAutoRowHeight(e.RowIndex, gridRowResizingOptions, out autoHeight))

    {

        if (autoHeight > 24)

        {

            e.Height = autoHeight;

           

            e.Handled = true;

        }

    }

}

 

Note: Also, if you want update the column width, kindly refer the below mentioned UG Link-> https://help.syncfusion.com/wpf/datagrid/autosize-columns

3.Furthermore: the DateTime column only shows date

 

Please ensure whether you want to change the pattern of the time. This can be achieved by updating the pattern of the GridDateTimeColumn. For your reference, I have attached the UG link for handling the pattern of DateTime.


UG Link-> https://help.syncfusion.com/wpf/datagrid/column-types#change-the-pattern-of-date-time-value

<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding Orders}"

                        Grid.Column="0"  AutoGenerateColumns="True" AllowFiltering="True">

     <syncfusion:SfDataGrid.Columns>

         <syncfusion:GridDateTimeColumn   Pattern="FullDateTime"

                                 HeaderText="DateTime"

                                 MappingName="DateTime"

                                  />

         <syncfusion:GridTextColumn  MappingName="CustomerName" TextWrapping="Wrap"/>

     </syncfusion:SfDataGrid.Columns>

     <syncfusion:SfDataGrid.SortColumnDescriptions>

4.when there is a null value for say 'Unit', the table doesn't get rendered.

We tried to replicate the reported scenario on our end, but we were unable to do so. It works as expected for us. When parsing a null value into the observable collection, an empty cell is created. Please ensure that the table was not rendered or that a particular cell was empty due to the null value.
For your reference attached the simple sample.


Image Reference:



Regards,
Santhosh.G


Attachment: SfDataGrid_Demo_8519f8a9.zip

Marked as answer

KJ Kook Jin Noh replied to Santhosh Govindasamy June 21, 2024 01:20 AM UTC

Hi, thanks for your prompt reply.

For 2. Able to see cell values, e.g. I cannot see value in the Comment column which have many characters. I'd like to select the cell and move the cursor through to right to see the value. It's a very large number of characters so that adjusting cell height would make the table look ugly.

EDIT: ColumnSizer="Auto" seems to resolve the issue.

Thanks for help.



SG Santhosh Govindasamy Syncfusion Team June 21, 2024 07:57 AM UTC

Hi Kook Jin Noh,

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this . We are happy to help.

Regards,
Santhosh.G























Loader.
Up arrow icon