在Kendo UI网格中获取所选列信息

Question

我有一个asp.net MVC应用程序的需求，在Kendo UI网格中，我已经定制了一列组合框和两个按钮，用于从组合框控件中添加或删除任何用户选择的值或手动输入的值，但我无法获得该列中任何特定行的按钮点击信息。

但我无法获得该列中任何特定行的按钮点击信息，请指导我如何实现这样的行为。

网格的示例代码如下，我想为Category Column获取可点击的信息。

    @(Html.Kendo().Grid<GridHeaderTemplate.Models.ProductModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductName);
            columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
                .Title("Category").HtmlAttributes(new
                {
                    @class = "templateCell"

                }).ClientTemplate("<table cellspacing='0' class='data-row data-personal'><tr>" +
                                        "<td>#=data.Category.CategoryName# <span class='custom-arrow k-icon k-i-arrow-s'></span></td>" +
                                        "<td><button id='customButton'>Add</button> <span></span> <button id='customButton1'>Delete</button></td>" +
                                        "</tr></table>")
                              .HeaderTemplate(
                            @<text>
                                <table cellspacing="0" class="data-header">
                                    <tr>
                                        <td colspan="2"><strong>Category</strong></td>
                                    </tr>
                                    <tr>
                                        <td>Category Name</td>
                                        <td>Settings</td>
                                    </tr>
                                </table>
                            </text>
                          )
                           .Width(300);//.ClientTemplate("#=data.Category.CategoryName# <span class='custom-arrow k-icon k-i-arrow-s'></span>"); ;
            columns.Bound(p => p.UnitPrice).Width(150);
            columns.Command(command => command.Destroy()).Width(110);
        })
        .ToolBar(toolBar =>
            {
                toolBar.Save();
                toolBar.Create();
            })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Filterable()
        .Groupable()
        .Pageable()
            .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .PageSize(20)
            .ServerOperation(false)
            .Model(model =>
            {
                model.Id(p => p.ProductID);
                model.Field(p => p.ProductID).Editable(false);
                model.Field(p => p.CategoryID).DefaultValue(1);
            })

Answer 1

输入一些代码，以帮助我们帮助你。

你需要在你的对象里有你要添加或删除的ID。

如果你创建了一个客户端模板，添加了两个特定的按钮并调用了一个javascript函数，那么你就可以访问该行的属性。

比如说。

   column.Bound(c=>c.Id).hidden(true);
   column.Bound(c=>c.Name).ClientTemplate("<span onclick='AddToThisId(#=Id#)'>add</span>");

Edited:

CONTROLLER:

        public ActionResult Delete(int id)
            {

        try
        {
           //Delete....

        }
        catch (Exception ex)
        {
            result.SetInsucess("Erro a apagar registo: " + ex.Message + ".");
        }

        return Json(true, JsonRequestBehavior.AllowGet);

    }

VIEW

        <script>
         function AddSomethingBaseOnId(id){

         $.ajax({
         cache: false,
         type: 'GET',
         data: { Id: Id },
         contentType: "application/json",
         url: "Controller/AddAction",
         success: function (data) {
             alert("sucess");
         },
         fail: function (jqXHR, textStatus) {
             alert("Ocorreu um erro: " + textStatus);
             $("#" + uid).hide();
         }
     });

       }

          function DeleteSomethingBaseOnId(id){

      $.ajax({
         cache: false,
         type: 'GET',
         data: { Id: Id },
         contentType: "application/json",
         url: "Controller/DeleteAction",
         success: function (data) {
             alert("sucess");
         },
         fail: function (jqXHR, textStatus) {
             alert("Ocorreu um erro: " + textStatus);
             $("#" + uid).hide();
         }
     });

   }
  </script> 

在您的客户模板中。

         "<td>#=data.Category.CategoryName# <span class='custom-arrow k-icon                      k-i-arrow-s'></span></td>" +
        "<td><button id='customButton'   onclick="AddSomethingBaseOnId(#=data.Id#)">Add</button> <span></span> <button  id='customButton1'    onclick="DeleteSomethingBaseOnId(#=data.Id#)">Delete</button></td>" +