I have a grid where I have a popup form defined to edit a row. Everything (finally) is working correctly *EXCEPT* the In-Progress spinner never displays upon submit.
Grid definition:
@(Html.Kendo().Grid<
BomViewModel
>()
.Name("bom-prGrid-kendoGrid")
.HtmlAttributes(new {@class = "prGrid"})
.ClientRowTemplate("")
.Columns(columns =>
{
if (Model.StatusDisplay.Equals("Started")) { columns.Command(cmd => cmd.Edit()).Width(80); }
columns.Bound(g => g.BomId).Hidden();
columns.Bound(g => g.IsEditable).Hidden();
columns.Bound(g => g.Row).Width(75).Title("Row");
//... Some columns removed for brevity ...//
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => { model.Id(g => g.BomId); })
.PageSize(100)
.Read(r => r.Action("GetCloneAssembly", "AjaxProductReuse").Data("ProductReuseGridReadData"))
.Update(u => u.Action("UpdateBomItem", "AjaxProductReuse").Type(HttpVerbs.Post).Data("getUpdatedBomRowData"))
.Events(e => e.Error("ajax_error").Sync("dataSource_sync").Change("dataSource_change"))
)
.Events(e => e.DataBound("onDataBound").Edit("onEdit").Save("onSave"))
.Pageable(pager => pager
.Input(true)
.Numeric(true)
.Info(true)
.PreviousNext(true)
.Refresh(true)
.PageSizes(new int[] {100, 250, 500, 1000})
)
.ToolBar(toolbar =>
{
toolbar.Template(
@<
text
>
<
div
class
=
"container-fluid otherElements"
style
=
"padding-top: 5px; padding-bottom: 5px;"
>
@Html.Partial("_CloneAssembly", Model)
</
div
>
</
text
>);
})
.Excel(excel => excel.FileName("ClonableBom.xlsx").Filterable(true).AllPages(true).ProxyURL(Url.Action("ExcelProxy", "AjaxProductReuse")))
.Sortable()
.Scrollable()
.Filterable()
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("BOMForm").Window(w => w.Title("Manage BOM Item").Name("BOMForm")))
.Resizable(resizing => resizing.Columns(true)).Reorderable(reorder => reorder.Columns(true))
)
Javascript:
// Events as defined by the grid's .Event(...) settings...
function
onEdit(e) {
//Bind deactivate event to the Popup window to support conditional formatting
e.container.data(
"kendoWindow"
).bind(
"deactivate"
,
function
() { conditionalFormattingAll(); });
}
function
onSave(e) {
debugger;
kendo.ui.progress(e.container,
true
);
}
// End events...
Maybe I misunderstood all the docs, forums and such but the onSave(e) event handler should display a progress gif while the ajax call is in progress. Am I completely off base here?