kendoDialog not working in Angular

[Bob]

I am using jQuery editor in both ASPX application and Angular application.  As part of this editor, I am using an extension for the table editing.  This extension works great in the ASPX app, but in Angular I get error that "kendoDialog is not a function".  What do I need to do in Angular to get this working?  All other features of the jQuery editor are working.

declare var kendo: any;
declare var $: any;

export class CellBorderWizardPlugin {
  public static init() {
    const cellBorderCommand = kendo.ui.editor.TableWizardCommand.extend({
      exec() {
        const cmd = this;
        const range = (cmd.range = cmd.lockRange());
        cmd.selectedCells = cmd._selectedCells(range);
        cmd.dialog = $('#cellPropsDialog').data('kendoDialog');
        cmd.colorPickerAlreadyLoaded = cmd.dialog ? 'yes' : 'no';

        cmd.dialog = $('#cellPropsDialog')
          .kendoDialog({
            title: 'Cell Border Wizard',
            buttonLayout: 'normal',
            actions: [
              {
                text: 'Apply',
                primary: true,
                action: $.proxy(cmd.applyChanges, cmd),
              },
              { text: 'Close' },
            ],
          })
          .data('kendoDialog');

        if (cmd.colorPickerAlreadyLoaded === 'no') {
          cmd.dialog.element.find('#borderColor').kendoColorPicker({
            clearButton: true,
            buttons: false,
            opacity: false,
          });

          cmd.dialog.element.find('#borderSize').kendoNumericTextBox({
            value: 1,
            min: 0,
            step: 1,
            format: 'n0',
            restrictDecimals: true,
          });

          cmd.dialog.element.find('#border').kendoDropDownList({
            autoWidth: true,
          });

          cmd.dialog.element.find('#borderStyle').kendoDropDownList({
            autoWidth: true,
          });
        }

        cmd.dialog.open();
      },

      applyChanges() {
        for (let i = 0; i < this.selectedCells.length; i++) {
          const selectedCell = this.selectedCells[i];
          const dialog = this.dialog;
          const border = 'border' + dialog.element.find('#border').val();
          const borderSize = dialog.element.find('#borderSize').val();
          const borderStyle = dialog.element.find('#borderStyle').val();
          const borderColor = dialog.element
            .find('#borderColor')
            .data('kendoColorPicker')
            .value();

          if (border) {
            selectedCell.style[border + 'Color'] = borderColor
              ? borderColor
              : '';
            if (borderSize) {
              selectedCell.style[border + 'Width'] = borderSize + 'px';
            }
            if (borderStyle) {
              selectedCell.style[border + 'Style'] = borderStyle;
            }
          }
          kendo.ui.editor.Command.fn.releaseRange.call(this, this.range);
        }
        return false;
      },
    });

    const cellBorderTool = kendo.ui.editor.TableModificationTool.extend({
      command(options: any) {
        return new cellBorderCommand(options);
      },
    });

    kendo.ui.editor.EditorUtils.registerTool(
      'tableCellProperties',
      new cellBorderTool({
        command: cellBorderCommand,
        template: new kendo.ui.editor.ToolTemplate({
          template: kendo.ui.editor.EditorUtils.buttonTemplate,
          title: 'Cell Border Wizard',
        }),
      }),
    );
  }
}

<div id="cellPropsDialog" style="display: none;">
  <div style="width: 250px;">
    <div class="k-edit-label">Cell Side</div>
    <div class="k-edit-field">
      <select id="border">
        <option value="Top">top</option>
        <option value="Right">right</option>
        <option value="Bottom">bottom</option>
        <option value="Left">left</option>
      </select>
    </div>
    <div class="k-edit-label">Size</div>
    <div class="k-edit-field">
      <input type="number" id="borderSize" style="width: 70px;" />
    </div>
    <div class="k-edit-label">Color</div>
    <div class="k-edit-field">
      <input id="borderColor" value="#000000" />
    </div>
    <div class="k-edit-label">Style</div>
    <div class="k-edit-field">
      <select id="borderStyle">
        <option value="solid">solid</option>
        <option value="dotted">dotted</option>
        <option value="dashed">dashed</option>
        <option value="double">double</option>
        <option value="groove">groove</option>
        <option value="ridge">ridge</option>
        <option value="inset">inset</option>
        <option value="outset">outset</option>
        <option value="inherit">inherit</option>
        <option value="none">none</option>
        <option value="hidden">hidden</option>
      </select>
    </div>
  </div>
</div>

 

Thanks,

Bob

[Yanmario]

Hi Bob,

Integrations with Kendo UI for jQuery in an Angular application isn't officially supported, and this is documented in the following article:

https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/

There also might be some limitations resulting in features not working, and developers should handle them at their own discretion.

In such cases we do try to provide assistance, but a runnable application would be required so that I can troubleshoot it and possibly try to provide a solution if one is available for that scenario. The application would also allow me to reach out to our Kendo UI for jQuery support if they also have any input on this matter.

Regards,
Yanmario
Progress Telerik

[Bob]

Hi Yanmario,

Unfortunately, we have to use the jQuery editor in Angular because we are still waiting for table wizard/style support in the Angular editor.  If you could give us a timeline on when table support is expected in Angular, that would help us to make decisions on whether to stay with Kendo Angular or not.  Until then, we have to use the jQuery editor to get these features into the product.  We can develop this feature ourselves in Angular, but if the Kendo Angular editor evolves and supports tables, we would then be altering our code again.

I will see if I can get a developer to put together a sample application, but it may be more worth their time to just develop the extension in Angular.

Thanks,

Bob

[Yanmario]

Hi Bob,

I checked our developer roadmap and currently, the table wizard isn't part of it in the next two releases. We do also offer a Feature Acceleration Program that was added to the feature request as information:

https://feedback.telerik.com/kendo-angular-ui/1473908-add-table-wizard-and-cell-split-merge-features-to-the-editor

Keep track of the feature request thread as it will be updated if it gets in our development plans.

The issue might be Angular framework-related and possibly part of a limitation as Angular doesn't officially support such integration as we also follow that rule. If an application is provided I will try to troubleshoot it, but I cannot promise that it would be resolved.

Regards,
Yanmario
Progress Telerik