Default values displayed on numeric columns

[Phunction]

Is it possible to have the grid just show a blank instead of 0 or 0.00 for numeric data columns?

[Sethupathy Devarajan]

Hi Chris KovalCik,

To achieve your requirement, you can customise the format of a particular column using converter. Please refer to the code snippet below:

 

 

In XML page

 

    <ContentPage.Resources>

        <local:DisplayBindingConverter x:Key="displayBindingConverter" />

    </ContentPage.Resources> 

 

    <dataGrid:SfDataGrid.Columns>

      <dataGrid:DataGridNumericColumn MappingName="OrderID"

                                    ColumnWidthMode="FitByHeader"

                                    HeaderText="Customer ID"

                                    DisplayBinding="{Binding OrderID,

                                    Converter={StaticResource displayBindingConverter}}" />

    </dataGrid:SfDataGrid.Columns> 

 

 

In C# Page

 

using Microsoft.Maui;

using Syncfusion.Maui.Data;

using Syncfusion.Maui.DataGrid;

using System.Globalization;

 

namespace MauiApp1

{

    public partial class MainPage : ContentPage

    {

        public MainPage()

        {

            InitializeComponent();

        }

    }

 

    public class DisplayBindingConverter : IValueConverter

    {

        public object? Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            int? priceValue = (int?)value;

 

            if (priceValue == 0)

            {

                // Special handling when value is 0

                return null;

            }

            else

            {

                // Return the original value with currency symbol prefixed

                // This will be displayed value with two decimal precision

                return string.Format(culture, "{0:N2}", priceValue);

            }

        }

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }

}

 

Screen Shot of the Sample attached.

In the above image, you can notice that the first row value and first column’s value is blank in the Customer ID column according to the converter logic defined.

Also, we have attached the basic sample for you reference. We hope that this helps you. If you require further clarification or additional assistance, please let us know. We are happy to help you out.

Regards,

Sethupathy D

Attachment: MauiApp1_206fdafd.zip

[Phunction]

Thank, I add my columns programtically, like this:

Columns.Add(new DataGridNumericColumn() { MappingName = szMap, AllowEditing = bAllow });

How do I assign the converter when doing this way?

[Tamilarasan Paranthaman]

Hi Phunction,

You can meet your requirement by choosing either of the following solutions:

1. Utilizing DisplayBinding Converter:

Achieve the desired formatting by implementing a DisplayBinding Converter in the code-behind for the specific numeric column. Assign the converter to the corresponding column's DisplayBinding property, providing you with control over the display of numeric values. The following code snippet serves as a reference:

 

using Microsoft.Maui;

using Syncfusion.Maui.Data;

using Syncfusion.Maui.DataGrid;

using System.Globalization;

 

namespace MauiApp1

{

    public partial class MainPage : ContentPage

    {

        public MainPage()

        {

            InitializeComponent();

            DataGridTextColumn OrderIdTextColumn = new DataGridTextColumn();

            OrderIdTextColumn.MappingName = "OrderID";

            OrderIdTextColumn.HeaderText = "Order ID";

            OrderIdTextColumn.HeaderTextAlignment = TextAlignment.Center;

            OrderIdTextColumn.CellTextAlignment = TextAlignment.Center;

            OrderIdTextColumn.Width = 100;

 

            DataGridTextColumn customerNameColumn = new DataGridTextColumn();

            customerNameColumn.MappingName = "Customer";

            customerNameColumn.HeaderText = "Customer Name";

            customerNameColumn.HeaderTextAlignment = TextAlignment.Center;

            customerNameColumn.CellTextAlignment = TextAlignment.Center;

            customerNameColumn.Width = 150;

 

            DataGridNumericColumn PriceColumn = new DataGridNumericColumn();

            PriceColumn.MappingName = "Price";

            PriceColumn.HeaderText = "Price";

            PriceColumn.HeaderTextAlignment = TextAlignment.Center;

            PriceColumn.CellTextAlignment = TextAlignment.Center;

            PriceColumn.Width = 100;

 

            PriceColumn.DisplayBinding = new Binding { Path = "Price", Converter = new DisplayBindingConverter() };

 

            dataGrid.Columns.Add(OrderIdTextColumn);

            dataGrid.Columns.Add(customerNameColumn);

            dataGrid.Columns.Add(PriceColumn);

        }

    }

    public class DisplayBindingConverter : IValueConverter

    {

        public object? Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            double? priceValue = (double?)value;

 

                if (priceValue == 0)

                {

                    return null;

                }

                else

                {

                return string.Format(culture, "{0:N2}", priceValue);

            }

        }

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }

}

 

2. Setting Values as Null in ViewModel:

Alternatively, achieve the desired outcome without relying on DisplayBinding by adjusting the values in the ViewModel underlying collection. Instead of using 0 or 0.00 for numeric values, set the value as null when it should not be displayed. The following code snippet illustrates this approach:

In Model:

 

using System.ComponentModel;

 

namespace MauiApp1

{

    public class OrderInfo : INotifyPropertyChanged

    {

        private int? orderID;

        private string? customerID;

        private string? customer;

        private string? shipCity;

        private string? shipCountry;

        private double? price;

 

        public event PropertyChangedEventHandler? PropertyChanged;

 

        private void OnPropertyChanged(string propertyName)

        {

            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

        }

 

        …

 

        public double? Price

        {

            get { return price; }

            set

            {

                this.price = value;

                OnPropertyChanged(nameof(Price));

            }

        }

 

        public OrderInfo(int? orderId, string? customer, string? country, string? customerId, string? shipCity, double? price)

        {

            this.OrderID = orderId;

            this.Customer = customer;

            this.ShipCountry = country;

            this.CustomerID = customerId;

            this.ShipCity = shipCity;

            this.Price = price;

        }

    }

}

In ViewModel:

using Syncfusion.Maui.DataGrid;

using System.Collections.ObjectModel;

using System.ComponentModel;

 

namespace MauiApp1

{

    public class OrderInfoRepository

    {

 

        private ObservableCollection<OrderInfo> orderInfo;

        private object? dataGridSelectedRow;

 

      

 

        public ObservableCollection<OrderInfo> OrderInfoCollection

        {

            get { return orderInfo; }

            set { this.orderInfo = value; }

        }

 

 

        public OrderInfoRepository()

        {

            orderInfo = new ObservableCollection<OrderInfo>();

            this.GenerateOrders();

        }

 

        public void GenerateOrders()

        {

            orderInfo.Add(new OrderInfo(1001, "Maria Anders", "Germany", "ALFKI", "Berlin",0));

            orderInfo.Add(new OrderInfo(1002, "Ana Trujillo", "Mexico", "ANATR", "Mexico D.F.", 12000));

            orderInfo.Add(new OrderInfo(1003, "Ant Fuller", "Mexico", "ANTON", "Mexico D.F.", null));

            orderInfo.Add(new OrderInfo(1004, "Thomas Hardy", "UK", "AROUT", "London", 18500));

            orderInfo.Add(new OrderInfo(1005, "Tim Adams", "Sweden", "BERGS", "London", 0));

            orderInfo.Add(new OrderInfo(1006, "Ella Turner", "Germany", "LONEP", "Berlin", null));

            orderInfo.Add(new OrderInfo(1007, "Jackson Martinez", "USA", "MAGAA", "New York", 11800));

        }

    }

}

 

This approach ensures that only non-null values are displayed in the numeric column.

Selecting either of these solutions will enable you to achieve the desired outcome. Additionally, we have attached a basic sample that includes the implementation of both approaches. Please note that in the provided sample, we have used the DisplayBinding to achieve this. To validate the second approach, you can ensure its application by commenting out the DisplayBinding property, specifically (PriceColumn.DisplayBinding).

Regards,

Tamilarasan

Attachment: Sample_5b06cf8d.zip