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
close icon

iPhone Settings Control

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

5 Replies

SK Shivagurunathan Kamalakannan Syncfusion Team 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"    
                     ColumnSizer="Star"    
                     HeaderRowHeight="0"   
                     GridLoaded="DataGrid_GridLoaded"   
                     AllowGroupExpandCollapse="True"   
                     AutoGenerateColumns="False"        
                     RowHeight="90"   
                     ItemsSource="{Binding OrderInfoCollection, Mode=TwoWay}" >   
   
    <datagrid:SfDataGrid.Columns x:TypeArguments="syncfusion:Columns">   
        <datagrid:GridTemplateColumn MappingName="ShipCountry">   
            <datagrid:GridTemplateColumn.CellTemplate>   
                <DataTemplate>   
                    <Grid>   
                        <Grid.ColumnDefinitions>   
                            <ColumnDefinition Width="*"/>   
                            <ColumnDefinition Width="Auto"/>   
                        </Grid.ColumnDefinitions>   
   
                        <Grid.RowDefinitions>   
                            <RowDefinition/>   
                        </Grid.RowDefinitions>   
   
                        <Frame  Grid.Column="0"    
                                BorderColor="Tomato"    
                                CornerRadius="8"    
                                Padding="3"   
                                HeightRequest="50"   
                                HasShadow="True">   
                            <Entry Text="{Binding Customer}" HeightRequest="50"/>   
                        </Frame>   
                           
                        <Switch Grid.Column="1" />   
                           
                    </Grid>   
                </DataTemplate>   
            </datagrid:GridTemplateColumn.CellTemplate>   
        </datagrid:GridTemplateColumn>   
    </datagrid:SfDataGrid.Columns>   
   
    <datagrid:SfDataGrid.GroupColumnDescriptions>   
        <datagrid:GroupColumnDescription ColumnName="ShipCountry"/>   
    </datagrid:SfDataGrid.GroupColumnDescriptions>   
   
    <datagrid:SfDataGrid.CaptionSummaryTemplate>   
        <DataTemplate>   
            <StackLayout Orientation="Horizontal">   
                <Label Grid.Column="1"    
                       TextColor="Black"   
                       BackgroundColor="White"   
                       Text="{Binding Converter={StaticResource customconverter}, ConverterParameter={x:Reference dataGrid}}"   
                       VerticalTextAlignment="Center"   
                       HorizontalTextAlignment="Start"   
                       HorizontalOptions="FillAndExpand"   
                       VerticalOptions="FillAndExpand">   
                    <Label.Style>   
                        <Style TargetType="Label">   
                            <Setter Property="FontAttributes" Value="Bold,Italic"/>   
                        </Style>   
                    </Label.Style>   
                </Label>   
            </StackLayout>   
        </DataTemplate>   
    </datagrid:SfDataGrid.CaptionSummaryTemplate>   
   
    <datagrid:SfDataGrid.CaptionSummaryRow>   
        <datagrid:GridSummaryRow Name="CaptionSummary"    
                                 Title="ShipCountry"    
                                 ShowSummaryInRow="true">   
            <datagrid:GridSummaryRow.SummaryColumns>   
                <datagrid:GridSummaryColumn Name="ShipCountry"   
                                                                                            Format="{}{Count}"   
                                                                                            MappingName="ShipCountry"   
                                                                                            SummaryType="CountAggregate"/>   
            </datagrid:GridSummaryRow.SummaryColumns>   
        </datagrid:GridSummaryRow>   
    </datagrid:SfDataGrid.CaptionSummaryRow>   
</datagrid:SfDataGrid>    
  
   
   
Code behind:   
   
   
public partial class MainPage : ContentPage   
{   
    public MainPage()   
    {   
        InitializeComponent();   
        dataGrid.GridStyle = new CustomStyle();   
    }   
   
    private void DataGrid_GridLoaded(object sender, GridLoadedEventArgs e)   
    {   
        dataGrid.CollapseAllGroup();   
    }   
}   
   
/// <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.   
   
Regards,   
Shivagurunathan  


HE Henry September 19, 2019 01:57 PM UTC

Great thank you!
I will check this out!


FP Farjana Parveen Ayubb Syncfusion Team 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 
 
Regards, 
Farjana Parveen A 



HE Henry 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


KK Karthikraja Kalaimani Syncfusion Team 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. 
   
Regards,   
Karthik Raja 


Loader.
Live Chat Icon For mobile
Up arrow icon