1. Home
  2. Forum
  3. Blazor
  4. Insert image column

Insert image column

Hi

One of my database items contains a string that converts to a bitmap. OnRowDataBound event I convert the string to an image and substitute that as the column value.

After rendering grid simple displays 'System.Drawing.Bitmap'.

Can you kindly advise me?

Regards

Michael W   

6 Replies
RN Rahul Narayanasamy Syncfusion Team April 6, 2020 11:22 AM UTC

Hi Michael, 

Greeting from Syncfusion. 

Query: Insert image column 

We have validated your query and you want to insert an image in one of the columns of the Grid. You can achieve your requirement by using Column Template. Find the below documentation link and demo link for your reference. 

[code snippets] 
<SfGrid DataSource="@Employees"> 
    <GridColumns> 
        <GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120"> 
            <Template> 
                @{ 
                    var employee = (context as EmployeeData); 
                    <div class="image"> 
                        <img src="@($"scripts/Images/Employees/{employee.EmployeeID}.png")" alt="@employee.EmployeeID" /> 
                    </div> 
                } 
            </Template> 
        </GridColumn> 
        . . . 
   </GridColumns> 
</SfGrid> 
 
@code{ 
    . . . 
} 

Reference:  

Demo link:  

Please get back to us if you need further assistance. 

Regards, 
Rahul 


MW Michael Wilson April 7, 2020 09:31 PM UTC

Thank you quick response.

So you are telling me it is not possible to display an image unless it is physically stored as a file. This is very disappointing I have thousands of images stored in a database saved as a string and wish to display them as a column in a grid.

public static Bitmap StringToImage(string str)
{
     byte[] bytes = Convert,ToBase64String(str);
     using(var ms = new MemeoryStream(bytes);
     {
          return new Bitmap(ms);
     }
}

Thank you anyway :)

MW Michael Wilson April 7, 2020 10:18 PM UTC

Hi Again

I have found by looking through your newer posting how to do this thank you. Thanks again.

            <GridColumn Width="60">
                <Template>
                    @{ 
                        var part = (context as Participant);
                        var imageSrc = String.Format("data:image/png;base64,{0}",part.Icon);
                        <img src="@imageSrc" height="48" width="48"/>
                    }
                </Template>
            </GridColumn>

RN Rahul Narayanasamy Syncfusion Team April 8, 2020 05:28 AM UTC

Hi Michael, 

We are happy to hear that you have achieved your requirement. Please get back to us if you need further assistance. 

Regards, 
Rahul 


BD Bob Dunaway May 22, 2020 02:26 AM UTC

How do we get this image column to export to excel with the rest of the grid?

RN Rahul Narayanasamy Syncfusion Team May 22, 2020 10:55 AM UTC

Hi Bob, 
 
Greetings from Syncfusion. 
 
Query: How do we get this image column to export to excel with the rest of the grid? 
 
We have validated your query and you want to export the image column cells to excel. Currently we don’t have support for export the template cell columns. We have considered this “Provide template cell exporting support for Excel Export” as an feature and added this feature request to our database. We are always trying to make our products better and feature requests like yours are a key part of our product  
growth efforts. We have planned to implement this in any of our upcoming releases. 
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.   
 
 
Please get back to us if you need further assistance.  
 
Regards, 
Rahul 
 


Loader.
Up arrow icon