We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

SfDataGrid Databinding Template Columns At Runtime

I have a ViewModel with a collection of Resources which has a collection of JobCodes. The collection of Resources are bound to the SfDataGrid and binds to a few columns. The JobCodes are chosen by the user so I need to add columns to the grid to show the values for the Resource/JobCode in the cell. I added a GridTextColumn at runtime and set the MappingName to "JobCodeCollection[2].Value" and it show the value correctly.
What I want is to use a GridTemplateColumn and use a data bound template. When I set theGridTemplateColumn MappingName to "JobCodeCollection[2]" it doesn't seem like any binding happens. If bind the Text of a label in my template to "{Binding JobCodeCollection[2].Value}" it works but it's no longer a reusable template because the data template has the index hard coded.
I have tried using a DataTemplateSelector but that doesn't help. I tried using aGridVirtualizingCellRenderer but could find any examples and couldn't find a method to draw the template. I have tried to create the binding in code but I don't have a handle on the datatemplate controls and it wouldn't respond to grid source changes. I have included my sample project with my attempts.
I am hoping someone knows of a way to add GridTemplateColumns bound to an index collection.

Attachment: DataGridExample_6ffcdd65.zip

3 Replies

AN Ashok N Syncfusion Team September 19, 2017 11:22 AM UTC

Hi William, 

Thanks for contacting Syncfusion support. 

We have checked your sample and you used CellTemplateSelector wrongly in you sample, also you didn’t create the DataTemplate for Special and Normal property. We have modified the sample based on your requirement and attached the sample in the below location, please refer it. 

Please refer the below UG link to get more details about CellTemplateSelector


HH Heath Hdogert September 19, 2017 04:42 PM UTC

Thank you for fixing the template selector but that was not my problem.

The problem is adding columns and setting their binding to an indexed value. I want to be able add rows through the AddDynamicRows method in the MainView.xaml.cs but I can not get it to data bind to the column.

AN Ashok N Syncfusion Team September 21, 2017 05:49 AM UTC

Hi William, 

Thanks for your update . 

We have checked your code for adding GridTemplateColumn in AddDynamicRows method. For GridTemplateColumn we must to set the CellTemplate but you missed to setting the CellTemplate. You can achieve your requirement by setting CellTemplate to  GridTemplateColumn. Please refer the below code example 

var col = new GridTemplateColumn(); 
col.HeaderText = code; 
col.MappingName = mappingName; 
col.Width = 100; 
var cellTemplate = new DataTemplate(() => 
    var label = new Label(); 
    label.HorizontalOptions = LayoutOptions.Center; 
    label.VerticalOptions = LayoutOptions.Center; 
    label.SetBinding(Label.TextProperty, new Binding(mappingName, converter: new ValueConverter(),converterParameter: null)); 
    return label; 
col.CellTemplate = cellTemplate; 


Live Chat Icon For mobile
Up arrow icon