FileUpload in Grid column template

[Aleksandrs]

Hello!

Are there any samples how to use FileUpload in Grid edit mode?

I need to upload image when record is created or edited and keep uploaded image path in Grid DataSource record.

So i have view and edit templates in a column description (but edit doesn't work).

<GridColumn Field=@nameof(ExerciseModel.ImageUrl) HeaderText="Name" Width="150">

            <Template>

                @{

                    var imageUrl = (context as ExerciseModel).ImageUrl;

                    <img src="@imageUrl" class="rounded"/>

                }

            </Template>

            <EditTemplate>

                @{

                    var imageId = (context as ExerciseModel).Id;

                    var SaveUrl = $"api/FileUpload/Save/{imageId}";

                    <EjsUploader AllowedExtensions=".jpg, .jpeg, .png" MaxFileSize="1000000" Multiple="false">

                        <UploaderAsyncSettings SaveUrl="@SaveUrl" ></UploaderAsyncSettings>

                    </EjsUploader>

                }

            </EditTemplate>

            

        </GridColumn>

[Vignesh Natarajan]

Hi Aleqsandrs,  

 

Thanks for contacting Syncfusion support.  

 

Query: “I need to upload image when record is created or edited and keep uploaded image path in Grid DataSource record.” 

 

From the code example we have noticed that you have displayed image in grid using image source(imageUrl property), if the imageUrl property contains the uploaded image source path then we need to update the newly added/uploaded image source path to display in grid cell during edit/add operations.  

 

We can achieve this requirement using OnActionBegin event of EjsGrid when RequestType is Save. Once a file is uploaded, save the file url (file location in your scenario) in a variable. While updating the record, assign that value to Grid data using the event Arguments.   

 

Refer the below code example.  

 

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

    <GridEvents OnActionBegin="BeginHandler" TValue="Order"></GridEvents> 

. . . . .. . .  . . . . . . . . ..  

    </GridColumns> 

</EjsGrid> 

@code{ 

    public string UploadedFile { get; set; } 

    public void BeginHandler(ActionEventArgs<Order> Args) 

    { 

        if (Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save) 

        { 

            //save the file name / url in grid datasource. 

            Args.Data.Imagesrc = <Kindly save the uploaded image url here>; 

        } 

    } 

 

Refer our UG documentation for your reference 

 

https://ej2.syncfusion.com/blazor/documentation/grid/events/#onactionbegin  

 

Kindly get back to us with more details about the image source property(imageUrl) type and actual value stored in that property, if you are facing any difficulties in achieving your requirement using above solution.  

 

Regards, 

Vignesh Natarajan