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

Posted 2023-05-07

【中文标题】弹出窗口在 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 事件进行（查看文档）。