Kendo-UI Hybrid UI Grid Edit Template

Question

I am trying to create a mobile version of my website by using Kendo-UI's hybrid UI. The page that I'm currently working on is a simple CRUD screen with a grid and its edit form via the editable property being set to popout.

The issue that I have is that the schema has a time column, and since there is no "time" model type I am forced to specify that the type is "date". This in turn causes the default edit form to use a date input instead of a time input.

To compensate for this, I tried setting up a template to hold my edit form. The issue that I'm running into now is that the listview that holds the form elements is not rendering properly. Here is an example:

<!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>

Click on the add new record button and you notice that:

The label/input are inline
The styles are completely ignored

My guess is that because the DOM is being rendered via a template script rather, the hybrid UI is not being applied.

What can I do to work around this issue? Best case scenario is that I don't have to setup a template, but second best is to figure out how to apply the styling to the template.

This may help kendo.mobile.init(contentElements); as described here: https://stackoverflow.com/questions/14349746/kendomobile-ui-template-not-rendering-css-how-to-make-the-template-render-with-k — CMartins, Oct 19 '20 at 06:10

David · Accepted Answer · 2020-10-21T00:17:46.183

I found the solution, though it was rather involved.

I setup the edit and save events.

In the edit event, I initialized the listview and set the values of my inputs based on data in the model using the following:

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);
}

Then in the save event, I got the model from the sender's datasource, set the values of the model, and persisted the changes using the following:

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();
}

This entire experience really sucked and makes me question if I'm going to continue with Kendo-UI.

Kendo-UI Hybrid UI Grid Edit Template

1 Answers1