Customize cell in the Grid Numeric Column

[Joseph Michael]

I need to add few icons in the cell, along with the numeric label that was provided by default with the cell.  Just like below , but with two more icons. Could you let me know how this can be made using sfDataGrid. 

[Shivagurunathan Kamalakannan]

Hi Joseph Michael, 

 

Thanks for contacting Syncfusion Support. 

 

You can add the icons along with the Numeric labels inside the GridCells in the SfDataGrid by using the GridTemplateColumn and loading the required icons along with the SfNumericTextBox control as CellTemplate. 

 

 

Refer the below code example for your reference: 

 

Model class: 

 

 

public class OrderInfo : INotifyPropertyChanged 

{ 

    public OrderInfo() 

    { 

         

    } 

 

    private int _orderID; 

    private ImageSource musicIcon; 

    private ImageSource infoIcon; 

 

    public int OrderID 

    { 

        get 

        { 

            return _orderID; 

        } 

        set 

        { 

            this._orderID = value; 

            RaisePropertyChanged("OrderID"); 

        } 

    } 

 

    … 

 

    public ImageSource MusicIcon 

    { 

        get { return ImageSource.FromResource("SfDataGridSample.MusicIcon.png"); } 

    } 

 

    public ImageSource InfoIcon 

    { 

        get { return ImageSource.FromResource("SfDataGridSample.InfoIcon.png"); } 

    } 

 

} 

 

 

 

 

<sfgrid:GridTemplateColumn MappingName="OrderID" HeaderText="Order ID"> 

    <sfgrid:GridTemplateColumn.CellTemplate> 

        <DataTemplate> 

            <Grid> 

                <Grid.ColumnDefinitions> 

                    <ColumnDefinition/> 

                    <ColumnDefinition/> 

                    <ColumnDefinition/> 

                </Grid.ColumnDefinitions> 

                <Image Grid.Column="0" Source="{Binding MusicIcon}"/> 

                <Image Grid.Column="1" Source="{Binding InfoIcon}"/> 

                <NumericTextBox:SfNumericTextBox x:Name="NumericTextBox" Value="{Binding OrderID}" Grid.Column="2"/> 

            </Grid> 

        </DataTemplate> 

    </sfgrid:GridTemplateColumn.CellTemplate> 

</sfgrid:GridTemplateColumn> 

 

 

 

Refer the below UG link for more details. 

UG Link: https://help.syncfusion.com/xamarin/sfdatagrid/column-types#gridtemplatecolumn 

 

 

We have also 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/SfDataGridSample-2015375375 

 

 

Regards, 

Shivagurunathan. K 

 

[Joseph Michael]

The source code linked doesn't work.

When i add a custom cell template for cell the data of the cell is not editable. i have enabled AllowEditing for the column , but still the cell value is not editable.  Also the converters for the image are not called when i set the binding programatically for the image as below

image.SetBinding(Image.SourceProperty, "icon_notes.png", converter: new ImageConverter());

[Shivagurunathan Kamalakannan]

Hi Joseph, 

 

We have checked your query. 

 

 

Note: Restore the assemblies before running the project. 

 

 

Support for editing in template column is not provided, Since any of the views can be loaded inside the template column. If you need to edit the template column, You can load a editable view such as Label inside the template column. 

 

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/SfDataGridSample884228129 

 

 

Regards, 

Shivagurunathan. K