How to add a databound table to a collectionview grid in Xamarin

Question

I know that Xamarin XAML does not support an HTML table:

<table><th/><tr><td>Data Here</td></tr></table>

I have a databound collection view that gets data from a SQLite database, let's say it's the Person class:

<CollectionView x:Name="collectionView">
<CollectionView.ItemTemplate>
<DataTemplate>                        
<Grid Margin="0" Padding="0,0,0,0">
<Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" />
<Label Grid.Row="1" Grid.Column="0" Text="{Binding TABLEDATA}" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

When I populate the database there is data that is dynamic and will not always fill one row. Sometimes it's one row, sometimes it's eight rows, like a person's work history.

I save the data as a string with an Envirnment.Newline(); deliminator to make the text readable and fill the database field "TABLEDATA".

I want to fill that database field with text like this:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

and databind it to something in Xamarin XAML that will render it.

Does anyone have any ideas?

Answer 1

In your C# code, create an observable collection of your object type:

private ObservableCollection<YourModel> objList;
public ObservableCollection<YourModel> ObjList
{
    get { return objList; }
    set
    {
        objList = value;
    }
}

Populate your data to the list:

ObjList = new ObservableCollection<....>(){ ....};

In XAML create a grid inside a CollectionView:

<CollectionView ItemsSource="{Binding ObjList}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />                   
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                
                <Label Grid.Column="0"
                       Text="{Binding Name}"
                       />
                <Label 
                       Grid.Column="1"
                       Text="{Binding Att1}"
                      />
                     
                      <Label 
                       Grid.Column="2"
                       Text="{Binding Att2}"
                        />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>

</CollectionView>

Alternatively, check the DataGrid in Syncfusion.

Answer 2

This is what I am doing so far:

            <CollectionView x:Name="collectionView">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                    <Grid Margin="0" Padding="0,0,0,0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="25" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <BoxView Color="#333130" Margin="0"></BoxView>

<!--  WE ARE LOOKING AT THE WEVIEW IN A DATABOUND COLLECTIONVIEW  Yikes!-->

                            <WebView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="6" BackgroundColor="#333130" 
                                     MinimumHeightRequest="150" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
                                     HeightRequest="{Binding WebViewHeight}" >
                                <WebView.Source>
                                    <HtmlWebViewSource Html="{Binding AllHTMLText}"/>
                                </WebView.Source>
                            </WebView>



                    </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

Inside a CollectionView is a Grid, then there are labels that are databound that provide useful data. Some of that data is dynamic and does not display well in "Label" I need a table to display it properly.

In the CollectionView is now a million webviews, this is terrible, but it works. The webview gets its HTML, which is just an HTML table of data, from that database field AllHTMLText. Then, when the collection view renders each table is a different size and therefore the webview does not know that.

I had to create another database field called WebViewHeight that gets populated with a calculated height for the webview based on how big the table is.

It's a hack, but it works. If anyone has a better idea to improve this please post your ideas.