Touch issue with DataTemplate of Column while using list inside cell

[Rahul Rathore]

hi,

We are using DataTemplate for creating custom columns in sfdatagrid control, we are using collection view(List) inside  column's cell, the problem is the area occupied by Collection view inside cell is not  tapable(clickable), but we want entire cell should be clickable.

Please find below reference for more understanding-

  DataGrid.Columns.Add(new GridTemplateColumn()
            {
                CellTemplate = SetCellTemplate(),
                MappingName = "Test",
                AllowEditing = true,
                HeaderCellTextSize = 18,
                CellTextSize = 16,
                MinimumWidth = 200,
                TextAlignment = TextAlignment.Center,
            });

  public DataTemplate SetCellTemplate(
        {

 return new DataTemplate(() =>
            {
                StackLayout parentStackLayout = new StackLayout();

                CollectionView collectionView = new CollectionView
                {
                    ItemsLayout = LinearItemsLayout.Horizontal,
                    HeightRequest = 40,
                    Margin = new Thickness(0, 0, 0, 0),
                };
                collectionView.ItemTemplate = new DataTemplate(() =>
                {
                    var stackLayout = new StackLayout();
                    stackLayout.HorizontalOptions = LayoutOptions.CenterAndExpand;
                    stackLayout.VerticalOptions = LayoutOptions.CenterAndExpand;
                    stackLayout.Padding = new Thickness(5, 5, 5, 5);


                    var _AllocationLabel = new Label();
                    _AllocationLabel.SetBinding(Label.TextProperty, "Hours");
                    _AllocationLabel.FontAttributes = FontAttributes.None;
                    _AllocationLabel.FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label));
                    _AllocationLabel.TextColor = Color.Black;
                    _AllocationLabel.HorizontalOptions = LayoutOptions.Center;
                    _AllocationLabel.VerticalOptions = LayoutOptions.Center;
                    frame.Content = _AllocationLabel;
                    stackLayout.Children.Add(frame);
                    return stackLayout;
                });
                parentStackLayout.Children.Add(collectionView);
}
          

[Pradeep Kumar Balakrishnan]

Hi Rahul, 

 

Thank you for contacting Syncfusion support. 

 

Currently, We are checking on the reported query ”Cannot be able to click the view which is inside Template column”. We will validate and update you the details by June 24, 2020. We appreciate your patience until then.    

 

Regards, 

Pradeep Kumar B 

[Pradeep Kumar Balakrishnan]

Hi Rahul, 

  

Thank you for your patience. 

 

We have checked the shared code snippet and reported issue “Cannot be able to click the view which is inside Template column” in Xamarin forms SfDataGrid. We have handled touch for scrolling but click action is not restricted. Also you have not defined any Tap gesture or clickable view in CellTemplate. Are you trying to convey Collection view scrolling is not working instead SfDataGrid scrolling is happening. If not then please add tap gesture to collection view or collection view item based on your requirement. 

 

Code Snippet: 

 

Gesture to Collection view item. 

 

collectionView.ItemTemplate = new DataTemplate(() => 

{ 

    var stackLayout = new StackLayout(); 

    stackLayout.HorizontalOptions = LayoutOptions.CenterAndExpand; 

    stackLayout.VerticalOptions = LayoutOptions.CenterAndExpand; 

    stackLayout.Padding = new Thickness(5, 5, 5, 5); 

 

    var _AllocationLabel = new Label(); 

    _AllocationLabel.SetBinding(Label.TextProperty, "OrderID"); 

    _AllocationLabel.FontAttributes = FontAttributes.None; 

    _AllocationLabel.FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Button)); 

    _AllocationLabel.TextColor = Color.Black; 

    _AllocationLabel.HorizontalOptions = LayoutOptions.Center; 

    _AllocationLabel.VerticalOptions = LayoutOptions.Center; 

    _AllocationLabel.BackgroundColor = Color.Red; 

 

    var frame = new Frame(); 

    frame.Content = _AllocationLabel; 

    stackLayout.Children.Add(frame); 

 

    TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer() { NumberOfTapsRequired = 1 }; 

    tapGestureRecognizer.Tapped += TapGestureRecognizer_Tapped; 

    stackLayout.GestureRecognizers.Add(tapGestureRecognizer);  

 

    return stackLayout; 

}); 

  

Let us know if you need any further assistance on this. 

 

Regards,  

Pradeep Kumar B

[Rahul Rathore]

we already tried the tapGesture, but we are not getting gridTappedEventArgs object, what we get on gridtapped event. We need row index, column index and selected cell data.

Regards

[Pradeep Kumar Balakrishnan]

Hi Rahul, 

 

Thank you for the update. 

 

We have checked your update and requirement “How to access the Row Index , column index, selected cell value and RowIndex from template column view”. you are requirement can be achieved in sample level. Please refer the following code snippet for sample level changes. 

 

Code Snippet: 

private void TapGestureRecognizer_Tapped(object sender, EventArgs e) 

{ 

    //// Selected value from  

    var selectedValue = ((sender as StackLayout).BindingContext as CollectionModel).OrderID; 

    var rowData = (sender as StackLayout).Parent.BindingContext as OrderInfo; 

 

    var rowIndex = this.dataGrid.GetRowGenerator().Items.FirstOrDefault(x => x.RowData == rowData).RowIndex; 

 

    var columnIndex = this.dataGrid.Columns.IndexOf(this.dataGrid.Columns.FirstOrDefault(x => x.MappingName == "OrderID")); 

 

} 

 

For your information. 

 

We are unaware of view which is loaded inside template column and GridTapped event is fired only when we receive tapped event notification for GridCell. 

Expecting GridTapped event args in tapgesture which is used in DataGrid template column view is invalid use case. 

 

We have also attached sample for you are reference in the following link. 

https://www.syncfusion.com/downloads/support/forum/155323/ze/DataGrid1969446248 

 

Let us know if you need any further assistance on this. 

 

Regards, 

Pradeep Kumar B 

[Rahul Rathore]

hi,

in our case,we are not able to get columnindex, since columns are dynamic, so we don't know, what mapping name should be passed, because mapping Name is also dyanmic.

var columnIndex = this.dataGrid.Columns.IndexOf(this.dataGrid.Columns.FirstOrDefault(x => x.MappingName == Random))

for example-

DynamicName=  Random.next(5);

 DataGridTimeCard.Columns.Add(new GridTemplateColumn()
            {
                MappingName = DynamicName,
             
            });

[Sivaraman Sivagurunathan]

Hi Rahul, 

Thanks for the Update. 

We have checked your query. you can achieve your requirement but set the InputTransparent as True for the elements where you have load inside the Template. So that we have handle the tapped event and you can get the row column index from GridTappedEventArgs. We have modified the sample and attached for your reference you can download the same from the below link.  

public DataTemplate SetCellTemplate() 

{ 

    return new DataTemplate(() => 

    { 

 

        StackLayout parentStackLayout = new StackLayout(); 

        parentStackLayout.InputTransparent = true; 

 

        CollectionView collectionView = new CollectionView 

        { 

            ItemsLayout = LinearItemsLayout.Horizontal, 

            HeightRequest = 40, 

            Margin = new Thickness(0, 0, 0, 0), 

            InputTransparent = true, 

        }; 

 

        collectionView.SetBinding(CollectionView.ItemsSourceProperty, new Binding("OrderID")); 

 

        collectionView.ItemTemplate = new DataTemplate(() => 

        { 

            var stackLayout = new StackLayout(); 

            stackLayout.InputTransparent = true; 

            stackLayout.HorizontalOptions = LayoutOptions.CenterAndExpand; 

            stackLayout.VerticalOptions = LayoutOptions.CenterAndExpand; 

            stackLayout.Padding = new Thickness(5, 5, 5, 5); 

 

            var _AllocationLabel = new Label(); 

            _AllocationLabel.SetBinding(Label.TextProperty, "OrderID"); 

            _AllocationLabel.FontAttributes = FontAttributes.None; 

            _AllocationLabel.FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Button)); 

            _AllocationLabel.TextColor = Color.Black; 

            _AllocationLabel.HorizontalOptions = LayoutOptions.Center; 

            _AllocationLabel.VerticalOptions = LayoutOptions.Center; 

            _AllocationLabel.BackgroundColor = Color.Red; 

            _AllocationLabel.InputTransparent = true; 

 

            var frame = new Frame(); 

            frame.Content = _AllocationLabel; 

            frame.InputTransparent = true; 

            stackLayout.Children.Add(frame); 

            return stackLayout; 

        }); 

 

       //return collectionVie 

        parentStackLayout.Children.Add(collectionView); 

        return parentStackLayout; 

 

    }); 

} 

private void DataGrid_GridTapped(object sender, GridTappedEventArgs e) 

{ 

    var rowColumnIndex = e.RowColumnIndex; 

} 

Sample Link: https://www.syncfusion.com/downloads/support/forum/155323/ze/1553231217599519 

Regards, 

Sivaraman S