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

Subscribe to this post

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).

var imageUrl = (context as ExerciseModel).ImageUrl;

}

</Template>

var imageId = (context as ExerciseModel).Id;

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

</EjsUploader>

}

</EditTemplate>

</GridColumn>

Reply | Reply with quote

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

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

Reply | Reply with quote

FileUpload in Grid column template

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US