How to Add ColorPicker to DataTemplate

I'm creating a control in my application that autogenerates columns for my datagrid regardless of the object passed to ItemsSource.

However, I am failing to understand how the DataTemplate class operates.

Below is my code...

[code]
                    else if (type == typeof(Color))
                    {
                        DataTemplate colorTemplate = new DataTemplate();
                        colorTemplate.DataType = typeof(string);

                        // WHAT DO I DO HERE TO ADD A COLORPICKER TO THE TEMPLATE

                        GridDataColumnStyle style = new GridDataColumnStyle();
                        style.CellItemTemplate = colorTemplate;
                        col.ColumnStyle = style;
                    }
[/code]

I can accomplish this in WPF but not in C#
[code]
        <Grid.Resources>
            <DataTemplate x:Key="ColorTemplate">
                <syncfusion:ColorPicker Color="{Binding CellBoundValue, Mode=TwoWay}" />
            </DataTemplate>
        </Grid.Resources>
   
        <syncfusion:GridDataControl x:Name="GridMain"
            Grid.Row="2"
        VisualStyle="{Binding GridVisualStyle}"
        ItemsSource="{Binding CurrentRecords}" Margin="0,0,10,0">
            <syncfusion:GridDataControl.VisibleColumns>
                <syncfusion:GridDataVisibleColumn HeaderText="Color" MappingName="Color" CellItemTemplate="{StaticResource ColorTemplate}" CellEditItemTemplate="{StaticResource ColorTemplate}"/>
            </syncfusion:GridDataControl.VisibleColumns>
        </syncfusion:GridDataControl>
[/code]
Thank you!

3 Replies

SD Sharron Denice December 24, 2013 10:33 AM UTC

By the way, this is the code I'm using and its not working. It just displays the string Color value in the cell.

[code]
                        // First: create the data template for the parent control
                        DataTemplate colorTemplate = new DataTemplate(typeof(ColorPicker));

                        // Second: create and add the colorpicker to the data template
                        FrameworkElementFactory picker = new FrameworkElementFactory(typeof(ColorPicker));
                        colorTemplate.VisualTree = picker;

                        // Create binding
                        Binding bind = new Binding();
                        bind.Path = new PropertyPath(col.MappingName);
                        bind.Mode = BindingMode.TwoWay;

                        // Third: set the binding in the text box
                        picker.SetBinding(ColorPicker.BrushProperty, bind);

                        style.CellItemTemplate = colorTemplate;
                        style.CellEditTemplate = colorTemplate;
[/code]


SD Sharron Denice December 24, 2013 12:47 PM UTC

ANSWER: 

Well first I have a typo in the above code but in any case FrameworkElementFactory is deprecated so its of no use anyway. The answer is below...

[code]
                        ParserContext pc = new ParserContext();
                        pc.XmlnsDictionary.Add("", "http://schemas.microsoft.com/winfx/2006/xaml/presentation");
                        pc.XmlnsDictionary.Add("x", "http://schemas.microsoft.com/winfx/2006/xaml");
                        pc.XmlnsDictionary.Add("syncfusion", "http://schemas.syncfusion.com/wpf");

                        string stringTemplate = "<DataTemplate x:Key=\"ColorTemplate\">";
                        stringTemplate += "<syncfusion:ColorPicker Color=\"{Binding CellBoundValue, Mode=TwoWay}\" />";
                        stringTemplate += "</DataTemplate>";

                        StringReader stringReader = new StringReader(stringTemplate);
                        XmlReader xmlReader = XmlReader.Create(stringReader);
                        MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(stringTemplate.ToString()));
                        DataTemplate colorTemplate = (DataTemplate)XamlReader.Load(ms, pc);
                        
                        col.CellItemTemplate = colorTemplate;
                        col.CellEditItemTemplate = colorTemplate;
[/code]


SM Saravanan M Syncfusion Team February 10, 2014 12:44 PM UTC

Hi Sharron, 

We are sorry about not clear in previous update, 

Thanks for your code . Please let us know if you need further assistance.

Regards,

Saravanan.M


Loader.
Up arrow icon