Fail to display image in grid

[Sao]

Hello,

I am trying to display image save in SQL Server table as varbinary(MAX). My class is as follow

public class DVSubmit

{

    public int ID { get; set; }

    public int? IDX { get; set; }

    public int? Yr { get; set; }

    public string? Remark { get; set; }

    public byte[] PIC { get; set; }

    public DateTime? DateCheck { get; set; }

}

My Sfgrid is as follows:

<SfGrid DataSource="@ListJobTitle">

    <GridColumns>

        <GridColumn Field=@nameof(DVSubmission.ID) HeaderText="ID" IsIdentity=true IsPrimaryKey=true TextAlign="TextAlign.Right" Width="20" Visible=true></GridColumn>

        <GridColumn Field=@nameof(DVSubmission.Yr) HeaderText="Year" TextAlign="TextAlign.Right" Width="20" Visible=true></GridColumn>

        <GridColumn Field="@nameof(DVSubmission.PIC)" Width="30">

        </GridColumn>

        <GridColumn Width="60">

            <Template>

                @{

                    var part = (context as DVSubmission);

                    var imageSrc = String.Format("data:image/png;base64,{0}", part.PIC);

                    <img src="@imageSrc" height="48" width="48" />

                }

            </Template>

        </GridColumn>

    </GridColumns>

</SfGrid>

@code {

    public IEnumerable<DVSubmission> ListJobTitle { get; set; }

    protected override void OnInitialized()

    {

        ListJobTitle = MyDBServices.GetDVSubmissionList();

    }

}

Here is the result that I get

Please help

Sao

[Monisha Saravanan]

Hi Sao,

Greetings from Syncfusion support.

We suspect that your requirement is to display image in DataGrid. Here we have used the image file to find its byte[] and then we have converted it to a base64 string and displayed as an image. Similarly, we suggest you convert the Byte[] into base64 string and display in the Grid cell. Kindly check the attached code snippet for your reference.

<GridColumn HeaderText="Foto" Width="auto">

 

    <Template>

 

        @{

                    var logos = (context as Table1abc);

                    var t = @logos.Fotos;

                    if (t != null)

                    {

                        string imreBase64Data = Convert.ToBase64String(t);

                        string imgDataURL = string.Format("data:image/png;base64,{0}", imreBase64Data);

                        <div class="image">

                        <img src="@(imgDataURL)" alt="Fotos" />

                    </div>

                    }

                }

            </Template>

          </GridColumn>

If your query is not resolved or if you face further issues kindly get back to us with the issues faced at your end.

Regards,

Monisha

[Sao]

Dear Monisha,

Thank you for providing me the solution. I can visualize the picture now.

However, I have one more request, Could you please advise me on how to add or add new pictures to the sql table field? 

Thank and best regards

Sao

[Monisha Saravanan]

Hi Sao,

Welcome.

Query: “I have one more request, Could you please advise me on how to add or add new pictures to the sql table field? ”

We suggest you to use SfUploader in EditTemplate to upload an image. We have documented this in the below UG section. Kindly refer the attached code snippet and documentation for additional information.

 

<SfGrid AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

        <GridColumn Field="Imagesrc" HeaderText="Customer Name" Width="200">

            <EditTemplate>     @*for rendering SfUploader component in EditTemplate for uploading the image during Adding/Editing*@

                <SfUploader ID="uploadFiles" AllowedExtensions=".jpg,.png,.jpeg" Multiple="false">

                    <UploaderEvents FileSelected="Selected" ValueChange="OnChange"></UploaderEvents>

                </SfUploader>

            </EditTemplate>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code{

    public int? DefaultValue = 100;

    public string UploadedFile { get; set; }

    public void BeginHandler(ActionEventArgs<Order> Args)

    {

        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save && Args.Action == "Add")

        {

            //Args.Data.OrderID = DefaultValue++;    //set the default value while adding.

            //save the file name / url in grid datasource / your database. You can generate the byte and store here.

           // Args.Data.Imagesrc = "scripts/Images/Employees/"+UploadedFile;

        }

    }

   

}

 

Also kindly refer this forum for additional information.

Reference: https://blazor.syncfusion.com/documentation/datagrid/template-editing#use-fileuploader-in-grid-dialog-edit-template

Please let us know if you face any difficulties.

Regards,

Monisha