kendoDialog content using a html template

Question

On my page I have about three different kendoDialog control that has long html content. The html content also need to get converted to different kendo controls like kendoEditor and kendoUpload. I wanted to see what other users do for this and see if they use a html page as a type of template

dialogMultipleChoice.kendoDialog({
    width: "450px",
    title: "Multiple Choice",
    closable: false,
    modal: false,
    content: "<div class='form- group'><label>Label (Question)</label><textarea id='editor' rows='10' cols='30'></textarea></div><div class='form- group'><label>Image</label><input name='upImport' id='upImport' type='file' /></div><div class='form- group'><label>Choices</label><select id='selectanswer' multiple='multiple' data-placeholder='Select answer...'></div>",
    actions: [
        { text: 'Cancel' },
        {
            text: 'Save',
            primary: true,
            action: function (e) {
                saveMultipleChoice();
            },
        }
    ],
    close: onClose
});


$("#editor").kendoEditor();

$("#upImport").kendoUpload();

Answer 1

My first suggestion is to move your content into a kendo template (documentation):

<script id="template-dialog" type="text/x-kendo-template">
    <div class="form-group">
    <label>Label (Question)</label>
    <textarea id="editor" rows="10" cols="30"></textarea>
  </div>
  <div class="form-group">
    <label>Image</label>
    <input name="upImport" id="upImport" type="file" />
  </div>
  <div class="form-group">
    <label>Choices</label>
    <select id="selectanswer" multiple="multiple" data-placeholder="Select answer..."></select>
  </div>
</script>

My next suggestion is to handle the initOpen event (documentation). In the event, initialize your kendo widgets:

initOpen: function() {
  $('#editor').kendoEditor();
  $('#upImport').kendoUpload();
}

Example:

var dialogMultipleChoice = $('#dialog');
dialogMultipleChoice.kendoDialog({
  width: '450px',
  title: 'Multiple Choice',
  closable: false,
  modal: false,
  content: kendo.template($('#template-dialog').html()),
  actions: [
    { text: 'Cancel' },
    {
      text: 'Save',
      primary: true,
      action: function (e) {
        saveMultipleChoice();
      },
    }
  ],
  close: onClose,
  initOpen: function() {
    $('#editor').kendoEditor();
    $('#upImport').kendoUpload();
  }
});

var onClose = function() {
  // do something
};
var saveMultipleChoice = function() {
  // do something
};

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>

<div id="dialog"></div>
<script id="template-dialog" type="text/x-kendo-template">
  <div class="form-group">
    <label>Label (Question)</label>
    <textarea id="editor" rows="10" cols="30"></textarea>
  </div>
  <div class="form-group">
    <label>Image</label>
    <input name="upImport" id="upImport" type="file" />
  </div>
  <div class="form-group">
    <label>Choices</label>
    <select id="selectanswer" multiple="multiple" data-placeholder="Select answer..."></select>
  </div>
</script>