ASP MVC Kendo网格中的下拉列表无法打开

时间:2017-04-13 18:15:32

标签: asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc

我正在尝试使用“类别”列准确复制this Kendo demo page上的内容。只需一个网格内的下拉列表。我完全复制了他们所有的源代码,但是当我用下拉列表单击列时,网格就会闪烁。我可以编辑FullName值。我试图通过屏幕录像机获得效果的动画,但由于某种原因它没有显示我看到的所有内容。在这张图片中,我点击了" Rol"多次下拉列。

I am clicking the "Rol" drop down column multiple times

gif没有显示的是当我单击该列时,它会暂时更改为一个下拉控件一瞬间。我能够通过添加一个"调试器"来捕获它。下划线的onDataBound事件并截取屏幕截图:

frozen in the debugger

发生了什么事?为什么它不开放?

以下是一些相关代码:

EditorTemplates / RolList.cshtml文件。请注意,除了onDataBound事件之外,这些事件都不会触发。这可能是一个线索。

@model MyCompany.Web.CaseLink.Mvc.Admin.Models.RolDropDown

@(Html.Kendo().DropDownListFor(m => m)
                        .BindTo((System.Collections.IEnumerable)ViewData["roles"])
                        .DataValueField("RolId")
                        .DataTextField("RolDescription")
                        .Events(events => events
                            .Select("onSelect")
                            .Change("ddlChange")
                            .Open("onOpen")
                            .DataBound("onDatabound")                            
                         )
)

<script type="text/javascript">
    function onSelect(e) {
        console.log("ddl select" + e);
    }

        function ddlChange(e) {
        console.log("ddl change" + e);
    }

        function onOpen(e) {
        console.log("ddl open" + e);
    }

            function onDatabound(e) {
            debugger;
        console.log("ddl databound" + e);
    }
</script>

这是包含MVC Grid本身的局部视图。请注意,仅为调试添加了gridChange事件,并且在单击下拉列时不会触发它。

@(Html.Kendo().Grid<CaseMemberGridRow>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.FullName)
            .Title("Name")
            ;

            columns.Bound(p => p.Rol).ClientTemplate("#=Rol.RolDescription#").Width(180);
            columns.Bound(c => c.Email)
            .Title("Email")
            ;
            columns.Bound(c => c.Telephone)
            .Title("Phone")
            ;
            columns.Command(command => command.Destroy()).Width(150);
        })
        .ToolBar(toolBar =>
        {
            toolBar.Create();
            toolBar.Save();
        })
        .HtmlAttributes(new { style = "height: 550px;" })
        .Scrollable()
        .Sortable()
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events => events.Error("error_handler").Change("gridChange"))
            .Model(m =>
            {
                m.Field(p => p.FullName).Editable(true);
                m.Field(p => p.Rol).Editable(true);
                m.Field(p => p.Rol).DefaultValue(
                    ViewData["defaultRol"] as MyCompany.Web.CaseLink.Mvc.Admin.Models.RolDropDown);
            })
            .Create(create => create.Action("AddCaseMemberNoCustomerRecord_Create", "AddMember"))
            .Update(update => update.Action("AddCaseMemberNoCustomerRecord_Update", "AddMember"))
        )
)

控制器并不特别,正如我所说,我正在做Telerik在他们的演示中所做的事情。样本:

    var roles = _rolService.GetAllRolesDTO()
        .OrderBy(o => o.Description)
        .Select(r => new RolDropDown
        {
            RolDescription = r.Description,
            RolId = r.RolId
        });
    ViewData["roles"] = roles;
    ViewData["defaultRol"] = roles.First();

如果在&#34; onDataBound&#34;上有调试器中需要查找的内容。事件,让我知道。正如您在此处所看到的,数据源肯定是填充的。 debugger showing locals values

编辑:我知道你可以尝试使用ForeignKey类型的列来做同样的事情。当我尝试这个时,我可以下载一次。选择一个值后,该列开始像以前一样无法更改值。

        columns.ForeignKey(p => p.RolId, (System.Collections.IEnumerable)ViewData["roles"], "RolId", "Description")
            .Title("Role")
            .Width(150);

0 个答案:

没有答案