弹出窗口在 Kendo UI 网格中的工作原理以及如何在 MVC4 的 Kendo UI ajax 网格中将控件带入弹出窗口

Posted

技术标签:

【中文标题】弹出窗口在 Kendo UI 网格中的工作原理以及如何在 MVC4 的 Kendo UI ajax 网格中将控件带入弹出窗口【英文标题】:How the pop up works in the KendoUI grid and how to bring the controls in the pop up in KendoUI ajax grid for MVC4 【发布时间】:2013-01-17 15:39:05 【问题描述】:

单击编辑按钮时弹出窗口的工作原理以及如何将三个Combobox带入弹出窗口。我真的对下面的代码感到困惑

Client side Code

    //show server errors if any
    function error_handler(e) 
        if (e.errors) 
            var message = "Errors:\n\n";
            $.each(e.errors, function (key, value) 
                if ('errors' in value) 
                    $.each(value.errors, function () 
                        message += this + "\n\n";
                    );
                
            );
            alert(message);
        
    


@(html.Kendo().Grid(Model)
    .Name("SchoolGrid")
    .Columns(columns =>
    
        columns.Bound(p => p.SchoolID).Width("80px");
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Campus).Width("90px");
        columns.Bound(p => p.StateCode).Width("90px");
        columns.Bound(p => p.SectorCode).Width("95px");
        columns.Bound(p => p.MDISurveyStartDate).ClientTemplate("#= (MDISurveyStartDate == null) ? 'Not Set' : kendo.toString(MDISurveyStartDate, 'dd/MM/yyyy') #").Width("90px");
        columns.Bound(p => p.MDISurveyEndDate).ClientTemplate("#= (MDISurveyEndDate == null) ? 'Not Set' : kendo.toString(MDISurveyEndDate, 'dd/MM/yyyy') #").Width("90px");
        columns.Command(command =>  command.Edit(); command.Destroy(); ).Width("190px").HtmlAttributes(new  style = "text-align:center" );
    )
    .ToolBar(tb => tb.Create().Text("Add New School"))
    .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("EditSchool").Window(w => w.Title("Add/Edit School Details").Name("editWindow").Width(600)))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.ClientID))
        .Events(e => e.Error("error_handler"))
        .Read("Read_Schools", "School")
        .Update("Update", "School")
        .Create("Create", "School")
        .Destroy("Destroy", "School")
    )
)


Server Side Code:-

        [HttpPost]
        public ActionResult Update([DataSourceRequest] DataSourceRequest request, School school)
        
            try
            
                if (ModelState.IsValid)
                
                    string errMsg = "";
                    if (!_Service.UpdateSchool(school, out errMsg))
                        ModelState.AddModelError("UpdateSchool", errMsg);
                
            
            catch (Exception ex)
            
                ModelState.AddModelError("UpdateSchool", ex.Message);
            

            return Json(ModelState.ToDataSourceResult());
        

【问题讨论】:

【参考方案1】:

There is code library 显示如何操作 Window 的内容。其余的编辑可以通过 Grid 的 edit 事件进行(查看文档)。

【讨论】:

以上是关于弹出窗口在 Kendo UI 网格中的工作原理以及如何在 MVC4 的 Kendo UI ajax 网格中将控件带入弹出窗口的主要内容,如果未能解决你的问题,请参考以下文章

防止kendo ui网格弹出编辑器在验证错误后关闭

剑道网格未在弹出窗口中显示

Kendo Grid - 从弹出窗口编辑后刷新行

ASP.NET MVC Kendo UI Edit Popup Internet Explorer Date Edit Problems

来自弹出编辑器的Kendo UI绑定下拉值

Kendo UI Grid - 客户端模板:转义 # 符号