Question

我在我的应用程序中使用自定义命令，我对此有两个问题。

1）如何将CSS ID和Class添加到自定义命令。

2）我的自定义命令名称是Add，所以我尝试触发jQuery，单击“添加”按钮时单击事件但没有发生任何事情。似乎没有调用jQuery点击功能...

@(Html.Kendo().Grid<DatabaseLayer.TableMappings.FeeZone>()
.Name("FeeZoneGrid_02")
.Columns(columns =>
{
  columns.Bound(c => c.FeeZoneID);
  columns.Bound(c => c.FeeZoneDescription);
  columns.Command(
    command =>
      {

          command.Custom("Add").SendDataKeys(true).Click("AddFeeZoneToScheme");

          command.Custom("Remove").SendDataKeys(true).Click("RemoveFeeZoneFromScheme");
      }
     );
   })

 .Selectable(selectable => selectable
     .Mode(GridSelectionMode.Single))
 .DataSource(dataSource => dataSource
     .Ajax()
     .Read(read => read.Action("GetAllFreeZone", "Qualification"))
     .Model(model => model.Id(c => c.FeeZoneID))
)
)

HTML输出

 ........
<td role="gridcell">

<a class="k-button k-button-icontext k-grid-Add" href="#"></a>
<a class="k-button k-button-icontext k-grid-Remove" href="#"></a>

</td>

JQuery的

<script type="text/javascript">

 $(document).ready(function () {

    $(".k-grid-Add").click(function () {

        alert("Add button is called");
    });
});

</script>

我想要实现的是当用户单击添加按钮时，它取代了删除按钮，反之亦然...在我在网格自定义命令中显示的运动

非常感谢

Answer 1

试试这个：

$(document).ready(function () {
    $(".k-grid-Add").on("click", function () {
        $(this).hide();
        $(this).siblings(".k-grid-Remove").show();
    });
    $(".k-grid-Remove").on("click", function () {
        $(this).hide();
        $(this).siblings(".k-grid-Add").show();
    });
});

JSFiddle

Answer 2

应通过列构建器的HtmlAttributes方法添加额外的类或其他属性。

关于您尝试附加的事件 - 您在触发DOM ready事件时执行此操作。但是这些行仍然不存在 - 它们是通过AJax获取的。

相反，你应该在触发Grid的dataBound事件时执行你的逻辑。

另外，我会建议您使用附加到Grid主体元素的委托事件（更好的性能和更简单的方式）。如果在此demo中使用感兴趣的类似方法来了解何时单击该复选框。

单击自定义命令时触发jQuery单击事件

HTML输出

JQuery的

2 个答案: