search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Display Icon in options on Modal form

Asked by LB
26 days ago.

Is it possible to display a different icon next to each option when using a modal form ?

I've tried this but it has no effect.

{name: "A", id: "A", icon: "icon icon-blue"},

Failing that is it possible to include the html for my own select code (on the modal form) and get the value of my selction ?

Answer posted by Dan Letecky [DayPilot]
24 days ago.

At this moment, icons can't be displayed in <select> items - it uses the standard browser element and that doesn't support HTML in <option> elements.

You can implement your own form item type using plugins. Here is an example:

      var form = [
        {name: "Description", id: "description", type: "textarea"}

      var data = {
        description: "This is a sample text with <html>"

      var options = {
        plugins: {
          textarea: function(row) {
            var view = {};

            var textarea = document.createElement("textarea");
   = "100%";
   = "200px";
            textarea.addEventListener("keydown", function(ev) {
              if (ev.key === "Enter") {
            // validation triggers
            textarea.oninput = function(e) {
            textarea.onblur = function(e) {

            view.element = textarea;

            // change state from value
            view.apply = function(row) {
              view.element.value = row.value;
            // load value
   = function() {
              var result = {};
              result[row.field] = view.element.value;
              return result;
            view.canFocus = function() {
              return true;
            view.focus = function() {

            return view;

      DayPilot.Modal.form(form, data, options).then(function(modal) {

The plugin receives "row" object which holds the row state.

You need to return a "view" object that implements these properties:

  • element
  • apply() function
  • save() function
  • canFocus() function
  • focus() function

You also need to call view.onInput() for "input" event and view.onBlur() for "blur" event to enable validation.

New Reply
This reply is
or drop files here
Your name (optional):