设置剑道网格列的剑道开关asp.net mvc

问题描述

我试图在asp.net MVC中包含剑道网格的剑道开关，如以下屏幕截图

在此处尝试遵循this kendo forum article

<div id="grid"></div>

<script>

    $("#grid").kendoGrid({
        ...
        ...
        { field: "Discontinued",width: "70px",template: "<input class='customClass' #if (Discontinued) { # checked='checked' # } # type='checkbox' />",editor: customEditor },{command: "edit",width: "100px"}],editable: "inline",cancel: function(e) {
        var grid = this;
        var rowUid = e.container.data("uid");

        setTimeout(function() {
          createSwitch(grid.element.find("tr[data-uid='"+rowUid+"'] .customClass"));
        });
      },dataBound: function() {
        createSwitch(this.tbody.find(".customClass"));
      }
    });

    function createSwitch(element) {
      element.kendoMobileSwitch({
        onLabel: "YES",offLabel: "NO",change: onChange
      });
    }

    function onChange(e) {
      var row = e.sender.element.closest("tr");
      var grid = $("#grid").getKendoGrid();
      var dataItem = grid.dataItem(row);
      var checked = e.checked;

      dataItem.set("Discontinued",checked);

      // sync data with remote service
      grid.dataSource.sync();
    }

    function customEditor(container,options) {
      $('<input type="checkbox" name="' + options.field + '"/>')
        .appendTo(container)
        .kendoMobileSwitch({
        onLabel: "YES",offLabel: "NO"
      });
    }

  });
</script>

我只是尝试按照以下方式将this example (jquery)解决方案转换为ASP.NET MVC

剃刀区

     columns.Bound(c => c.Discontinued).ClientTemplate("<input class='customClass' #if (Discontinued) { # checked='checked' # } # type='checkbox' />");

脚本

<script type="text/javascript">

    $(document).ready(function () {

        $('.spinner').css('display','block');

        setTimeout(function () {
            $('.spinner').css('display','none');
            var grid = this;
            var rowUid = e.container.data("uid");
            createSwitch(grid.element.find("tr[data-uid='" + rowUid + "'] .customClass"));
        },1000);

function createSwitch(element)
    {
        element.kendoMobileSwitch({
            onLabel: "YES",change: onChangeSwitch
        });
    }

    function onChangeSwitch(e)
    {
        var row = e.sender.element.closest("tr");
        var grid = $("#grid").getKendoGrid();
        var dataItem = grid.dataItem(row);
        var checked = e.checked;

        dataItem.set("Discontinued",checked);

        // sync data with remote service
        grid.dataSource.sync();
    }

    function customEditor(container,options) {
        $('<input type="checkbox" name="' + options.field + '"/>')
          .appendTo(container)
          .kendoMobileSwitch({
              onLabel: "YES",offLabel: "NO"
          });
    }
</script>

但是此 与asp.net MVC的jQuery 对话无法正常工作，感谢您提出任何使之可行的建议。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）