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));
}