FluentDataGrid, use byte[] with PropertyColumn

[andrewwang1tw]

Does FluentDataGrid support img from byte[] ?

Content1 is the byte[] retrieved from database.

Below code only shows "System.Byte[]" on FluentDataGrid , not the really content

<PropertyColumn Property="@(c => c!.Content1)" />

<TemplateColumn Title="Picture" >
    <div class="flex items-center">
        <img class="flag" src="data:image/jpg;base64, @(context.Content1)" />
        <nobr>
            <strong>@context.Name</strong>
        </nobr>
    </div>
</TemplateColumn>

The result is as attached file

[vnbaaij]

I'm guessing you need to do something with encoding/decoding. Can you display the images in plain html like in an unordered list?

[andrewwang1tw]

Will try it later, but below code shows "System.Byte[]". It seems the first problem.

<PropertyColumn Property="@(c => c!.Content1)" />

[vnbaaij]

What else would you expect that to display? The property column uses ToString() method internally and for this array that will return the type/. You will need to do some work there to get it to display the value.

[andrewwang1tw]

the byte[] from database look like

Finally, the content is ok but the <img src=> still not work

[andrewwang1tw]

Finally, it works...

[vnbaaij]

Can you post the solution here (for the good of the community). Thanks

[andrewwang1tw]

Here is the solution...

1. database side, the data type is byte[]

2. Web API side, I convert it to Base 64 string as below

"data:image/jpg;base64," + Convert.ToBase64String(c.Content1!) 

3. FluentDataGrid side, I use the "remote data" sample, we already have the base64 string, just set it on attribute "src" of "IMG" tag

 <TemplateColumn Title="Picture" >
     <div class="flex items-center">
         <img src="@context.Content1" />

The weird thing is if you use the byte[] data directly, the result will be the data type not the data content. I do not know why ?

It is just as you said. Needs to encode first (converted and return the base64 "string" not return the byte[])