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

时间:2020-08-18 10:10:05

标签: asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc kendo-ui-grid

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

enter image description here

在此处尝试遵循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",
            offLabel: "NO",
            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 对话无法正常工作,感谢您提出任何使之可行的建议。

0 个答案:

没有答案
相关问题