Kendo-UI 混合 UI 网格编辑模板

Question

我正在尝试使用 Kendo-UI 的混合 UI 创建我的网站的移动版本。我目前正在处理的页面是一个简单的 CRUD 屏幕，带有网格及其编辑表单，通过将 editable 属性设置为 popout.

我遇到的问题是模式有一个时间列，并且由于没有“时间”模型类型，我不得不指定类型为“日期”。这反过来会导致默认编辑表单使用日期输入而不是时间输入。

为了弥补这一点，我尝试设置一个模板来保存我的编辑表单。我运行现在遇到的问题是包含表单元素的列表视图未正确呈现。这是一个例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.default-v2.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.mobile.all.min.css">
  </head>
    <body>
      <div data-role="view" id="view-grid" data-title="Grid" data-persist="true" data-use-native-scrolling="true" data-layout="layout">
        <div id="grid"></div>
      </div>

      <div data-role="layout" data-id="layout">
        <footer data-role="footer">
          <div data-role="tabstrip">
            <a data-role="button" data-icon="home" href="#view-grid">Grid</a>
          </div>
        </footer>
      </div>

      <script id="form" type="text/x-kendo-template">
        <ul data-role="listview" data-style="inset">
          <li>
            <label class="km-required km-label-above">Date
            <input type="date" name="Date" title="Date" data-bind="value: Date" />
          </li>
          <li>
            <label class="km-required km-label-above">Time
            <input type="time" name="Time" title="Time" data-bind="value: Time" />
          </li>
          <li>
            <label class="km-required km-label-above">Reading
            <input type="number" name="Reading" title="Reading" data-bind="value: Reading" />
          </li>
        </ul>
      </script>

      <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
      <script src="https://kendo.cdn.telerik.com/2020.3.915/js/angular.min.js"></script>
      <script src="https://kendo.cdn.telerik.com/2020.3.915/js/jszip.min.js"></script>
      <script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>
      <script>
        const dataSource = new kendo.data.DataSource({
          transport: {
            read: 'api/test/query.php',
            update: 'api/test/update.php',
            destroy: 'api/test/delete.php',
            create: 'api/test/insert.php'
          },
          schema: {
            model: {
              id: 'Id',
              fields: {
                Id: { editable: false, nullable: true },
                Date: { type: 'date', validate: { required: true } },
                Time: { type: 'date', validate: { required: true } },
                Reading: { type: 'number', validation: { min: 0, required: true } }
              }
            }
          }
        });

        $(document).ready(function(){
          const application = new kendo.mobile.Application(document.body, { skin: 'nova' });
          $('#grid').kendoGrid({
            autoBind: false,
            dataSource: dataSource,
            pageable: true,
            mobile: 'phone',
            toolbar: [
              'create',
              'pdf',
              'search'
            ],
            columns: [
              {
                field: 'Date',
                format: 'MMMM dd, yyyy'
              },
              {
                field: 'Time',
                format: 'hh:mm'
              },
              {
                field: 'Reading'
              }
            ],
            editable: {
              mode: "popup",
              template: kendo.template($("#form").html())
            },
            filterable: 'true',
            sortable: 'true',
            height: '100%'
          });
        });
      </script>
    </body>
</html>

单击添加新记录按钮，您会注意到：

label/input 是内联的
样式被完全忽略

我的猜测是，因为 DOM 是通过模板脚本呈现的，所以混合 UI 没有被应用。

我该怎么做才能解决这个问题？最好的情况是我不必设置模板，但次要的是弄清楚如何将样式应用到模板。

Answer 1

我找到了解决方案，尽管它相当复杂。

我设置了 edit and save 事件。

在编辑事件中，我初始化了列表视图并使用以下方法根据模型中的数据设置我的输入值：

edit: function(e) {
    e.container.find('ul').kendoMobileListView();
    e.container.find('input[name="Date"]').val(kendo.toString(e.model.Date, 'yyyy-MM-dd'));
    e.container.find('input[name="Time"]').val(kendo.toString(e.model.Time, 'HH:mm'));
    e.container.find('input[name="Reading"]').val(e.model.Reading);
}

然后在保存事件中，我从发送者的数据源中获取模型，设置模型的值，并使用以下方法保存更改：

save: function(e) {
    var model = e.sender.dataSource.get(e.model.Id);
    model.set('Date', new Date(e.container.find('input[name="Date"]').val()));
    model.set('Time', kendo.toString(e.container.find('input[name="Time"]').val(), 'hh:mm tt'));
    model.set('Reading', e.container.find('input[name="Reading"]').val());
    e.sender.dataSource.sync();
}

整个体验真的很糟糕，让我怀疑我是否要继续Kendo-UI。

Kendo-UI 混合 UI 网格编辑模板

Kendo-UI Hybrid UI Grid Edit Template

jquery

kendo-ui