Binding a list of Dictionary objects to the ItemsSource of a sfDataGrid

[Alfredo]

Hi,

I am having a hard time figuring out the syntax for binding a list of dictionary objects to the sfDataGrid.  I have the following view model that defines and exposes the DictionaryList.  There are two different objects that can go in the dictionary, one that holds int values (IntValueHolder), and another that holds string values (StringValueHolder):

class ItemsViewModel

{

public class IntValueHolder

{

public int IntValue { get; set; }

}

public class StringValueHolder

{

public string StringValue { get; set; }

}

public List<IDictionary<string, object>> DictionaryList { get; set; } = new List<IDictionary<string, object>>();

public ItemsViewModel()

{

IntValueHolder intValueHolder;

StringValueHolder stringValueHolder;

var columnsDictionary = new Dictionary<string, object>();

intValueHolder = new IntValueHolder() { IntValue = 1000 };

columnsDictionary.Add("ItemID", intValueHolder);

stringValueHolder = new StringValueHolder() { StringValue = "Clown Wig FH789" };

columnsDictionary.Add("ItemName", stringValueHolder);

stringValueHolder = new StringValueHolder() { StringValue = "Big red silly wig for clowns." };

columnsDictionary.Add("ItemDescription", stringValueHolder);

DictionaryList.Add(columnsDictionary);

intValueHolder = new IntValueHolder() { IntValue = 2000 };

columnsDictionary.Add("ItemID", intValueHolder);

stringValueHolder = new StringValueHolder() { StringValue = "Clown Shoes CS332" };

columnsDictionary.Add("ItemName", stringValueHolder);

stringValueHolder = new StringValueHolder() { StringValue = "Big floppy clown shoes." };

columnsDictionary.Add("ItemDescription", stringValueHolder);

DictionaryList.Add(columnsDictionary);

}

}

Notice that the IntValue and StringValue objects expose their values through properties.  I am trying to bind the DictionaryList  exposed in this ViewModel (highlighted in green) using XAML that creates template columns:

 <?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:d="http://xamarin.com/schemas/2014/forms/design"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:vm="using:Tabular.Mobile.ViewModels"

xmlns:grid="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms"

mc:Ignorable="d"

             x:Class="Tabular.Mobile.Views.ItemsListPage">

<ContentPage.BindingContext>

<vm:ItemsViewModel />

</ContentPage.BindingContext>

    <ContentPage.Content>

<StackLayout Orientation="Vertical">

<grid:SfDataGrid x:Name="sfGrid"

ColumnSizer="Auto"

AllowEditing="False"

NavigationMode="Cell"

ItemsSource="{Binding DictionaryList}"

AutoGenerateColumns="False">

<grid:SfDataGrid.Columns>

<grid:GridTemplateColumn HeaderText="Item ID"

MappingName="ItemID"

AllowSorting="True"

Width="100">

<grid:GridTemplateColumn.CellTemplate>

<DataTemplate>

<Label Text="{Binding Path=Value.IntValue}"

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand" />

</DataTemplate>

</grid:GridTemplateColumn.CellTemplate>

</grid:GridTemplateColumn>

<grid:GridTemplateColumn HeaderText="Item Name"

MappingName="ItemName"

AllowSorting="True"

Width="100">

<grid:GridTemplateColumn.CellTemplate>

<DataTemplate>

<Label Text="{Binding Path=Value.StringValue}"

   HorizontalOptions="CenterAndExpand"

   VerticalOptions="CenterAndExpand" />

</DataTemplate>

</grid:GridTemplateColumn.CellTemplate>

</grid:GridTemplateColumn>

</grid:SfDataGrid.Columns>

</grid:SfDataGrid>

</StackLayout>

</ContentPage.Content>

</ContentPage>

I tried this but I didn't get any results.  The bindings and properties I am not sure about are highlighted in orange. Will the grid know to match the dictionary keys to the column names?  Can you help me with the syntax for these bindings?

Thanks for your great support,

Alfredo Diaz

[Alfredo]

Hi,

I figured out how to do this.  I followed your example in the following post:

https://www.syncfusion.com/kb/7828/how-to-load-sfdatagrid-dynamically-with-json-data-without-poco-classes

I had to change the mapping name and the binding path to the following format and it works:

<grid:GridTemplateColumn HeaderText="Item Name"

MappingName="Values[ItemName].StringValue"

AllowSorting="True"

Width="200">

<grid:GridTemplateColumn.CellTemplate>

<DataTemplate>

<Label Text="{Binding Path=Values[ItemName].StringValue}"

FontSize="Micro"

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand" />

</DataTemplate>

</grid:GridTemplateColumn.CellTemplate>

</grid:GridTemplateColumn>

Thanks,

Alfredo Diaz

[Karthikraja Kalaimani]

Hi Alferdo,

Thank you for the update. We glad to know that your requirement has been achieved at your end. Please let us know if you have any further queries on this. We are happy to help you.

Regards,
Karthik Raja