Popuplayout - change values from SfDataGrid row

[Tomas Turek]

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

[Karthikraja Kalaimani]

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

     } 

Sample Link :  https://www.syncfusion.com/downloads/support/directtrac/general/ze/popupWithBinding-363879484.zip 

 

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


Regards,
Karthik Raja