0

You can customize the JqxScheduler's edit dialog by appending the existing containers in the editDialogCreate method like this:

var titleSelector = $(`
    <div>
      <div class='jqx-scheduler-edit-dialog-label'>Előadás</div>
      <div class="jqx-scheduler-edit-dialog-field">
        <div><v-select :options="options"></v-select></div>
      </div>
    </div>`);
fields.subjectContainer.append(titleSelector);

I understand that this HTML inside won't be rendered in my Vue file, but I cannot add the rendered this rendered version by copy-paste as far as I know:

<div data-v-0a61aa6a="" dir="auto" class="v-select vs--single vs--searchable"> 
  <div id="vs1__combobox" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria- 
    label="Search for option" class="vs__dropdown-toggle"><div class="vs__selected-options">
    ...
  </div>  
</div>

My question is: How can I render this HTML and add it to the dialog? I am using webpack and vue-router.

PS: I have read about the Vue.Compile method, but if I am correct, I cannot use it here.

Alex Denor
  • 137
  • 3
  • 16

1 Answers1

1

You have several options:

  1. Iclude this code into your html markup and put v-if directive on it, to hide/show it if necessary: v-if docs
  2. Also you can try to create separate component for your title selector with Vue.component('component-title', {...}), docs
tony19
  • 125,647
  • 18
  • 229
  • 307
Temoncher
  • 644
  • 5
  • 15
  • Thank you. Your first idea worked just fine, now I just figure it out how to deal with the conditional rendering when I set its parent div v-if to false, I want to keep it in my dialog. – Alex Denor Aug 09 '20 at 09:35
  • I guess your only option is extract div that needs to be shown from parent container. If parent container v-if is set to false there is no way to show something inside of it because it just doesn't render any of it's contents – Temoncher Aug 09 '20 at 10:33