Question

我一直在使用KENDO MVC Grid Control。以下是我的要求。

在一个页面中，有多个KENDO MVC网格，在某些网格中，我有Add＆amp;更新命令。我需要在将行提交给控制器之前显示“确认模型”对话框。我没有发现任何事件要这样做。

请帮忙。谢谢。下面是我的MVC网格代码

    @(Html.Kendo().Grid<iMAP.SRT.Core.SRTPRODUCT>()
    .Name("SRT")
    .Columns(columns =>
    {
    columns.Command(command => { command.Edit(); }).HeaderHtmlAttributes(new { @class = "headercolumn" }).Width(130);
    columns.Bound(c => c.ACTIVE).Title("ACTIVE").HeaderHtmlAttributes(new { @class = "headercolumn" }).ClientTemplate("<input type='checkbox' #= ACTIVE ? checked='checked' :'' # />").Width(60);
    columns.Bound(c => c.CODE).Title("PRODUCT CODE").HeaderHtmlAttributes(new { @class = "headercolumn" }).Width(120);
    columns.Bound(c => c.DESCR).Title("DESCRIPTION").HeaderHtmlAttributes(new { @class = "headercolumn" }).Width(360);

    })
    .ToolBar(toolbar => { toolbar.Create(); })
    //.ToolBar(toolBar => toolBar.Template(@"<a id='addSome' class='k-button k-button-icontext k-grid-add' onclick='PDSBOMResults();'><span class='k-icon k-add'></span>Add new record</a>"))
    .Editable(editable =>
    {
    editable.Mode(GridEditMode.InLine).Window(window =>
    {
    window.HtmlAttributes(new { @class = "k-window-titlebar;k-window-title;k-grid-update;k-grid-cancel;k-window-action;k-icon k-update;" });
    });

    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .HtmlAttributes(new { style = "height:500px;" })
    .Groupable()
    .Scrollable(scrollable => scrollable.Virtual(true))
    .Selectable(selectable => selectable
    .Mode(GridSelectionMode.Multiple))
    .Filterable()
    //.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .Resizable(resize => resize.Columns(true))
    .Events(x => x.Edit("popupProductsModule").DataBound("onGrisDataBound"))
    //.Events(events => events.Edit(@<text>function (e) {if (e.model.isNew() == false) {$("#CODE").attr("readonly", true);$("#CREATED").attr("hidden", true);$("#CREATEDBY").attr("hidden", true);$("label[for='CREATED']").attr("hidden", true);$("label[for='CREATEDBY']").attr("hidden", true)}}</text>))

    .DataSource(dataSource => dataSource
    .Ajax()
    .Events(events => events.RequestEnd("onRequestEndForProducts"))
    .Model(model =>
    {
    model.Id(p => p.PRODUCTID);
    model.Field(p => p.CODE).Editable(true);
    }
    )
    .Create(update => update.Action("InsertKBProducts", "SrtProject").Data("passParamsForInsertKBProducts"))
    .Read(read => read.Action("GetKBProducts", "SrtProject").Data("getMainProductdetailsParams"))
    .Update(update => update.Action("UpdateKBProducts", "SrtProject").Data("passParamsForUpdateKBProducts"))
    .Destroy(update => update.Action("DeleteKBProducts", "SrtProject"))
    )

    )

Answer 1

@(Html.Kendo().Grid(new List<ViewModel>())
.Name("SRT")
.Columns(columns =>
{
    // -> Commands Added newly
    columns.Command(command => { command.Edit().Text(" ").UpdateText(" ").CancelText(" "); }).HeaderHtmlAttributes(new { @class = "headercolumn" }).Width(130);

    //columns.Bound(c => c.ACTIVE).Title("ACTIVE").HeaderHtmlAttributes(new { @class = "headercolumn" }).ClientTemplate("<input type='checkbox' #= ACTIVE ? checked='checked' :'' # />").Width(60);

    columns.Bound(c => c.InvoiceType).Title("PRODUCT CODE").HeaderHtmlAttributes(new { @class = "headercolumn" }).Width(120);
    columns.Bound(c => c.InvoiceDate).Title("DESCRIPTION").HeaderHtmlAttributes(new { @class = "headercolumn" }).Width(360);
})
.ToolBar(toolbar => { toolbar.Create(); })
    //.ToolBar(toolBar => toolBar.Template(@"<a id='addSome' class='k-button k-button-icontext k-grid-add' onclick='PDSBOMResults();'><span class='k-icon k-add'></span>Add new record</a>"))
.Editable(editable =>
{
    editable.Mode(GridEditMode.InLine).Window(window =>
    {
        window.HtmlAttributes(new { @class = "k-window-titlebar;k-window-title;k-grid-update;k-grid-cancel;k-window-action;k-icon k-update;" });
    });
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
 // -> Events Added newly
.Events(events => { events.Save("OnCreateUpdateModal"); })
.HtmlAttributes(new { style = "height:500px;" })
.Groupable()
.Scrollable(scrollable => scrollable.Virtual(true))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Filterable()
    //.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Resizable(resize => resize.Columns(true))
    //.Events(x => x.Edit("popupProductsModule").DataBound("onGrisDataBound"))
    //.Events(events => events.Edit(@<text>function (e) {if (e.model.isNew() == false) {$("#CODE").attr("readonly", true);$("#CREATED").attr("hidden", true);$("#CREATEDBY").attr("hidden", true);$("label[for='CREATED']").attr("hidden", true);$("label[for='CREATEDBY']").attr("hidden", true)}}</text>))
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.RequestEnd("onRequestEndForProducts"))
.Model(model =>
{
    model.Id(p => p.InvoiceGuid);
    model.Field(p => p.InvoiceType).Editable(true);
}
)
.Create(update => update.Action("InsertKBProducts", "SrtProject").Data("passParamsForInsertKBProducts"))
.Read(read => read.Action("GetKBProducts", "SrtProject").Data("getMainProductdetailsParams"))
.Update(update => update.Action("UpdateKBProducts", "SrtProject").Data("passParamsForUpdateKBProducts"))
.Destroy(update => update.Action("DeleteKBProducts", "SrtProject"))
))

<script>
        function OnCreateUpdateModal(e) {
            //e.model -> will has all values corresponding to that row             
            //Instead Confirm dialog, Load partial view by sending e.model and display all values with certain tabular format
            if (confirm("Change product code to : " + e.model.InvoiceType + "?") == true) {
                //Internally kendo Create / Update action will get call
                //refresh the grid once data get binded.
                $('#SRT').data('kendoGrid').refresh();
            }
            else {
                var grid = $("#SRT").data("kendoGrid");
                //this action will prevent user from saving data ie stops request to hit controller action Create / Update.
                grid.one("dataBinding", function (e) {
                    e.preventDefault();   // cancel grid rebind
                });
                return false;
            }
        }

</script>

在Kendo MVC Grid行的Update / Add上显示Confirm Model对话框

1 个答案: