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?
CodePudding user response:
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.
CodePudding user response:
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.