Вручную добавьте K-Dirty в Kendo Edit Grid в Jquery - PullRequest
Новая
       11

Вручную добавьте K-Dirty в Kendo Edit Grid в Jquery

0 голосов
/ 24 февраля 2019

Если пользователь нажимает кнопку «РЕДАКТИРОВАТЬ» в сетке, то, если я начинаю редактировать текстовое поле, тогда цвет текстового поля должен измениться на «Красный» в левом углу, как показано на рисунке, пожалуйста, предложите мне, как я могу это сделать?

Это возможно по умолчанию свойство Kendo, установив editable: true, но я использую "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>

1 Ответ

0 голосов
/ 25 февраля 2019

Вот ответ на мой вопрос: 

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