jquery - 无法使用 jquery 打开剑道网格的编辑弹出窗口

Question

我正在 MVC 页面上为我的剑道网格实现一个上下文菜单。我正在尝试使用单击上下文菜单来调用我的剑道网格上的编辑按钮。我已经在我的上下文菜单上实现了事件，并在事件上编写了 jquery 代码来调用触发编辑按钮的单击事件。我确实看到窗口突然弹出并关闭。我如何让这个工作

@(Html.Kendo().ContextMenu()
        .Name("menu")
        .Target("#GridTeam")
        .Filter("tr")
        .Orientation(ContextMenuOrientation.Vertical)
        .Animation(animation =>
        {
            animation.Open(open =>
            {
                open.Fade(FadeDirection.In);
                open.Duration(500);
            });
        })
         .Items(items =>
         {
             items.Add()
                 .Text("Edit");

             items.Add()
                  .Text("Delete");
         })

       .Events(e =>
       {
           e.Select("onEdit");

       })
         )


 function onEdit(e) {
            //Logic to be executed on Edit event
            $('a.k-grid-edit').click();

Answer 1

您可以使用addRow、editRow和removeRow。

模型

public class ViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
}

看法

<script type="text/javascript">

    function onSelect(e) {
        var grid = $("#GridTeam").data("kendoGrid");

        switch ($(e.item).children(".k-link").text()) {
        case "Add":
            grid.addRow(e.target);
            break;
        case "Edit":
            grid.editRow(e.target);
            break;
        case "Delete":
            grid.removeRow(e.target);
            break;
        }
    }
</script>

@(Html.Kendo().Grid<ViewModel>()
        .Name("GridTeam")
        .Columns(columns =>
        {
            columns.Command(command => { command.Edit(); command.Destroy(); });
            columns.Bound(d => d.Name).Title("Name");
            columns.Bound(d => d.Description).Title("Description");
        })
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(d => d.Id))
            .Read(read => read.Action("Data_Read", "Home"))
            .Update(update => update.Action("Data_Update", "Home"))
            .Destroy(update => update.Action("Data_Destroy", "Home")))
)

@(Html.Kendo().ContextMenu()
        .Name("menu")
        .Target("#GridTeam")
        .Filter("tr")
        .Orientation(ContextMenuOrientation.Vertical)
        .Animation(animation =>
        {
            animation.Open(open =>
            {
                open.Fade(FadeDirection.In);
                open.Duration(500);
            });
        })
        .Items(items =>
        {
            items.Add().Text("Add");
            items.Add().Text("Edit");
            items.Add().Text("Delete");
        })
        .Events(e => e.Select("onSelect"))
)

控制器

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Data_Read([DataSourceRequest] DataSourceRequest request)
    {
        return Json(_models.ToDataSourceResult(request));
    }

    [HttpPost]
    public ActionResult Data_Update([DataSourceRequest] DataSourceRequest request, ViewModel viewModel)
    {
        var model = _models.FirstOrDefault(x => x.Id == viewModel.Id);
        if (model != null)
        {
            model.Name = viewModel.Name;
            model.Description = viewModel.Description;
        }
        return Json(ModelState.IsValid ? new object() : ModelState.ToDataSourceResult());
    }

    [HttpPost]
    public ActionResult Data_Destroy([DataSourceRequest] DataSourceRequest request, ViewModel viewModel)
    {
        _models.Remove(_models.First(x => x.Id == viewModel.Id));
        return Json(new[] {_models}.ToDataSourceResult(request, ModelState));
    }

    // Created as static to simulate data from database
    private static List<ViewModel> _models = new List<ViewModel>
    {
        new ViewModel {Id = 1, Name = "One", Description = "One Hundred"},
        new ViewModel {Id = 2, Name = "Two", Description = "Two Hundreds"},
        new ViewModel {Id = 3, Name = "Three", Description = "Three Hundreds"},
    };
}

截屏

Answer 2

这应该有效。首先你得到你的网格实例。然后从上下文菜单事件中找到点击了哪一行。然后将该行置于编辑模式。

function onEdit(e) {
    //Logic to be executed on Edit event

    var grid = $("#GridTeam").data("kendoGrid");
    var model = e.target;
    grid.editRow(model)
}