Programmatically creating RadDataGrid issue on binding dynamic custom control in Xamarin Forms

[William]

I am working on Xamarin Forms and I have to create a Datagrid programmatically with dynamic custom control where controls may have selected value or default value. Here column and controls are not predefined. I have asked two more questions before regarding this issue and the Telerik forum really helped me out. But the scenario is something else. Whenever I load Datagrid with existing data it is unable to keep row identity, all of those rows hold the same view with the same default/selected value as well. Is there any other way to bind new rows with dynamic custom controls instead of adding new data in ItemsSource. 

My current approach is: 

private readonly RadDataGrid dataGrid = new RadDataGrid() { IsEnabled = true, AutoGenerateColumns = false, HeightRequest = Application.Current.MainPage.Height * 57 / 100, IsClippedToBounds = true };
private ObservableCollection<dynamic> dataSource = new ObservableCollection<dynamic>();
private List<Element> Elements = new List<Element>();

public async Task DoSetup()
{
        dataGrid.SelectionMode = DataGridSelectionMode.Single;
        dataGrid.SelectionUnit = DataGridSelectionUnit.Row;
        //dataGrid. += (s, e) => DataGrid_SelectionChanged(s, e);

        dataGrid.UserFilterMode = DataGridUserFilterMode.Disabled;
        dataGrid.UserGroupMode = DataGridUserGroupMode.Disabled;
        dataGrid.UserSortMode = DataGridUserSortMode.None;
        dataGrid.ItemsSource = dataSource;
        AddHeaderRow();
}

 private void AddHeaderRow()
 {
            var columnWidth = (Application.Current.MainPage.Width - 25) / Elements.Count;

            this.dataGrid.Columns.Add(new DataGridTemplateColumn
            {
                SizeMode = DataGridColumnSizeMode.Fixed,
                Width = 25,
                Name = "actionbtn",
                CanUserFilter = false,
                CanUserGroup = false,
                CanUserSort = false,
                CanUserEdit = true,
                HeaderStyle = new DataGridColumnHeaderStyle
                {
                    OptionsButtonTextColor = Color.Transparent,
                    OptionsButtonFontSize = 0,
                    BorderColor = Color.FromHex("#D9D9D9"),
                    BorderThickness = new Thickness(0)
                },
                CellContentTemplate = GetActionButtonIcon() //return trash icon
            });

            foreach (ApiClient.Models.IElement element in Elements)
            {
                this.dataGrid.Columns.Add(new DataGridTemplateColumn
                {
                    SizeMode = DataGridColumnSizeMode.Fixed,
                    Width = columnWidth,
                    HeaderText = element.DisplayName,
                    Name = element.DisplayName,
                    CanUserFilter = false,
                    CanUserGroup = false,
                    CanUserSort = false,
                    CanUserEdit = true,
                    HeaderStyle = new DataGridColumnHeaderStyle
                    {
                        OptionsButtonTextColor = Color.Transparent,
                        OptionsButtonFontSize = 0,
                        BorderColor = Color.FromHex("#D9D9D9"),
                        BorderThickness = new Thickness(0)
                    },
                    CellContentTemplate = GetTemplate(element)
                });
            }
 }

 private DataTemplate GetTemplate(Element element)
 {
            return new DataTemplate(() =>
            {
                var stackLayout = new StackLayout();
                var view = GetView(element); //return dynamic custom controls based on element type
                stackLayout.Children.Add(view);

                return stackLayout;
            });
 }

DataTemplateSelector may solve this issue, but didn't find any solution yet using DataTemplateSelector.

• Which one is the correct approach?
• How do I implement DataTemplateSelector for dynamic custom controls? 

[Yana]

Hello William,

First, I'd like to reply to the direct question about DataGrid rows - the only way to add rows is by adding data to the ItemsSource of the control. 

I am not sure I completely understand the question - in general, when you define the TemplateColumn, it applies the DataTemplate for every item from the ItemsSource. You can use DataTemplateSelector to return different templates according to some condition.

I've created a sample app based on the provided snippet and added DataTemplateSelector instead of the DataTemplate, please download the application and give it a try.

Let me know if I am missing something of the requirements or in case you have any additional questions on this.

Regards,
Yana
Progress Telerik