Popuplayout - change values from SfDataGrid row

Hi,
I have SfDataGrif and I want after tap row show popup layout with all data from a row of SfDataGrid. My problem is that data in popuplayout are shown only after second show of popup dialog (after the second tap of a row) as attached picture. Same for Android and iOS.

Or is there another way how to change values in popuplayout from tapped row? I want to let popup definition in XAML code.



Attachment: Codes_c59e65c9.zip

1 Reply

KK Karthikraja Kalaimani Syncfusion Team October 2, 2019 02:38 PM UTC

Hi Tomas,

Thanks for contacting Syncfusion support,

We have achieved your requirement by this way and prepared a sample for the same. Please refer the below code snippet and sample.


 
[XAML]
<
ContentPage.BindingContext> 
        <local:ViewModel x:Name="viewModel"/> 
    </ContentPage.BindingContext> 
    <ContentPage.Content> 
        <sfPopup:SfPopupLayout x:Name="popupLayoutAlarmDetail"> 
 
            <sfPopup:SfPopupLayout.PopupView> 
                <sfPopup:PopupView HeaderTitle="Detail" IsFullScreen="False" ShowCloseButton="False" HeaderHeight="45" HeightRequest="300" FooterHeight="45" AcceptButtonText="OK"> 
 
                    <sfPopup:PopupView.PopupStyle> 
                        <sfPopup:PopupStyle BorderColor="Gray" 
                                  FooterBackgroundColor="Transparent" 
                                    HeaderBackgroundColor="Transparent" 
                                    AcceptButtonBackgroundColor ="Transparent" 
                                    BorderThickness ="1" 
                                        /> 
                    </sfPopup:PopupView.PopupStyle> 
                    <sfPopup:PopupView.ContentTemplate> 
                        <DataTemplate> 
                            <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Spacing="0" Margin="5" Padding="5"> 
 
                                <Grid x:Name="grid" RowSpacing="0" HorizontalOptions="FillAndExpand" VerticalOptions="Start" Margin="0,0,0,-2" Padding="0"> 
                                    <Grid.RowDefinitions> 
                                        <RowDefinition Height="23" /> 
                                        <RowDefinition Height="23" /> 
                                        <RowDefinition Height="23" /> 
                                        <RowDefinition Height="23" /> 
                                    </Grid.RowDefinitions> 
                                    <Grid.ColumnDefinitions> 
                                        <ColumnDefinition Width="*" /> 
                                        <ColumnDefinition Width="135"/> 
                                    </Grid.ColumnDefinitions> 
 
                                    <Label x:Name="LabelDatumCasText"  Grid.Row="0" Grid.Column="0"  HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Start" Text="{Binding labelFirstName,Mode=TwoWay,Source={x:Reference viewModel}}" FontSize="Small" FontAttributes="Bold"/> 
                                    <Label x:Name="LabelDatumCasValue" Grid.Row="1" Grid.Column="0" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="End" Text="{Binding labelLastName,Mode=TwoWay,Source={x:Reference viewModel}}" FontSize="Small" /> 
                                </Grid> 
 
                            </StackLayout> 
 
                        </DataTemplate> 
                    </sfPopup:PopupView.ContentTemplate> 
                </sfPopup:PopupView> 
            </sfPopup:SfPopupLayout.PopupView> 
            <sfPopup:SfPopupLayout.Content> 
 
                <StackLayout Spacing="0" > 
                    <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" > 
                        <StackLayout Spacing="0" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" > 
 
 
                            <StackLayout  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Spacing="0"> 
                                <sfgrid:SfDataGrid x:Name="dataGrid" GridTapped="DataGrid_GridTapped" 
                           ItemsSource="{Binding OrdersInfo}" 
                               NavigationMode="Cell" 
                               SelectionMode="Single" 
                               AllowEditing="True" 
                          GroupingMode="Multiple" 
                           AllowSorting="True" 
                           AutoGenerateColumns="True"> 
 
                                </sfgrid:SfDataGrid> 
                            </StackLayout> 
                        </StackLayout> 
                    </AbsoluteLayout> 
                </StackLayout> 
            </sfPopup:SfPopupLayout.Content> 
        </sfPopup:SfPopupLayout> 
    </ContentPage.Content> 
 
[.CS] 
        public MainPage() 
     { 
            InitializeComponent(); 
     } 
 
     private void DataGrid_GridTapped(object sender, GridTappedEventArgs e) 
     { 
            viewModel.labelFirstName = (e.RowData as OrderInfo).FirstName; 
            viewModel.labelLastName = (e.RowData as OrderInfo).LastName; 
            popupLayoutAlarmDetail.Show(); 
     } 
 


We hope this helps. Please let us know, if you need any further assistance.


Regards,
Karthik Raja 


Loader.
Up arrow icon