GridColumn Header Template Customization dynamically

Question

Hi,

I am trying to customize the grid column header template using c# in xaml.cs. I was able to do that in the xaml using the <sfgrid:GridColumn.HeaderTemplate

> and adding data template to it. Could you tell, how this can be done programatically while adding a column dynamically?

Shivagurunathan Kamalakannan · Answer

Hi Joseph Michael, 
 
Thanks for contacting Syncfusion Support, 
 
You can customize the GridColumn.HeaderTemplate programmatically as shown below. 
 




 
GridTextColumn OrderIDColumn = new GridTextColumn() 
{ 
    MappingName = "OrderID", 
    HeaderTemplate = new DataTemplate(() => 
    { 
        Label orderIDLabel = new Label(); 
        orderIDLabel.Text = "Order ID"; 
        orderIDLabel.BackgroundColor = Color.LightBlue; 
        orderIDLabel.TextColor = Color.White; 
        return orderIDLabel; 
     }) 
}; 
 
GridTextColumn CustomerIDColumn = new GridTextColumn() 
{ 
    MappingName = "CustomerID", 
    HeaderTemplate = new DataTemplate(() => 
     { 
          Label customerIDLabel = new Label(); 
          customerIDLabel.Text = "Customer ID"; 
          customerIDLabel.BackgroundColor = Color.LightBlue; 
          customerIDLabel.TextColor = Color.White; 
          return customerIDLabel; 
      }) 
}; 
 
………… 
………… 
………… 
………… 
 
dataGrid.Columns.Add(OrderIDColumn); 
dataGrid.Columns.Add(CustomerIDColumn); 
dataGrid.Columns.Add(firstNameColumn); 
dataGrid.Columns.Add(lastNameColumn); 
dataGrid.Columns.Add(shipCityColumn); 
 
 
The below screenshot is the outcome of the given sample. 
 
  
 
 
We have prepared a sample based on your requirement and you can download the same from the below link: 
 
Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridSample-854361762 
 
Regards, 
Shivagurunathan. K

Joseph Michael · Answer

Thanks shivagurunathan. That works. How do i disable diagonal scrolling and let the grid only scroll horizontally and vertically, but not both ways at the same time.

Shivagurunathan Kamalakannan · Answer

Hi Joseph Michael, 
At present, it is not possible to disable the diagonal scrolling in SfDataGrid since it is the behavior of the control. However, we have considered this to be a feature request. We have added it to our feature request list and the feature will be available in any of our upcoming releases. 
Regards,Shivagurunathan Kamalakannan

Vince · Answer

Hi Shivagurunathan,This does not work for Xamarin.Android because DataTemplate is not available there.Do you have a sample for the GridColumn Header Template in Xamarin.Android?

Shivagurunathan Kamalakannan · Answer

Hi Joseph Michael, 
 
We have checked your query. Yes we have attached the sample for grid column header template. You can be customize the grid header column by header template. 
 
Refer the UG link for more details. 
UG link: https://help.syncfusion.com/xamarin-android/sfdatagrid/column-types#headertemplate 
 
Refer the below code for more details. 
 




 
public class MainActivity : Activity 
{ 
    SfDataGrid dataGrid; 
    protected override void OnCreate(Bundle bundle) 
    { 
        dataGrid = new SfDataGrid(BaseContext); 
        base.OnCreate(bundle); 
 
        // Set our view from the "main" layout resource 
        SetContentView (Resource.Layout.Main); 
        OrderInfoRepository viewModel = new OrderInfoRepository(); 
        dataGrid.ItemsSource = viewModel.OrderInfoCollection; 
 
        dataGrid.AutoGenerateColumns = false; 
        dataGrid.ColumnSizer = ColumnSizer.Star; 
        dataGrid.AllowDraggingRow = true; 
 
        TextView OrderIDTextView = new TextView(this); 
        OrderIDTextView.Text = "Order ID"; 
        OrderIDTextView.SetBackgroundColor(Color.LightBlue); 
        OrderIDTextView.SetTextColor(Color.White); 
       
 
        GridTextColumn OrderIDColumn = new GridTextColumn(); 
        OrderIDColumn.HeaderTemplate = OrderIDTextView; 
        OrderIDColumn.MappingName = "OrderID"; 
        OrderIDColumn.LoadUIView = true; 
 
        TextView CustomerIDTextView = new TextView(this); 
        CustomerIDTextView.Text = "Customer ID"; 
        CustomerIDTextView.SetBackgroundColor(Color.LightBlue); 
        CustomerIDTextView.SetTextColor(Color.White); 
 
        GridTextColumn CustomerIDColumn = new GridTextColumn(); 
        CustomerIDColumn.HeaderTemplate = CustomerIDTextView; 
        CustomerIDColumn.MappingName = "CustomerID"; 
        CustomerIDColumn.LoadUIView = true; 
 
… 
… 
        dataGrid.Columns.Add(CustomerIDColumn); 
        dataGrid.Columns.Add(OrderIDColumn); 
        dataGrid.Columns.Add(ShipCountryColumn); 
        dataGrid.Columns.Add(CustomerColumn); 
        dataGrid.Columns.Add(ShipCityColumn); 
         
         
        LinearLayout linear = FindViewById<LinearLayout>(Resource.Id.linear); 
        linear.AddView(dataGrid); 
    } 
} 
 
 
 
We have prepared a sample based on your requirement and you can download the same from below link. 
Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfGrid_Android-770498791 
 
 
Regards, 
Shivagurunathan. K