We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

FileUpload in Grid column template


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">
                    var imageUrl = (context as ExerciseModel).ImageUrl;
                    <img src="@imageUrl" class="rounded"/>
                    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>


1 Reply

VN Vignesh Natarajan Syncfusion Team January 29, 2020 10:17 AM UTC

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> 
. . . . .. . .  . . . . . . . . ..  
    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 
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.  
Vignesh Natarajan 

Live Chat Icon For mobile
Up arrow icon