Kendo UI grid edit popwindow not firing

Question

I cannot get my Edit popup window to fire. I don't see any events happening when I debug the application. My add user function works quite well. I believe I have initialized everything correctly -- does anyone see what I did wrong or why it is not initializing correctly?

Any ideas why this is?

@(Html.Kendo().Grid<Areas.Admin.ViewModels.UserManagement.UserManagementVM>()
            .Name("UserProfileGrid")
            .Resizable(c => c.Columns(true))
            .Selectable()
            .Filterable()
            .Groupable()
         .ToolBar(toolbar =>
                {
                    toolbar.Template(@<text>


                        <input id="ButtonAddUser" type="button" class='k-button k-grid-add' value="Add User"/>
                        <input id="ButtonEditUser" type="button" class="k-button k-grid-edit" value="Edit user" />

                    @(Html.Kendo().Button()
                    .Name("ButtonRefreshPage")
                    .HtmlAttributes(new { type = "k-button" })
                    .Icon("history")
                    .Content("Refresh Page")
                    .Events(x => x.Click("RefreshPage")))

                    @(Html.Kendo().Button()
                    .Name("ButtonDeleteUser")
                    .HtmlAttributes(new { type = "k-button" })
                    .Icon("history")
                    .Content("Delete a user")
                    .Events(x => x.Click("DeleteUser")))

                    @(Html.Kendo().Button()
                    .Name("ButtonAbout")
                    .HtmlAttributes(new { type = "k-button" })
                    .Icon("history")
                    .Content("About")
                    .Events(x => x.Click("aboutButtonClick")))
                    </text>);
                })

                .Editable(editable => editable.Mode(GridEditMode.PopUp)
                )

                .Columns(columns =>
                {
                    //columns.Bound(e => e.UserOrg).Width(25).Title("User Organization");
                    columns.Bound(e => e.IsApproved).Width(50).Title("Approved Status");
                    columns.Bound(e => e.UserName).Width(150).Title("User Name");
                    //columns.Bound(e => e.user).Width(150);
                    columns.Bound(e => e.EmailAddress).Width(150).Title("Email Address");
                })

                .Sortable()
                .Scrollable()
                .Pageable()
                .Filterable()
                .Selectable()
                .Events(e =>
                {
                  e.Change("packageRowSelectionChanged");
                })
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Events(E => E.Error("error_handler"))
                .Model(model => model.Id(e => e.UserId))
                .Read(read => read.Action("ReadUsers", "UserManagement"))
                .Create(create => create.Action("UserProfileCreator", "UserManagement"))
                .Update(update => update.Action("UserProfileCreator", "UserManagement"))
                .Destroy(destroy => destroy.Action("EditingPopUp_Destroy", "UserManagement"))
                ))

Answer 1

Two workarounds:

A: You can create a button and link it to another (hidden button) that will call the (native) edit function, or utilize the editRow command as demonstrated here:

  function startEditUser() { var grid = $("#UserProfileGrid").data("kendoGrid"); var selectedRow = grid.select(); grid.editRow(selectedRow); 

I hope this helps someone out!

Answer 2

You don't have an Edit command in your columns. Of course, that's why the Edit function doesn't work. You can't add the Edit and Delete commands to the toolbar. Add the command to the Columns section in your grid like this:

.Columns(columns =>
{
    //columns.Bound(e => e.UserOrg).Width(25).Title("User Organization");
    columns.Bound(e => e.IsApproved).Width(50).Title("Approved Status");
    columns.Bound(e => e.UserName).Width(150).Title("User Name");
    //columns.Bound(e => e.user).Width(150);
    columns.Bound(e => e.EmailAddress).Width(150).Title("Email Address");
    columns.Command(command => { command.Edit(); command.Destroy(); });
})