We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

iPhone Settings Control

Thread ID:





147644 Sep 18,2019 01:10 PM UTC Sep 24,2019 08:16 PM UTC Xamarin.Forms 5
Tags: SfDataGrid
Asked On September 18, 2019 01:10 PM UTC

Hello there!
I am looking the control like the iPhone Settings.
It is almost like a one column grid, but you can click on a row to drill down to that specific detail.
Fill in the detail and then go back.
I have the picture attached.
What is this control?
Thank you!

Attachment: DrillDown_f4e1770e.zip

Shivagurunathan Kamalakannan [Syncfusion]
Replied On September 19, 2019 09:20 AM UTC

Hi Henry,   
Thank you for contacting Syncfusion support.  
We have checked the provided screenshot. You can use SfDataGrid in your application which has grouping feature that allow you achieve your requirement. We have prepared a sample in which grouping can been applied and template has been loaded in the caption summary row so that you could load your view based on your requirement. To fit the column with the device screen width you can set column sizer as Star for SfDataGrid.   
You can use GridTemplateColumn to load the views in the data rows based on your requirement. We have loaded entry and switch for your reference.   
Please refer the below user guidelines to know more about styles, grouping and GridTemplateColumn.    
Xaml code:   
<datagrid:SfDataGrid x:Name="dataGrid"    
                     ItemsSource="{Binding OrderInfoCollection, Mode=TwoWay}" >   
    <datagrid:SfDataGrid.Columns x:TypeArguments="syncfusion:Columns">   
        <datagrid:GridTemplateColumn MappingName="ShipCountry">   
                            <ColumnDefinition Width="*"/>   
                            <ColumnDefinition Width="Auto"/>   
                        <Frame  Grid.Column="0"    
                            <Entry Text="{Binding Customer}" HeightRequest="50"/>   
                        <Switch Grid.Column="1" />   
        <datagrid:GroupColumnDescription ColumnName="ShipCountry"/>   
            <StackLayout Orientation="Horizontal">   
                <Label Grid.Column="1"    
                       Text="{Binding Converter={StaticResource customconverter}, ConverterParameter={x:Reference dataGrid}}"   
                        <Style TargetType="Label">   
                            <Setter Property="FontAttributes" Value="Bold,Italic"/>   
        <datagrid:GridSummaryRow Name="CaptionSummary"    
                <datagrid:GridSummaryColumn Name="ShipCountry"   
Code behind:   
public partial class MainPage : ContentPage   
    public MainPage()   
        dataGrid.GridStyle = new CustomStyle();   
    private void DataGrid_GridLoaded(object sender, GridLoadedEventArgs e)   
/// <summary>   
/// Converter for the caption summary rows.   
/// </summary>   
public class CustomConverter : IValueConverter   
    public CustomConverter()   
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)   
        var data = value != null ? value as Group : null;   
        if (data != null)   
            SfDataGrid dataGrid = (SfDataGrid)parameter;   
            return data.Key + " - " + data.ItemsCount + " Items";   
        return null;   
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)   
        return value;   
/// <summary>   
/// Style class to customize SfDatagrid.   
/// </summary>   
public class CustomStyle : DataGridStyle   
    public CustomStyle()   
    public override ImageSource GetGroupCollapseIcon()   
        return ImageSource.FromResource("SfGridSample.GroupCollapser.png");   
    public override ImageSource GetGroupExpanderIcon()   
        return ImageSource.FromResource("SfGridSample.GroupExpander.png");   
  public override Color GetBorderColor()   
      return Color.Transparent;   
Please refer the below sample for more details.   

Replied On September 19, 2019 01:57 PM UTC

Great thank you!
I will check this out!

Farjana Parveen Ayubb [Syncfusion]
Replied On September 20, 2019 06:28 AM UTC

Hi Henry, 
Thanks for your the update. Please get back to us if you need further assistance from us 
Farjana Parveen A 

Replied On September 23, 2019 01:43 PM UTC

Hello there,
I do not believe they sfDataGrid will work for me.
There are certain controls I will need in a row such as a date and time picker.

1. My first row will be where I pick a name of a worker.   Here I wanted to tap the row and navigate to a list to select the worker.
2. The next row would be a date picker.
3. I would then have a few other rows that would be something where I can pick values from a list.

I have attached a screen shot of what I had written in another program and I am not trying to redo with Xamarin.
Sorry new and trying to learn all the controls!!

Attachment: SampleEntry_8cbe5dcc.zip

Karthikraja Kalaimani [Syncfusion]
Replied On September 24, 2019 08:16 PM UTC

Hi Henry,  
Thank you for update. 
Currently we are validating your requirement, we will validate and let you know the details in one business day September 26, 2019. We appreciate your patience until then. 
Karthik Raja 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon