Forum › Xamarin.Forms
Quick Links
How to display the data in table format.
AjayKumar.M
USMember ✭✭
USMember ✭✭
I want to display the data in table structure like shown in attachment. I want Table Header as constant and the data will scroll.
Thanks..
Tagged:
0
Best Answer
-
AndrewMobile
US ✭✭✭✭
This will generate a whole lot more Layout cycles to layout every grid within the listview
I don't think so
With a ListView the cells should recycle. So if you have 10,000 rows but only 20 visible rows, yes, there will be 20 Grids created, each Grid with 3 Labels.
But if you are just using a Grid instead of a ListView, you are going to have one Grid but with 30,000 Labels5
Answers
I would approach it as this:
1) Create vertical stackLayout
2) Create a gridlayout for the headers
3) Create a scrollview
4) Create a gridlayout for the data (nested in the scrollview)
In suppo xml:
<Stacklayout> <GridView x:Name "headers"/> <ScrollView> <GridView x:Name="Data"/> </ScrollView> </StackLayout>However I would do in code, so that you can add data to your grid based on the amount of data.
I didn't find the GridView control in Xamarin.Forms.
Sorry, it's just
<Grid>http://developer.xamarin.com/api/type/Xamarin.Forms.Grid/
if you have lots of rows, maye try use a ListView instead.
Hi AndreiNitescu,
I have tried with the list View but I unable to provide the sizes of the columns dynamically i.e for Portrait and landscape mode.
Hi Nicolas Hotterbeekx,
Can u please provide a sample code to show the headers and data using grid control and binding data to grid control.
it should work.
use a ViewCell with a Grid with 3 columns with default star size
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions > <Label /> <Label Grid.Column="2"/> <Label Grid.Column="3"/> </Grid>when you rotate the device, the cells should expand and so the grid and the columns and the labels within it
Thanks Andrei Nitescu. Let me try with Grid Control.
@AndreiNitescu , you suggest to not use a grid, with many rows, but now you are creating a new grid for every row of data. This will generate a whole lot more Layout cycles to layout every grid within the listview
like I said, it depends on the number of items
if you have many rows, use the ListView
I don't think so
With a ListView the cells should recycle. So if you have 10,000 rows but only 20 visible rows, yes, there will be 20 Grids created, each Grid with 3 Labels.
But if you are just using a Grid instead of a ListView, you are going to have one Grid but with 30,000 Labels
You may want to check out the DevExpress grid.
DevExpress Grid
It's free and cross platform.
DevExpress forgot about that, good idea
@ajaykumar.2529 , something like this. But indeed the devexpress grid @DavidPaul.1182 mentioned is worth checking out.
This is not tested, but typed on the fly. So excuse me if it not 100% correct.
public class DataObject { public string Value1 { get; set; } public string Value2 { get; set; } public string Value3 { get; set; } } List<DataObject> myObjects = new List<DataObject>() { new DataObject(){Value1 = "Value 1", Value2 = "value2", Value3 = "Value 3"}, new DataObject(){Value1 = "Value 1", Value2 = "value2", Value3 = "Value 3"}, new DataObject(){Value1 = "Value 1", Value2 = "value2", Value3 = "Value 3"}, new DataObject(){Value1 = "Value 1", Value2 = "value2", Value3 = "Value 3"}, new DataObject(){Value1 = "Value 1", Value2 = "value2", Value3 = "Value 3"}, new DataObject(){Value1 = "Value 1", Value2 = "value2", Value3 = "Value 3"}, new DataObject(){Value1 = "Value 1", Value2 = "value2", Value3 = "Value 3"}, new DataObject(){Value1 = "Value 1", Value2 = "value2", Value3 = "Value 3"}, }; ContentPage p = new ContentPage(); StackLayout s = new StackLayout(); Grid outG = new Grid(); ScrollView sc = new ScrollView(); Grid innerG = new Grid(); //create the columns for the header outG.ColumnDefinitions = new ColumnDefinitionCollection() { new ColumnDefinition(){Width = GridLength.Auto}, new ColumnDefinition(){Width = GridLength.Auto}, new ColumnDefinition(){Width = GridLength.Auto}, }; outG.Children.Add(new Label(){Text = "Title 1"}, 0,0); outG.Children.Add(new Label() { Text = "Title 2" }, 1, 0); outG.Children.Add(new Label() { Text = "Title 3" }, 2, 0); //create you columns for the rows innerG.ColumnDefinitions = new ColumnDefinitionCollection() { new ColumnDefinition(){Width = GridLength.Auto}, new ColumnDefinition(){Width = GridLength.Auto}, new ColumnDefinition(){Width = GridLength.Auto}, }; innerG.RowDefinitions = new RowDefinitionCollection(); //create a new row for each object in datacollection for(int i = 0; i < myObjects.Count; i++) { innerG.RowDefinitions.Add(new RowDefinition(){Height = GridLength.Auto}); innerG.Children.Add(new Label(){Text = myObjects[i].Value1}, 0, i); innerG.Children.Add(new Label() { Text = myObjects[i].Value2 }, 1, i); innerG.Children.Add(new Label() { Text = myObjects[i].Value3 }, 2, i); } sc.Content = innerG; //content in scrollview s.Children.Add(outG); //header grid view in stackLayout s.Children.Add(sc); // scrollview in stackLayout p.Content = s; //page content = stacklayout@NicolasHotterbeekx , I have tried with DevExpress Grid. It's lacking some of the Header Template functionality like wrapping of text in the header and we can't customize the Header.
I have done as @AndreiNitescu said, it's worked for me.
Thanks @NicolasHotterbeekx, @AndreiNitescu
How to display ColumnSepeartion color in grid control?
maybe use Spacing="1" and BackgroundColor="Black" on Grid
@AndreiNitescu, I have tried with BackgroungColor as Black and ColumnSpacing as 3. Still no result...
what you mean by no result? post a screenshot?
please find the attached file
For each cell in the Grid, I assume you have some view. You need to put a background on that view, like white for example.
This will make it look like there are borders for your cells.
@AndreiNitescu, I'm getting the row borders in big size.Please find the attachment .
I assume you put a Padding like Padding="1" on the Grid. Can you try to put something like Padding="1,0,0,1"
You previously said about DevExpress Grid that it's lacking some of the header customization
Can you hide its header? If you do, you could use a Grid to simulate a header placed at the top of the DevExpress Grid
Yes. But in Dev Express Grid header there is some more functionality like sorting, searching, Grouping. If i remove that header those functionality will be missed.
I see. In this case, until DevExpress adds the customization you need, can't you hack it ?
For example, you said:
I wonder if you couldn't get the actual control (I assume it's a Label) by parsing the UI hierarchy somehow and try apply some properties to make it work.
I have no idea if it could work, I'm just throwing some ideas
You can actually customize the header and the cells! You just have to work a bit with the theme manager... I haven't done any text wrapping but have worked with changing fonts, colors, borders and padding.
So the ThemeManager has two themes... light and dark. But they also have a ThemeManager.Theme.CellCustomizer interface... so
You create your custom cell using their interface and one of the themes (light or dark)
public class CustomGridHeaderCustomizer:IHeaderCustomizer { LightHeaderCustomizer lhc; public CustomGridHeaderCustomizer() { lhc = new LightHeaderCustomizer (); } public Color BackgroundColor { get{ return Color.Blue; } } public Color BorderColor { get{ return lhc.BorderColor; } } public ThemeFontAttributes Font { get { return new ThemeFontAttributes ("Default", 14, FontAttributes.Bold, Color.Black);} } public Thickness Padding { get{ return lhc.Padding; } } public ImageSource CreateArrowDownImageSource (){ return lhc.CreateArrowDownImageSource (); } public ImageSource CreateArrowNoneImageSource (){ return lhc.CreateArrowNoneImageSource (); } public ImageSource CreateArrowUpImageSource (){ return lhc.CreateArrowUpImageSource (); } public ImageSource CreateFilterImageSource (){ return lhc.CreateFilterImageSource (); } public void LocateHeaderViewInPanel (View header, Rectangle headerBounds, bool isFirst, bool isLast){ lhc.LocateHeaderViewInPanel (header, headerBounds, isFirst, isLast); } }Then you just use this with the thememanager
This helped me Dave! Thanks!
@NicolasHotterbeekx Can you pleace provide me some sample code to display datas in gridview columnwise.i am using xamarin.android as the developing platform.
@AndrewMobile could you please provide me some sample code for the same in xamarin.android
In v16.2 of the DevExpress grid, IHeaderCustomizer requires you to implement the setters of the properties that @DavePaul mentioned above. So this actually allows you to change only the properties you need instead of having to re-implement the entire interface.
var themeManager = ThemeManager.Theme.HeaderCustomizer; themeManager.BackgroundColor = Color.Blue; themeManager.Font = new ThemeFontAttributes("Default", 14, FontAttributes.Bold, Color.White);Yes we can use list view but it displays only two columns. Can you tell me how to add more than two columns in a list view?
can any one suggest i have 4 columns with multiple rows which control is useful using .cs
Hello Ajay! Can you post your code for my further reference...
Hi every one. i had some similar problem. but i dont want write a lot of codes. i want just know how can i put a data table into xamarin form. exactly like normal c# code with DataGrid. because i put my informations that from my server come into a data table.
DataGridView has property DataSource with than can put a data table into a datagrid.