Question

I have one requirement for asp.net MVC application and for that inside Kendo UI grid, i have customized one column with combo box and two buttons for performing adding or deletion of any user selected value or manual typed value from combo box control.           

But i am not able to get how i can get button click information for any specific row of that column.
Kindly guide that how i can achieve such kind of behavior.

Grid的示例代码如下，我想点击Category Category @（Html.Kendo（）。网格（） .NAME（ “网格”） .Columns（columns =＆gt; { columns.Bound（p =＆gt; p.ProductName）; columns.ForeignKey（p =＆gt; p.CategoryID，（System.Collections.IEnumerable）ViewData [“categories”]，“CategoryID”，“CategoryName”） .title伪（ “类别”）。HtmlAttributes（新 { @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>");

编辑：

控制器：

        public ActionResult Delete(int id)
            {

        try
        {
           //Delete....

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

        return Json(true, JsonRequestBehavior.AllowGet);

    }

查看

        <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>" +

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

1 个答案: