Touch issue with DataTemplate of Column while using list inside cell

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

6 Replies 1 reply marked as answer

PK Pradeep Kumar Balakrishnan Syncfusion Team June 22, 2020 05:51 PM UTC

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 



PK Pradeep Kumar Balakrishnan Syncfusion Team June 24, 2020 08:31 AM UTC

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


RR Rahul Rathore June 24, 2020 08:41 AM UTC

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


PK Pradeep Kumar Balakrishnan Syncfusion Team June 25, 2020 10:07 AM UTC

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. 
 
Let us know if you need any further assistance on this. 
 
Regards, 
Pradeep Kumar B 



RR Rahul Rathore July 2, 2020 10:26 AM UTC

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,
             
            });


SS Sivaraman Sivagurunathan Syncfusion Team July 3, 2020 08:51 AM UTC

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; 
} 



Regards, 
Sivaraman S 
 


Marked as answer
Loader.
Up arrow icon