How to display the data in table format.

AjayKumar.M · June 2015

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..

AndrewMobile · June 2015

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 Labels

NicolasHotterbeekx · June 2015

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.

AjayKumar.M · June 2015

I didn't find the GridView control in Xamarin.Forms.

NicolasHotterbeekx · June 2015

Sorry, it's just <Grid>
http://developer.xamarin.com/api/type/Xamarin.Forms.Grid/

AndrewMobile · June 2015

if you have lots of rows, maye try use a ListView instead.

AjayKumar.M · June 2015

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.

AjayKumar.M · June 2015

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.

AndrewMobile · June 2015

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

AjayKumar.M · June 2015

Thanks Andrei Nitescu. Let me try with Grid Control.

NicolasHotterbeekx · June 2015

@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

AndrewMobile · June 2015

like I said, it depends on the number of items

if you have many rows, use the ListView

AndrewMobile · June 2015

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 Labels

DavePaul · June 2015

You may want to check out the DevExpress grid.
DevExpress Grid
It's free and cross platform.

AndrewMobile · June 2015

DevExpress forgot about that, good idea

NicolasHotterbeekx · June 2015

@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

AjayKumar.M · June 2015

@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

AjayKumar.M · June 2015

How to display ColumnSepeartion color in grid control?

AndrewMobile · June 2015

maybe use Spacing="1" and BackgroundColor="Black" on Grid

AjayKumar.M · June 2015

@AndreiNitescu, I have tried with BackgroungColor as Black and ColumnSpacing as 3. Still no result...

AndrewMobile · June 2015

what you mean by no result? post a screenshot?

AjayKumar.M · June 2015

please find the attached file

AndrewMobile · June 2015

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.

AjayKumar.M · June 2015

@AndreiNitescu, I'm getting the row borders in big size.Please find the attachment .

AndrewMobile · June 2015

I assume you put a Padding like Padding="1" on the Grid. Can you try to put something like Padding="1,0,0,1"

AndrewMobile · June 2015

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

AjayKumar.M · June 2015

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.

AndrewMobile · June 2015

I see. In this case, until DevExpress adds the customization you need, can't you hack it ?
For example, you said:

It's lacking some of the Header Template functionality like wrapping of text in the header and we can't customize the Header.

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.

AndrewMobile · June 2015

I have no idea if it could work, I'm just throwing some ideas

DavePaul · June 2015

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

ThemeManager.ThemeName = Themes.Light;
ThemeManager.Theme.HeaderCustomizer = new CustomGridHeaderCustomizer ();

KevinKeller · August 2015

This helped me Dave! Thanks!

vini001 · September 2016

@NicolasHotterbeekx Can you pleace provide me some sample code to display datas in gridview columnwise.i am using xamarin.android as the developing platform.

vini001 · September 2016

@AndrewMobile could you please provide me some sample code for the same in xamarin.android

JeremyMcQuivey · February 2017

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);

jaistar · November 2017

@AndrewMobile said:
if you have lots of rows, maye try use a ListView instead.

@AndrewMobile said:
if you have lots of rows, maye try use a ListView instead.

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?

betakarthik · December 2017

can any one suggest i have 4 columns with multiple rows which control is useful using .cs

ElangoSengotaiyan · May 31

Hello Ajay! Can you post your code for my further reference...

Farid_H · June 16

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.

Xamarin

How to display the data in table format.

Best Answer

Answers

Xamarin

Quick Links

How to display the data in table format.

Best Answer

Answers