GridQueryableCollectionViewWrapper converting my Dictionary<string,object> to Dictionary<string,string>

[Adolfo]

Hi there,

I'm implementing the suggestion below to bind a Dictionary to my SfDataGrid (v 19.1451.0.54) in Xamarin Forms.

I'm setting my grid ItemsSource like this:

grid.ItemsSource = new QueryableViewExt(rows, grid);

Where rows is an ObservableCollection of DynamicModel type based on this example: https://www.syncfusion.com/kb/7829/how-to-load-sfdatagrid-dynamically-with-json-data-without-poco-classes

The problem is in QueryableViewExt class. When this class gets initialized (constructor call) I see the source dictionary coming in as Dictionary(string,object) as expected but when I tap on my grid column to sort, when it gets to GetExpressionFunc method, I can see while debugging that source changes to Dictionary(string,string) for some reason and it's not sorting my integers properly.

Any ideas why the dictionary types are changing?

Class definition:

    public class QueryableViewExt : GridQueryableCollectionViewWrapper

    {

        public QueryableViewExt(IEnumerable source, SfDataGrid grid) : base(source, grid)

        {

        }

        public override Expression> GetExpressionFunc(string propertyName, DataOperation operation = DataOperation.Default, DataReflectionMode reflectionMode = DataReflectionMode.Default)

        {

            Expression> exp = base.GetExpressionFunc(propertyName, operation, reflectionMode);

            if (exp == null)

            {

                Func func;

                func = (propertyname, record) =>

                {

                    var provider = this.GetPropertyAccessProvider();

                    return provider.GetValue(record, propertyName);

                };

                exp = (propertyname, record) => func(propertyName, record);

            }

            return exp;

        }

    }

Thanks,

Adolfo

[Karthikraja Kalaimani]

Hi Adolfo,

Based on the provided details, we have checked the reported issue “Sorting not working when bound dictionary as ItemSource to SfDataGrid”. Unfortunately, the reported issue is not reproducing in our side and the sorting as expected. We have attached the tested sample for your reference.

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGridDemo2111275296.zip 

 

Please check the sample and if you still face the same issue, please modify the attached sample based on the scenario you used to reproduce the issue. Also let us know the SfDataGrid and Xamarin forms versions. It will be helpful for us to validate the issue and provide you the solution at earlier. 

Regards,
Karthik Raja 

[Adolfo]

Thanks Karthik, 

I was able to reproduce the issue making slight modifications to the project you sent. In MainPage.cs I commented out the Column addition section with logic iterating through the ViewModel Dynamic Collection's first item (because that's all I need to build the dynamic data template).

I need to use data template approach because my columns are variable and I cannot configure them ahead of time. I need to build the grid programmatically. If you do this, you'll notice that sorting of OrderID is alphabetical instead of numeric.

I changed the JsonData in ViewModel.cs to this:

        public const string JsonData = "[{\"OrderID\":13,\"EmployeeID\":100,\"FirstName\":'Gina',\"LastName\":'Gable'}," +

                                     "{\"OrderID\":1,\"EmployeeID\":200,\"FirstName\":'Danielle',\"LastName\":'Rooney'}," +

                                    "{\"OrderID\":7,\"EmployeeID\":201,\"FirstName\":'Danielle',\"LastName\":'Rooney'}," +

                                    "{\"OrderID\":8,\"EmployeeID\":300,\"FirstName\":'Frank',\"LastName\":'Gable'},]";

Here is the modified constructor for MainPage():

        public MainPage()

        {

            InitializeComponent();

            dataGrid.ItemsSource = new QueryableViewExt(viewModel.DynamicCollection, dataGrid);

            dataGrid.AutoGenerateColumns = false;

            //dataGrid.Columns.Add(new GridTextColumn()

            //{

            //    HeaderText = "Order ID",

            //    MappingName = "Values[OrderID]",

            //});

            //dataGrid.Columns.Add(new GridTextColumn()

            //{

            //    HeaderText = "Customer ID",

            //    MappingName = "Values[EmployeeID]",

            //});

            //dataGrid.Columns.Add(new GridTextColumn()

            //{

            //    HeaderText = "First Name",

            //    MappingName = "Values[FirstName]",

            //});

            //dataGrid.Columns.Add(new GridTextColumn()

            //{

            //    HeaderText = "Last Name",

            //    MappingName = "Values[LastName]",

            //});

            var firstObject = viewModel.DynamicCollection.First();

            foreach (KeyValuePair kvp in firstObject.Values.ToArray())

            {

                var templateColumn = new GridTemplateColumn()

                {

                    HeaderText = kvp.Key,

                    MappingName = $"Values[{kvp.Key}]",

                    AllowSorting = true

                };

                var dataTemplate = new DataTemplate(() =>

                {

                    var label = new SfLabel()

                    {

                        VerticalOptions = LayoutOptions.Center,

                        HorizontalOptions = LayoutOptions.Center

                    };

                    label.SetBinding(SfLabel.TextProperty, $"Values[{kvp.Key}]");

                    return label;

                });

                templateColumn.CellTemplate = dataTemplate;

                dataGrid.Columns.Add(templateColumn);

            }

        }

With the above changes, you'll notice that when you sort by OrderId you'll get: 1,13,7,8 in ascending order and 8,7,13,1 in descending order instead of 1,7,8,13 asc and 13,8,7,1 desc

Let me know if you need more details,

Adolfo

[Adolfo]

Thanks Karthik, 

I was able to reproduce the issue making slight modifications to the project you sent. In MainPage.cs I commented out the Column addition section with logic iterating through the ViewModel Dynamic Collection's first item (because that's all I need to build the dynamic data template).

I need to use data template approach because my columns are variable and I cannot configure them ahead of time. I need to build the grid programmatically. If you do this, you'll notice that sorting of OrderID is alphabetical instead of numeric.

I changed the JsonData in ViewModel.cs to this:

        public const string JsonData = "[{\"OrderID\":13,\"EmployeeID\":100,\"FirstName\":'Gina',\"LastName\":'Gable'}," +

                                     "{\"OrderID\":1,\"EmployeeID\":200,\"FirstName\":'Danielle',\"LastName\":'Rooney'}," +

                                    "{\"OrderID\":7,\"EmployeeID\":201,\"FirstName\":'Danielle',\"LastName\":'Rooney'}," +

                                    "{\"OrderID\":8,\"EmployeeID\":300,\"FirstName\":'Frank',\"LastName\":'Gable'},]";

Here is the modified constructor for MainPage():

        public MainPage()

        {

            InitializeComponent();

            dataGrid.ItemsSource = new QueryableViewExt(viewModel.DynamicCollection, dataGrid);

            dataGrid.AutoGenerateColumns = false;

            //dataGrid.Columns.Add(new GridTextColumn()

            //{

            //    HeaderText = "Order ID",

            //    MappingName = "Values[OrderID]",

            //});

            //dataGrid.Columns.Add(new GridTextColumn()

            //{

            //    HeaderText = "Customer ID",

            //    MappingName = "Values[EmployeeID]",

            //});

            //dataGrid.Columns.Add(new GridTextColumn()

            //{

            //    HeaderText = "First Name",

            //    MappingName = "Values[FirstName]",

            //});

            //dataGrid.Columns.Add(new GridTextColumn()

            //{

            //    HeaderText = "Last Name",

            //    MappingName = "Values[LastName]",

            //});

            var firstObject = viewModel.DynamicCollection.First();

            foreach (KeyValuePair kvp in firstObject.Values.ToArray())

            {

                var templateColumn = new GridTemplateColumn()

                {

                    HeaderText = kvp.Key,

                    MappingName = $"Values[{kvp.Key}]",

                    AllowSorting = true

                };

                var dataTemplate = new DataTemplate(() =>

                {

                    var label = new SfLabel()

                    {

                        VerticalOptions = LayoutOptions.Center,

                        HorizontalOptions = LayoutOptions.Center

                    };

                    label.SetBinding(SfLabel.TextProperty, $"Values[{kvp.Key}]");

                    return label;

                });

                templateColumn.CellTemplate = dataTemplate;

                dataGrid.Columns.Add(templateColumn);

            }

        }

With the above changes, you'll notice that when you sort by OrderId you'll get: 1,13,7,8 in ascending order and 8,7,13,1 in descending order instead of 1,7,8,13 asc and 13,8,7,1 desc

Let me know if you need more details,

Adolfo

I think I figured it out. I replaced SfLabel with Label in my data template (code b and the sorting came back to normal (numeric vs alphabetical):

                    var label = new SfLabel()

                    {

                        VerticalOptions = LayoutOptions.Center,

                        HorizontalOptions = LayoutOptions.Center

                    };

                    label.SetBinding(SfLabel.TextProperty, $"Values[{kvp.Key}]");

                    return label;

I actually grabbed the code snipped above from this link: https://www.syncfusion.com/kb/7521/how-to-create-gridtemplatecolumn-in-code-behind. Any idea why SfLabel behaves differently from normal Label for grid/dictionary sorting?

Thanks,

[Karthikraja Kalaimani]

Hi Adolfo,

Thanks for the update.

Currently, we are validating the reported issue. We will validate and update the details on or before 19^th April 2021. We appreciate your patience until then.

Regards, 

Karthik Raja 

[Karthikraja Kalaimani]

Hi Adolfo,

Thanks for your patience.

Actually, we have an TextProperty which is bindable property and its type is string in SfLabel class. So, the sorting are not in numeric order and it is alphabetical order (since the numeric value considered as alphabetical because the TextProperty type is String). So, we suggest to use Xamarin forms Label for your scenario.

Regards,
Karthik Raja  

[Adolfo]

Thanks Karthik. I'm using a Label and it works fine. We can close the thread.

Thanks for your help.

[Karthikraja Kalaimani]

Hi Adolfo,

Thanks for the update. Please let us know if you need further assistance from us.

Regards,
Karthik Raja