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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

FileUpload in Grid column template

Thread ID:

Created:

Updated:

Platform:

Replies:

151021 Jan 28,2020 12:22 PM UTC Jan 29,2020 10:17 AM UTC Blazor 1
loading
Tags: Grid
Aleksandrs
Asked On January 28, 2020 12:22 PM UTC

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 [Syncfusion]
Replied On 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> 
. . . . .. . .  . . . . . . . . ..  
    </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 
 
 
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon