How to display the data in table format.

AjayKumar.MAjayKumar.M ✭✭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..

Best Answer

Answers

  • AjayKumar.MAjayKumar.M ✭✭ USMember ✭✭

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

  • NicolasHotterbeekxNicolasHotterbeekx ✭✭✭ USMember ✭✭✭
    edited June 2015
  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭
    edited June 2015

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

  • AjayKumar.MAjayKumar.M ✭✭ USMember ✭✭
    edited 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.MAjayKumar.M ✭✭ USMember ✭✭

    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.

  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭
    edited 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.MAjayKumar.M ✭✭ USMember ✭✭

    Thanks Andrei Nitescu. Let me try with Grid Control.

  • NicolasHotterbeekxNicolasHotterbeekx ✭✭✭ USMember ✭✭✭

    @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

  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭
    edited June 2015

    like I said, it depends on the number of items

    if you have many rows, use the ListView

  • DavePaulDavePaul ✭✭ CAMember ✭✭

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

  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭

    DevExpress forgot about that, good idea

  • NicolasHotterbeekxNicolasHotterbeekx ✭✭✭ USMember ✭✭✭

    @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.MAjayKumar.M ✭✭ USMember ✭✭
    edited 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.MAjayKumar.M ✭✭ USMember ✭✭

    How to display ColumnSepeartion color in grid control?

  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭
    edited June 2015

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

  • AjayKumar.MAjayKumar.M ✭✭ USMember ✭✭

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

  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭

    what you mean by no result? post a screenshot?

  • AjayKumar.MAjayKumar.M ✭✭ USMember ✭✭

    please find the attached file

  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭

    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.MAjayKumar.M ✭✭ USMember ✭✭

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

  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭

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

  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭

    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.MAjayKumar.M ✭✭ USMember ✭✭

    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.

  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭

    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.

  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭

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

  • DavePaulDavePaul ✭✭ CAMember ✭✭

    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 ();
    
  • KevinKellerKevinKeller USMember

    This helped me Dave! Thanks!

  • vini001vini001 ✭✭ INMember ✭✭

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

  • vini001vini001 ✭✭ INMember ✭✭

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

  • JeremyMcQuiveyJeremyMcQuivey USMember

    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);
    
    
  • jaistarjaistar USMember

    @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?

  • betakarthikbetakarthik ✭✭ INMember ✭✭

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

  • ElangoSengotaiyanElangoSengotaiyan Member

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

  • Farid_HFarid_H ✭✭ Member ✭✭

    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.

Sign In or Register to comment.