title: Kendo-UI Hybrid UI Grid Edit Template
body: <p>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 <code>editable</code> property being set to <code>popout</code>.</p>
  <p>The issue that I have is that the schema has a time column, and since there is no &quot;time&quot; model type I am forced to specify that the type is &quot;date&quot;. This in turn causes the default edit form to use a date input instead of a time input.</p>
  <p>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:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.common.min.css"&gt;
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.rtl.min.css"&gt;
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.default-v2.min.css"&gt;
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.mobile.all.min.css"&gt;
    &lt;/head&gt;
      &lt;body&gt;
        &lt;div data-role="view" id="view-grid" data-title="Grid" data-persist="true" data-use-native-scrolling="true" data-layout="layout"&gt;
          &lt;div id="grid"&gt;&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div data-role="layout" data-id="layout"&gt;
          &lt;footer data-role="footer"&gt;
            &lt;div data-role="tabstrip"&gt;
              &lt;a data-role="button" data-icon="home" href="#view-grid"&gt;Grid&lt;/a&gt;
            &lt;/div&gt;
          &lt;/footer&gt;
        &lt;/div&gt;
  
        &lt;script id="form" type="text/x-kendo-template"&gt;
          &lt;ul data-role="listview" data-style="inset"&gt;
            &lt;li&gt;
              &lt;label class="km-required km-label-above"&gt;Date
              &lt;input type="date" name="Date" title="Date" data-bind="value: Date" /&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;label class="km-required km-label-above"&gt;Time
              &lt;input type="time" name="Time" title="Time" data-bind="value: Time" /&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;label class="km-required km-label-above"&gt;Reading
              &lt;input type="number" name="Reading" title="Reading" data-bind="value: Reading" /&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/script&gt;
  
        &lt;script src="https://code.jquery.com/jquery-1.12.3.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://kendo.cdn.telerik.com/2020.3.915/js/angular.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://kendo.cdn.telerik.com/2020.3.915/js/jszip.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"&gt;&lt;/script&gt;
        &lt;script&gt;
          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%'
            });
          });
        &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Click on the add new record button and you notice that:</p>
  <ul>
  <li>The label/input are inline</li>
  <li>The styles are completely ignored</li>
  </ul>
  <p>My guess is that because the DOM is being rendered via a template script rather, the hybrid UI is not being applied.</p>
  <p>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.</p>