Questions on Kendo UI for Angular Forum

1 answer

154 views

Hi All,

I am using angular 13 and using kendo-multiselect control. I am having an issue when deleting a single value which caused removing all the items. If i click any of the following green highlighted close button all the items get disappear. Code sample also attached herewith. Anything wrong i am doing here?

MultiSelect

answered on 28 Sep 2022

0 answers

102 views

Kendo UI Grid for Angular getting unresponsive when vertical scroll is done

Hi,

I have been using a kendo UI grid for Angular. It do have a checkbox column as well. When I try to vertically scroll it back and forth. The UI become unresponsive and I can't click the checkbox for some time. After some time I am able to click the checkbox

Below is the link for the captured video. I anticipate its due to improper capturing of mouse wheel scroll event.

Kendo UI grid Unresponsive

Kindly look into it..

Grid

updated question on 27 Sep 2022

0 answers

115 views

What are these numbers in the fitting chart to page size example?

Under the export options for charts, there's an example of how to fit a chart to the size of your paper. Part of this example includes some kind of conversion function and a rectangle constant.

function mm(val: number): number {
  return val * 2.8347;
}

const PAGE_RECT = new geometry.Rect([0, 0], [mm(210 - 20), mm(297 - 20)]);

However, there is absolutely no explanation for these numbers. Am I converting to or from millimeters, and what's the other unit? Why am I doing this? Where are these 210 and 297 numbers coming from in the page rectangle? I can see that the minus 20 is accounting for the 1cm margin set in the PDF below, but other than that I have no idea what the origin of these numbers is.

Can someone please translate these magic numbers? Telerik, can you please add comments to the example code explaining?

Charts

Drawing

PDF Export

asked on 26 Sep 2022

0 answers

362 views

kendoDialog not working in Angular

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

Dialog

Editor

updated question on 22 Sep 2022

0 answers

181 views

Add icon next to filter icon in a grid column

Hi, I'd like to add an icon to all the headers of my grid. This icon must be placed just next to the filter icon (on the right of the filter button):

I was trying this using the header template but only can modify the left of the filter (the title area).

I'll appreciate any help with this.

Thanks in advance

Grid

Icon

asked on 22 Sep 2022

0 answers

151 views

Grid add/remove actions - what am I missing

Hi,

I implemented kendo grid for angular for the small POC I am making.

I have standard CRUD grid without much logic - so I need to be able to add data, change it and delete it.

I was following example from the page and I have the grid, bound to remote data (observable), however after I click ADD and finish adding data in the row, click Save, row disappears.

Example provided in documentation which reads data completely again is not a good case for me, because service can take sec or two to finish and I don't need to reload all the data.

Same goes with remove action (only data is not removed).

I have four separate service methods for CRUD.

Am I missing some property or configuration (or have a logic flaw) to tell the grid to preserve row after adding it, and to remove it on remove?

Thank you

Vedad

Grid

updated question on 22 Sep 2022

1 answer

193 views

[Solved] Data binding to observable throws error with strict type checking

I'm trying to set up a chart whose data is bound to an observable. Even using the exact example on observables provided on the data binding page, it fails to compile with the error "Type 'number[] | null' is not assignable to type 'any[]'." How can I resolve this?

Charts

answered on 22 Sep 2022

0 answers

136 views

File Upload Backend

Is there any docs or sample app in NodeJs or so for a back end of what the File Upload component expects to implement some of these features.

Upload

asked on 21 Sep 2022

0 answers

107 views

How to implement sortable drag & drop in kendo-multiselect with kendo-sortable...

Hello,

I would like to implement exactly the same behaviour as in this kendo-multiselect for jQuery https://docs.telerik.com/kendo-ui/knowledge-base/listview-multipleselection-drag-to-select-draggable

How can I do it in angular ??

Here is my multiselect.

To be honest I dont know how to approach this. As you an see I have

kendoMultiSelectTagTemplate

And I would like to reorder this partictular element actually(in my case this is string with one checkbox that is readonly)

              [checkboxes]="{ checkOnClick: false, enabled: true }"
              formControlName="selectedLanguages"
              (valueChange)="onSelectedLanguageChange($event)"
              [autoClose]="false"
              textField="Language"
              valueField="Value"
              [data]="availableLanguages">
              <ng-template kendoMultiSelectItemTemplate let-dataItem>
                <span> {{ dataItem.Language }}</span>

                <label class="use-channel-lang-label" [for]="useChannel"> Use channel language: </label>
                <input
                  type="checkbox"
                  (change)="onUseChannelLangValueChange($event, dataItem)"
                  #useChannel
                  [checked]="dataItem.UseChannelLanguage"
                  kendoTooltip="Use channel language"
                  kendoCheckBox />

              </ng-template>

              <ng-template kendoMultiSelectTagTemplate let-dataItem>
                <span>{{ dataItem.Language }}</span>
                <kendo-sortable [kendoSortableBinding]="languages"></kendo-sortable>
                <input type="checkbox" [checked]="dataItem.UseChannelLanguage" [disabled]="true" kendoCheckBox />
              </ng-template>
            </kendo-multiselect>

MultiSelect

Sortable

asked on 21 Sep 2022

1 answer

307 views

Disabled checkbox - not working

Hello,

I have a form in component. One of controls is checkbox. I'm setting initially its state to disabled, but it's not working, it's always enabled.

        <kendo-formfield [orientation]="'horizontal'">
          <kendo-label [for]="searchWithoutRouteCheckbox" text="wyszukaj bez trasy"></kendo-label>
          <input type="checkbox" #searchWithoutRouteCheckbox class="search-without-route-type"
            [formControlName]="formNames.searchWithoutRoute" [value]="formModel.searchWithoutRoute" kendoCheckBox
            [disabled]="areControlsDisabled" />
          <app-form-error [controlName]="formNames.searchWithoutRoute" [form]="form"></app-form-error>
        </kendo-formfield>

  /**
   * If form controls should be disabled
   * @type {boolean}
   * @public
   */
  public areControlsDisabled: boolean = true;

  /**
   * Fired when railway objects combobox value is changed
   * @param {RailwayObject} value railway object item
   * @public
   */
  public railwayObjectsValueChange(value: RailwayObject): void {
    if (value) {
      this.areControlsDisabled = false;
      this.isSearchButtonDisabled = false;
      this.isClearButtonDisabled = true;
      return;
    }
    this.areControlsDisabled = true;
    this.isSearchButtonDisabled = true;
    this.isClearButtonDisabled = true;
  }

CheckBox

answered on 20 Sep 2022