1. Home
  2. Forum
  3. Xamarin.Forms
  4. Custom CellStyle in SfDataGrid (Xamarin Android or Forms)

Custom CellStyle in SfDataGrid (Xamarin Android or Forms)


Hello, I want to custom CellStyle in SfDataGrid. Type like hypelink. Or with underlining. I have found out that on the WPF TextDecorations property, but not found with android. Can you give me an example, if there is an example using code behind (c #) and XML, the better. Thank you so much!

16 Replies
PK Pradeep Kumar Balakrishnan Syncfusion Team April 29, 2020 09:07 AM UTC

Hi Son Hoang, 
 
Thank you for contacting Syncfusion support. 
 
We have analyzed the requirement “How to underline cell text value in xamarin forms android”,  Currently datagrid doesn’t have direct support to set text decoration. Your requirement can be achieved by setting LoadUI for gridcolumn as true and custom text column renderer to underline the text and datagrid cell style event to change text color. Please find the following code example for the same. 
 
Code snippet: 
[XAMl] 
<sfgrid:SfDataGrid.Columns> 
    <sfgrid:GridTextColumn MappingName="OrderID" LoadUIView="True" /> 
    <sfgrid:GridTextColumn MappingName="CustomerID" LoadUIView="True" /> 
    <sfgrid:GridTextColumn MappingName="ShipCountry" LoadUIView="True" /> 
</sfgrid:SfDataGrid.Columns> 
 
 
[C#] 
this.dataGrid.CellRenderers.Remove("TextView"); 
this.dataGrid.CellRenderers.Add("TextView", new GridCellTextViewRendererExt()); 
 
private void dataGrid_QueryCellStyle(object sender, QueryCellStyleEventArgs e) 
{ 
    if (e.ColumnIndex == 1) 
    { 
        e.Style.ForegroundColor = Color.Blue; 
        e.Handled = true; 
    } 
} 
 
public class GridCellTextViewRendererExt : GridCellTextViewRenderer 
{ 
    public override void OnInitializeDisplayView(DataColumnBase dataColumn, SfLabel view) 
    { 
        base.OnInitializeDisplayView(dataColumn, view); 
 
        if(dataColumn.ColumnIndex == 1) 
        view.TextDecorations = TextDecorations.Underline; 
    } 
} 
 
We have attached sample for your reference. 
 
Please let us know, if you require any further assistance on this. 
 
Regards, 
Pradeep Kumar B  


SH Son Hoang May 6, 2020 09:42 AM UTC

Many thanks for your answer, Pradeep Kumar Balakrishnan. It solved my problem.
I have a problem right now.
I have 2 tables as shown. Table one will load up sfdatagrid. Table two will be linked data. "Approve_Status" column. I want the data from the second table to be linked to the "Approve_Status" column. For example, if in the table a column "Approve_Status" = 0. When displayed, the display is "Draft". Is there any way? Thank you so much!

PK Pradeep Kumar Balakrishnan Syncfusion Team May 7, 2020 04:58 PM UTC

Hi Son Hoang, 
 
Thank you for the update. 
 
we have checked your requirement “You want to display description instead of number for first table Approved status column like if value is 0 then you want to display Draft , if it is 1 then Submitted will be displayed” in Xamarin forms. We have prepared sample for your requirement. In that sample Table2 data will be maintained in View model collection and used converter to define value for GridTemplate column. 
Code Snippet: 
 
<sfgrid:SfDataGrid.Columns> 
    <sfgrid:GridTemplateColumn MappingName="OrderID" Width="100"> 
 
        <sfgrid:GridTemplateColumn.CellTemplate> 
            <DataTemplate> 
                <Label Text="{Binding OrderID,Converter= {StaticResource Key= CustomValue}, ConverterParameter= {x:Reference viewModel}}" TextColor="Blue"  
    XAlign="Center" YAlign="Center" /> 
            </DataTemplate> 
 
        </sfgrid:GridTemplateColumn.CellTemplate> 
    </sfgrid:GridTemplateColumn> 
 
    <sfgrid:GridTextColumn MappingName="CustomerID"/> 
    <sfgrid:GridTextColumn MappingName="EmployeeID"/> 
    <sfgrid:GridTextColumn MappingName="FirstName"/> 
    <sfgrid:GridTextColumn MappingName="ShipCountry"/> 
</sfgrid:SfDataGrid.Columns> 
 
[c#] 
public class CustomValue : IValueConverter 
    { 
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            var data = value as int?; 
 
            if(data != null) 
            { 
                var viewmodel = parameter as ViewModel; 
                //// Based on the column value fetched data from second table collection 
                var record = viewmodel.Table2.First(x => x.OrderID == data); 
 
                if(record != null) 
                { 
                    return record.Description; 
                } 
            } 
 
            return string.Empty; 
        } 
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            throw new NotImplementedException(); 
        } 
    } 
 
Please let us know if you need further assistance. 
 
Regards, 
Pradeep Kumar B 


SH Son Hoang May 8, 2020 10:08 AM UTC

Thanks for your feedback.

I have trouble right here. My Sfdatagrid's ItemSource is a DataView, including the inner datatable (DataView.Table).

In your example, this is a ObservableCollection .

I cannot bind the "Approve_Status" field to the Label in CellTemplate. This is my code. How to solve this case? 

If possible,please use code behind instead of XML.

Thank you so much!

My code :

+ Code celltemplate

 GridTemplateColumn gtc_Int32 = new GridTemplateColumn();

                                sfDataGrid.Columns.Add(gtc_Int32);

                                gtc_Int32.CellTemplate = new DataTemplate(() =>

                                {

                                    Label a = new Label();

                                    Binding binding = new Binding();

                                    binding.Path = "Approve_Status";

                                    binding.Converter = new ConverterForCommonCombobox();

                                    binding.ConverterParameter = dicDetailCommonColumnCombobox[dc.ColumnName].Values;

                                    binding.Mode = BindingMode.OneWay;

                                    a.SetBinding(Label.TextProperty, binding);

                                    return a;

                                });

+ Code ItemSource sfDatagrid

  ctr = new SfDataGrid();

  view = new DataView();

  view.Table = this.ViewModels.DtDataFormReturn.Rows.Count > 0 ? AddForClickHyperLink(AddForFilterUnicodeField(this.ViewModels.DtDataFormReturn)) :  this.ViewModels.DtDataFormReturn;

  var sfDataGrid = ((SfDataGrid)ctr);

  sfDataGrid.ItemsSource = view;


PK Pradeep Kumar Balakrishnan Syncfusion Team May 11, 2020 07:39 PM UTC

HI Son Hoang, 
 
Thank you for your patience.  
 
We have checked your update and modified the sample based on your requirement. In that sample we have created two datatable and they are joined based on the ApprovedStatus value and assigned the joined data table to DataGrid itemsource and changed ApprovedStatus value is modified in converter. Please refer the following code snippet for reference. 
 
Code Snippet: 
dataGrid.ItemsSource = viewModel.GetDataTable(); 
 
GridTemplateColumn templateColumn = new GridTemplateColumn() 
{ 
    MappingName = "ApprovedStatus", 
    Width = 200, 
}; 
         
var dataTemplate = new DataTemplate(() => 
{ 
    var label = new Label() 
    { 
        TextColor = Color.Blue, 
        VerticalOptions = LayoutOptions.Center, 
        HorizontalOptions = LayoutOptions.Center 
    }; 
 
    //// Binding path dot will bind entire row value as binding value. 
    label.SetBinding(Label.TextProperty, new Binding(".", converter: new CustomValue())); 
    return label; 
}); 
 
templateColumn.CellTemplate = dataTemplate; 
 
 
dataGrid.Columns.Add(new GridTextColumn() 
{ 
    MappingName = "OrderID", 
    Width = 100, 
}); 
dataGrid.Columns.Add(templateColumn); 
 
 
public class CustomValue : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        if (value != null) 
        { 
            var data = value as System.Data.DataRowView; 
                 
            if (data != null) 
            { 
                return data.Row.ItemArray.GetValue(2).ToString(); 
            } 
        } 
 
        return string.Empty; 
    } 
 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
} 
 
If this does not meet your requirement. Please provide complete details of datagrid itemsource in your application or revert the attached sample with modified datagrid itemsource like your application. 
 
Regards, 
Pradeep Kumar B 


SH Son Hoang May 12, 2020 02:47 AM UTC

Thanks for your answer,Pradeep Kumar B .
However, I find this solution not very satisfactory and very limited. Because sfDataGrid may have multiple columns, it is desirable to display as the "Approved_Status" column. Get data from the third column "Description" to represent the second column. What if the grid has 3 similar columns "Approved_Status"? .
My case is that sfDataGrid has many columns like "Approved_Status" that I want to display the column like this.
Again, the ItemSource of my sfDataGrid is a DataView.

+ My code :
 DataView dv = new DataView ();
 dv.Table = t1;
 sfDataGrid.ItemSource = dv;

 GridTemplateColumn gtc_Int32 = new GridTemplateColumn();
 gtc_Int32.MappingName = "Approved_Status";
 gtc_Int32.CellTemplate = new DataTemplate(() =>
 {
  Label a = new Label();
  a.SetBinding(Label.TextProperty, new Binding(".", converter: new ConverterForCommonCombobox()));
  return a;
 });
 sfDataGrid.Columns.Add(gtc_Int32);

+ My converter: 
class ConverterForCommonCombobox : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var data = value as int?;

            if (data != null)
            {
                var viewmodel = parameter as Dictionary<object,object>;

                var record = viewmodel[data];

                if (record != null)
                {
                    return record;
                }
            }

            return string.Empty;
        }
Variable "data" always null.
Very new solution from you. More thorough and clear and positive. Thank you so much!

SH Son Hoang May 12, 2020 08:39 AM UTC

I have made a demo for you to see.  LeaveCode and Approve_Status. 
Can you help me? Thank you so much!


               

Attachment: DemoSfDataGrid_21dc6b67.rar

PK Pradeep Kumar Balakrishnan Syncfusion Team May 12, 2020 12:57 PM UTC

Hi Son Hoang, 
 
Thank you for the update. 
 
We have checked your update and sample. In the attached sample you have defined only mapped column. We don’t know where to declare Description column value. Hence, we have altered sample to fetch description cell value from same datatable and from another datatable also used System.Data.DataSetExtensions package from Nuget for data processing in converter. Please refer the attached sample for more information. 
 
 
We hope this meets your requirement. Let us know if you need any further assistance on this. 
 
Regards, 
Pradeep Kumar B 


SH Son Hoang May 13, 2020 02:43 AM UTC

Thank you so much, Pradeep Kumar B.
I have tried and your solution works very well.
You helped me very much. Have a nice day!

SH Son Hoang May 13, 2020 10:05 AM UTC

Hello,.
The initial purpose of my show was completed. However, I encountered a new request.
That "Approve_Status" column is allowed to be selected as a DropdownList. 
Click on any cell in the "Approve_Status" column. 
A dropdownlist appears with the source as the values ​​that I want to display in the first request. 
The data after selecting from the dropdownlist will show the cell again, and the new data will be reattached to the datarowview. 
Is there any way, thank you very much!




PK Pradeep Kumar Balakrishnan Syncfusion Team May 14, 2020 02:31 PM UTC

Hi Son Hoang, 
 
Thank you for the update and happy to know that provided solution meets your requirement. 
 
we have checked your current requirement “How to display drop down while editing Approve status column and selected item should be replaced in dataview in Xamarin forms.” please share the following details to prepare sample for your requirement. 
 
  • Is ApproveStatus column and it’s description are in same datatable view which we bind to datagrid.
  • Are you displaying both approve status column and respective description column in datagrid or Approve status column is shown and description column is not generated and added in datagrid columns.
 
Please share the above details to validate and prepare sample for your requirement. 
 
Regards, 
Pradeep Kumar B 


SH Son Hoang replied to Pradeep Kumar Balakrishnan May 18, 2020 03:41 AM UTC

Chào Sơn Hoàng, 
 
Cảm ơn bạn đã cập nhật và vui mừng khi biết rằng giải pháp được cung cấp đáp ứng yêu cầu của bạn. 
 
chúng tôi đã kiểm tra yêu cầu hiện tại của bạn . Cách hiển thị thả xuống trong khi chỉnh sửa cột trạng thái Phê duyệt và mục đã chọn nên được thay thế trong dataview dưới dạng Xamarin. vui lòng chia sẻ các chi tiết sau đây để chuẩn bị mẫu cho yêu cầu của bạn. 
 
  • Là cột ApproveStatus và mô tả của nó nằm trong cùng một khung nhìn có thể truy cập được mà chúng ta liên kết với datagrid.
  • Bạn có hiển thị cả cột trạng thái phê duyệt và cột mô tả tương ứng trong cột dữ liệu hoặc cột trạng thái Phê duyệt được hiển thị và cột mô tả không được tạo và thêm vào cột cột dữ liệu.
 
Vui lòng chia sẻ các chi tiết trên để xác nhận và chuẩn bị mẫu cho yêu cầu của bạn. 
 
Trân trọng, 
Pradeep Kumar B 




Hello, Pradeep Kumar B.
After sending the question to you, I sat back and did a demo. 
Cell template of sfdatagrid column "Approve_Status", I have 1 sfcombobox. 
The source of sfcombobox is "leaveTable". 
I have used binding as shown to bind data to combobox. 
However, when I chose, I noticed that the cell template had been rendered many times and did not stop, this problem was a problem. Can you help me fix it?

Tệp đính kèm: DemoSfDataGrid_CP_674f859f.rar

PK Pradeep Kumar Balakrishnan Syncfusion Team May 19, 2020 04:06 PM UTC

HI Son Hoang, 
 
Thank you for the update and sample. 
 
We have checked the attached sample and found that application hanged when we select a value from combobox also text is not rendered while cell. Currently. we are analysing the attached sample, We will validate and provide solution for your requirement in two business days (May 21, 2020). We appreciate your patience until then.  
 
Regards,
Pradeep Kumar B

PK Pradeep Kumar Balakrishnan Syncfusion Team May 21, 2020 07:15 PM UTC

Hi Son Hoang, 
 
Thank you for our patience. 
 
We have analysed the sample and modified the sample to bind value to combobox. Combobox display value is Leave code description. 
 
Please read our analysis detail about provided sample it will be helpful to modify the attached sample based on your requirement. 
 
  • You are trying to bind combobox selected value from ApproveStatus value, it is not possible because combobox item source does not contains ApproveStatus value.
  • Combobox only aware of Leave table values because leave table values are added in observable collection of keys and this collection is datasource of combobox , you cannot do any action based on the Approve Status table in Combobox.
  • We can set the selected value for combobox based on the DataGrid row value. Please refer the ComboBox selected value binding and ComboBoxSelectedValueConverter in the attached sample.
  • We have changed the Leave code and Leave description value of DataGrid row when we changed ComboBox value in dropdown using combobox SelectionChanged event. because those two values are available in Combobox item source.
 
 
 
Regards, 
Pradeep Kumar B 


SH Son Hoang May 27, 2020 08:39 AM UTC 

Thank you so much, Pradeep Kumar B.


PK Pradeep Kumar Balakrishnan Syncfusion Team May 28, 2020 06:11 AM UTC

HI Son Hoang 
 
Thank you for the update. We are glad that requirement is achieved at your end with the provided solution. 
 
Regards, 
Pradeep Kumar B 
 


Loader.
Up arrow icon