Question

如果用户单击网格中的“编辑”按钮，则如果我开始编辑文本框，则该文本框的颜色应在左上角变为红色，如图所示，请向我建议我该怎么做？ >

默认情况下，可以通过将editdo：true设置为Kendo属性，但是我使用的是“ inline”，因此我必须手动添加红色

我认为我需要在Change：函数中写一些条件，我不确定该写些什么

这是我的代码，目前它对所有文本框都使用红色，但是我只想对被编辑的文本框显示红色。

 $('<span class="k-dirty"></span>').insertAfter('input:text');

这是我正在工作的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <base
      href="https://demos.telerik.com/kendo-ui/grid/editing-custom-validation"
    />
    <style>
      html {
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
    <title></title>
    <link
      rel="stylesheet"
      href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default-v2.min.css"
    />
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
  </head>
  <body>
    <div id="example">
      <div id="grid"></div>
      <script>
        $(document).ready(function() {
          $("#grid")
            .kendoGrid({
              dataSource: new kendo.data.DataSource({
                data: [
                  { SystemName: "SysTest", SystemID: "789", System: "Hello" }
                ],
                serverPaging: false,
                serverSorting: false,
                serverFiltering: false,
                change: function(e) {
                  if (e.action === "itemchange") {
                    $('<span class="k-dirty"></span>').insertAfter(
                      "input:text"
                    );
                  }
                },
                batch: true,
                schema: {
                  //data: "Items",
                  model: {
                    id: "SystemID",
                    fields: {
                      SystemName: { editable: true },
                      SystemID: { editable: true },
                      System: { editable: true }
                    }
                  }
                }
              }),
              columns: [
                {
                  field: "SystemName",
                  title: "Some Name",
                  width: "45%",
                  encoded: false,
                  name: "SystemName"
                },
                {
                  field: "SystemID",
                  title: "System ID",
                  width: "25%",
                  encoded: false,
                  name: "SystemID"
                },
                {
                  field: "System",
                  title: "System",
                  width: "25%",
                  encoded: false,
                  name: "System"
                },
                {
                  command: [
                    {
                      name: "edit",
                      text: {
                        edit: "Edit", // This is the localization for Edit button
                        update: "Save", // This is the localization for Update button
                        cancel: "Cancel" // This is the localization for Cancel button
                      }
                    }
                  ],
                  title: "&nbsp;",
                  width: "50%"
                }
              ],
              editable: "inline",
              // edit: gridEdit,
              sortable: false,
              resizable: true,
              autoBind: true,
              navigateHierarchyCell: true,
              persistSelections: true,
              pageable: false,
              autoResizeHeight: false
            })
            .data("kendoGrid");
        });
      </script>
    </div>
  </body>
</html>

Answer 1

这是我的问题的答案：

  if (e.action === "itemchange") {
                                    $('<span class="k-dirty"></span>').insertAfter('input[name=' + e.field + ']');
                                }

在Jquery中将K-Dirty手动添加到Kendo Edit Grid

1 个答案: