Hello,
I have a grid with multiple column, and I have a column that I want to use to store the file path.
I want to be able to upload the file from the dialog edit mode like image bellow
I want that the file will be uploaded to the server side after clicking on Add.
Thanks a lot for your help
|
<SfGrid AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
<GridEvents OnActionBegin="BeginHandler" TValue="Order"></GridEvents>
<GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true"></GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" EditType="EditType.NumericEdit" Format="C2" Width="140" TextAlign="@TextAlign.Right"></GridColumn>
<GridColumn Field="Imagesrc" HeaderText="Customer Name" Width="200">
<Template> @*for showing the image in Grid column*@
@{
var imageUrl = (context as Order).Imagesrc;
<div class="image">
<img src="@imageUrl" />
</div>
}
</Template>
<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;
} else if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save && Args.Action == "Edit")
{
//save the file name / url in grid datasource. You can generate the byte and store here.
Args.Data.Imagesrc = "scripts/Images/Employees/" + UploadedFile;
}
}
public void Selected(SelectedEventArgs Args)
{
UploadedFile = Args.FilesData[0].Name;
}
public void OnChange(UploadChangeEventArgs args)
{
foreach (var file in args.Files)
{
var size = file.FileInfo.Size;
var path = @"./wwwroot/scripts/Images/Employees/" + file.FileInfo.Name;
FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);
file.Stream.WriteTo(filestream);
filestream.Close();
file.Stream.Close();
}
}
. . .
}
|
Thank you very much. that's what I'm looking for
