DataGrid Cell BackGround Color

[Sarah]

Hello,

I use the following dto:

public class mydto

{

public int Id { get; set; }

public string Name{ get; set; }

public string Color{ get; set; }

}

public List lstDataSource{ get; set; }

lstDataSource " ....

1-The color value is displayed in the color cell. How can I set the background color of the cell to mydto.color?

2-I used ColorPicker. Unfortunately, when displaying SfColorPicker , the color that is strColor is not given the initial value. By default, green color is displayed.

public string strColor{ get; set; }="#008040ff";

3-In multilingual site, ColorPicker does not work properly when the user selects rtl language.

[Naveen Palanivel]

Hi Sarah,

Query 1: “The background color of the cell”

We checked your query, we can customized the cell by using the CSS Styles and  QueryCellInfo event of the grid to achieve your requirement and we have already discussed about this  similar topics detailly in our UG documentation. Kindly refer  the documentation for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/cell#customize-cell-styles

Query 2 : “SfColorPicker”

We are currently Validating  the reported query  and we will update the further details shortly

Regards,

Naveen Palanivel

[Naveen Palanivel]

Hi Sarah,

Query 1: 2-I used ColorPicker. Unfortunately, when displaying SfColorPicker , the color that is strColor is not given the initial value. By default, green color is displayed.

By using the value property of the color picker, you can achieve your requirements. Please refer to the below UG link.

Link: https://blazor.syncfusion.com/documentation/color-picker/mode-and-value#color-value

Query 2: In multilingual site, ColorPicker does not work properly when the user selects rtl language.

We have attempted to replicate the issue on our end but were unable to do so. We have prepared a sample based on your provided details. It is working fine on our end. Please refer to the attached sample below.

If you are still facing issues, could you please share the issue's replicable sample or replicate the issue in our sample with replication steps and a video demonstration? Based on that, we will check and provide you with a better solution quickly.

Regards,

Naveen Palanivel

Attachment: ColorPicker_cde2bca3.zip

[Sarah]

Hi,

By using the value property of the color picker, you can achieve your requirements. Please refer to the below UG link.

Thanks for your follow up .I have seen this link before. My data is remote data and I bind dto to components. I used value, but unfortunately, it is not possible to use bind-Value and Value at the same time. After the user changes the data, I have to save it on the server side, that's why I have to use Bind-value.

[Monisha Saravanan]

Hi Sarah,

Instead of utilizing the @bind-value directive, we recommend using the ValueChange property on your end. This event will be triggered when the value is changed in the SfColorPicker and it allow us to capture the newly selected color and we can save it to the server within the ValueChange event. Kindly check the below attached code snippet and documentation for your reference.

 

<h4>Choose a color</h4>

<SfColorPicker Value="035a" ValueChange="ValueChange"  Inline="true" ShowButtons="false">

  

</SfColorPicker>

@code {

    public void ValueChange(ColorPickerEventArgs args)

    {

        // You will get the changed value here and you can save the value to the server

    }

 

Reference: Customize Color Picker in Blazor Color Picker Component | Syncfusion

Please let us know if you have further queries or if you face any difficulties.

Regards,

Monisha