I am trying to add a Telerik Upload to a Telerik Grid Create option. This is currently what I have.
@(
Html.Kendo().Grid<EFCoreScaffoldSPACS.Models.Jobs>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.JobId).Filterable(false).Visible(false);
columns.Bound(p => p.LocationId).Filterable(false).Visible(false);
columns.Bound(p => p.JobName).Title("Event");
columns.Bound(p => p.StartDateTime).Title("Starts").Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.EndDateTime).Title("Ends").Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.Active);
columns.Command(command => { command.Edit().Text(" ").HtmlAttributes(new { @class = "edit-location" }); }).HtmlAttributes(new
{
style = "text-align: center;"
});
})
.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("Event"))
.ToolBar(t =>
{
t.ClientTemplateId("GridToolbarTemplate");
})
.Resizable(resize => resize.Columns(true))
.Sortable()
.Scrollable(s => s.Enabled(false))
.Pageable(pageable => pageable
.ButtonCount(5)
.Refresh(true)
.PageSizes(new[] { 20, 50, 100, 500 }))
.AutoBind(true)
.Reorderable(reorder => reorder.Columns(true))
.Filterable()
.Events(ev => ev.DataBound("onDataBound"))
.HtmlAttributes(new
{ style = "min-height: 600px; height: 100%;" })
.ColumnMenu()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Events(ev => ev.RequestEnd("onRequestEnd"))
.Model(model => model.Id(p => p.JobId))
.Read(read => read.Action("Read", "Events").Data("getMecFilterLocal"))
.Create(update => update.Action("Create", "Events").Data("getFilters").Type(HttpVerbs.Post))
.Update(update => update.Action("Update", "Events").Data("forgeryToken").Type(HttpVerbs.Post))
.Destroy(update => update.Action("Delete", "Events").Data("forgeryToken").Type(HttpVerbs.Post))
)
)
<script id="GridToolbarTemplate" type="text/x-kendo-template">
<div class="toolbar topbar">
<div class="box1" style="float:left;">
@(Html.Kendo().DropDownList()
.Name("mecList")
@* .OptionLabel("- Pilot Group -") *@
.DataTextField("AirMne")
.DataValueField("PortalId")
.AutoBind(true)
.Events(e => e.Change("onMecFilterChange"))
.Events(e => e.DataBound("onMecDataBound"))
.HtmlAttributes(new { style = "width: 140px;" })
.DataSource(ds =>
{
ds.Read("GetMecList", "App");
})
.ToClientTemplate()
)
<span>
<button class="add-locationadhoc k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button k-toolbar-button" type="button" role="button" aria-disabled="false" tabindex="0" " style="" onclick="addlocationadhoc()"><span class="k-icon k-svg-icon k-button-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.0272 14.9727 4.5 19.4998M21.5307 9.2195a.75.75 0 0 0 0-1.0603l-5.6869-5.6897a.75.75 0 0 0-1.0603 0L9.4116 7.8564s-2.6015-1.3003-5.3803.9422a.75.75 0 0 0-.061 1.1165L14.086 20.0298a.75.75 0 0 0 .5801.2159.749.749 0 0 0 .5449-.2937c.7866-1.0463 2.0222-3.1959.9478-5.3438z" fill="none"/></svg></span> </button>
</span>
<span class="custom-tb-btn">
<button data-role="create" class="add-location k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button k-toolbar-button k-grid-add k-toolbar-tool" type="button" role="button" aria-disabled="false" tabindex="0" data-command="create" data-uid="eae6b89d-b018-478a-a593-0a1b6624fd16" style=""><span class="k-icon k-svg-icon k-svg-i-plus add-top-level k-button-icon" aria-hidden="true"><svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg"><path d="M288 224V96h-64v128H96v64h128v128h64V288h128v-64H288z"></path></svg></span> </button>
</span>
<span class="custom-tb-btn">
<button data-role="excel" class="export-location k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button k-toolbar-button k-grid-excel k-toolbar-tool" type="button" role="button" aria-disabled="false" tabindex="0" data-command="excel" data-uid="b4774ee4-ba1e-467c-8534-d9b5cea267ef"><span class="k-icon k-svg-icon k-svg-i-file-excel k-button-icon" aria-hidden="true"><svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg"><path d="m288 304 64 112h-48l-48-84.5-31.5 52.5H256v32h-96l64-112-64-112h48l48 84 48-84h48l-64 112zm64-272H96c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32V128l-96-96zm64 416H96V64h224v96h96v288z"></path></svg></span> </button>
</span>
</div>
<div class="box3">
<span class="k-searchbox k-input k-input-md k-rounded-md k-input-solid k-grid-search">
<span class="k-input-icon k-icon k-i-search"></span>
<input id="search-box" autocomplete="off" placeholder="Search..." title="Search..." class="k-input-inner">
</span>
</div>
</div>
</script>
<script>
function getFilters() {
var Mec = $("#mecList").data("kendoDropDownList").value();
var bannerImageUpload = $("#bannerImageUpload").data("kendoUpload");
return {
__RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
Mec: Mec,
bannerImageUpload: bannerImageUpload,
};
}
</script>This is my controller
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> CreateAsync([DataSourceRequest] DataSourceRequest request, Jobs model, int Mec, IEnumerable<IFormFile> bannerImageUpload)
{
model.PortalId = Mec;
model.CreateDate = DateTime.Now;
model.CreateUser = _httpContextAccessor.HttpContext?.User?.Identity?.Name;
try
{
_context.Jobs.Add(model);
await _context.SaveChangesAsync();
_toastNotification.AddSuccessToastMessage("Event Added");
}
catch (Exception ex)
{
_logger.LogError(ex, "Failed to add event");
_toastNotification.AddErrorToastMessage("Failed: " + ex.Message, new ToastrOptions { ExtendedTimeOut = 0 });
}
return Json(new[] { model }.ToDataSourceResult(request, ModelState));
}
Hi Charlston,
I would suggest review the following knowledge base articles that describe how the Upload can be added in the Grid popup:
- https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base/grid-editing-upload-in-popup
- https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base/upload-files-from-grid-popup
Please review and try the suggestions from the articles and let me know in case you have any additional questions on the matter.
Regards,
Neli
Hi Charlston,
You do not need to use .AutoUpload(true) if you want to upload the file only when the user presses the "Save" button. By default, the Upload component does not automatically upload files unless you explicitly set .AutoUpload(true). If you want manual control, set .AutoUpload(false) or simply omit the option.To trigger the upload when the "Save" button is pressed, use the Upload component’s upload() method inside your button click handler. Here’s a small example:
@(Html.Kendo().Upload() .Name("Files") .Async(a => a .Save("Async_Save", "Upload") .Remove("Async_Remove", "Upload") .AutoUpload(false) // Disables auto-upload ) ) @(Html.Kendo().Button() .Name("saveBtn") .Content("Save") .Events(ev => ev.Click("onSaveClick")) ) <script> function onSaveClick() { var upload = $("#Files").getKendoUpload(); upload.upload(); // Starts upload manually } </script>Regards,
Neli
Hi Charlston,
I would recommend using a separate controller action for the Upload, as shown in the examples. The Upload sends the file in a separate request from the Grid data.
To start both from the Grid’s Save button, set .AutoUpload(false) and add custom logic to upload the image first. Once the upload succeeds, pass the returned image ID with the Grid data to link it to the event.
Regards,
Neli