Questions on Kendo UI for Angular Forum

1 answer

135 views

How to set focus on next Node after deletion of node in tree-list

In our application we are using angular 14 and the kendo control tree-list , our requirement is to set the focus on the next node after we delete any node . Is there any possible method or way out to set focus.

For example If we delete "BW Input Template" then focus should be set on "Report Template" (there can be any number of node in BW Input Template folder ) and same for any node within the folder if deleted then focus should set to next node within the folder also I need the focused node data.

The code sample and data is below

<kendo-treelist
class="kendo-treelist"
[kendoTreeListFlatBinding]="data"
#directive="kendoTreeListFlatBinding"
parentIdField="wrkdocParentoid"
idField="wrkdocOid"
kendoTreeListExpandable
kendoTreeListSelectable
[height]="1200"
[rowReorderable]="true"
(cellClick)="onCellClick($event)"
>
<kendo-treelist-rowreorder-column
[width]="25"
>
</kendo-treelist-rowreorder-column>
<kendo-treelist-column
[expandable]="true"
title="Name"
[width]="250"
>
<ng-template
kendoTreeListCellTemplate let-dataItem let-rowIndex="rowIndex"
>
<span class="k-icon k-i-folder" *ngIf="isFolder(dataItem)"></span>
<span> {{ getTemplateName(dataItem) }}</span>
</ng-template>
</kendo-treelist-column>
<kendo-treelist-column
field="wrkdocUdid"
title="ID"
[width]="140"
></kendo-treelist-column>
</kendo-treelist>

DATA set:

mockData: any[] = [
{
wrkdocOid: 3,
wrkdocType: 'RootTemplateContainer',
wrkdocUdid: 'BuiltIn.RootContainer',
wrkdocDescription:
'an invisible built-in folder which contains all items that appear on the root level',
wrkdocUpdatedate: null,
wrkdocUpdatename: null,
wrkdocWrkxlsoid: null,
wrkdocParentoid: null,
wrkdocPosition: null,
wrkdocXmlfile: null,
fmwrkdoclans: [],
inverseWrkdocParento: [],
wrkdocParento: null,
},
{
wrkdocOid: 4,
wrkdocType: 'UnusedTemplateContainer',
wrkdocUdid: 'BuiltIn.UnusedContainer',
wrkdocDescription:
'an invisible built-in folder which contains all items that appear in the not-used list',
wrkdocUpdatedate: null,
wrkdocUpdatename: null,
wrkdocWrkxlsoid: null,
wrkdocParentoid: null,
wrkdocPosition: 1,
wrkdocXmlfile: null,
fmwrkdoclans: [],
inverseWrkdocParento: [],
wrkdocParento: null,
},
{
wrkdocOid: 5,
wrkdocType: 'Folder',
wrkdocUdid: 'BwTemplates',
wrkdocDescription: null,
wrkdocUpdatedate: '2010-03-03T09:42:15',
wrkdocUpdatename: null,
wrkdocWrkxlsoid: null,
wrkdocParentoid: 3,
wrkdocPosition: 0,
wrkdocXmlfile: null,
fmwrkdoclans: [],
inverseWrkdocParento: [],
wrkdocParento: null,
},
{
wrkdocOid: 52,
wrkdocType: 'Folder',
wrkdocUdid: 'BwIT100',
wrkdocDescription: null,
wrkdocUpdatedate: '2010-03-17T13:55:12',
wrkdocUpdatename: 'Basware system',
wrkdocWrkxlsoid: null,
wrkdocParentoid: 5,
wrkdocPosition: 0,
wrkdocXmlfile: null,
fmwrkdoclans: [
{
wrkdoclanWrkdocoid: 52,
wrkdoclanText: 'BW Input Templates',
wrkdoclanLanudid: 'EN',
wrkdoclanWrkdoco: null,
},
{
wrkdoclanWrkdocoid: 52,
wrkdoclanText: 'BW Syöttöpohjat',
wrkdoclanLanudid: 'FI',
wrkdoclanWrkdoco: null,
},
],
inverseWrkdocParento: [],
wrkdocParento: null,
},

{

{
wrkdocOid: 10200,
wrkdocType: 'Template',
wrkdocUdid: 'E_104',
wrkdocDescription: null,
wrkdocUpdatedate: '2023-01-13T12:56:10',
wrkdocUpdatename: 'Latvanen Henri',
wrkdocWrkxlsoid: 10124,
wrkdocParentoid: 4,
wrkdocPosition: 0,
wrkdocXmlfile: 20241,
fmwrkdoclans: [
{
wrkdoclanWrkdocoid: 10200,
wrkdoclanText: 'laskelma',
wrkdoclanLanudid: 'EN',
wrkdoclanWrkdoco: null,
},
{
wrkdoclanWrkdocoid: 10200,
wrkdoclanText: 'laskelma',
wrkdoclanLanudid: 'FI',
wrkdoclanWrkdoco: null,
},
],
inverseWrkdocParento: [],
wrkdocParento: null,
},
];

TreeList

answered on 14 Nov 2023

0 answers

118 views

Gantt Chart in Angular with custom expand/collapse based on level

Using the Gantt chart is it possible to specify if a particular task (that has children) should be expanded or collapsed? For example, we would want any level 2 or above tasks to be collapsed which would leave just the top level expanded. I see there is an [initiallyExpanded] attribute for <kendo-gantt>, but I need at a more granular level.

Gantt

asked on 13 Nov 2023

1 answer

533 views

Unable to clear display value of Kendo Editor when wrapped in custom component

I am trying to create a custom component that wraps the Kendo Editor so I can display a label and validation messages all within the same component. The goal is to make it reuseable and self-contained. The majority of it is working except for clearing out the form. When reset is called on the parent form (and then the form control) the backing value is reset to null but the display value remains the same.

The code for the custom component is below. I feel like either I'm missing something or the implementation is not correct. Thanks in advance.

rich-text.component.ts

import { Component, forwardRef, Injector, Input, OnDestroy, OnInit } from '@angular/core';
import { ControlValueAccessor, FormControl, FormControlDirective, FormControlName, FormGroupDirective, NgControl, NgModel, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator, Validators } from '@angular/forms';
import { PaletteSettings } from '@progress/kendo-angular-inputs';
import { ERROR_MESSAGES } from 'core/constants';
import { noWhitespaceValidator } from 'core/helpers/customValidators';
import { HTMLUtilities } from 'core/services/utility/html-utilities.service';
import { Subscription } from 'rxjs';

@Component({
    selector: 'rich-text',
    templateUrl: './rich-text.component.html',
    styleUrls: ['./rich-text.component.scss'],
    providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          multi: true,
          useExisting: forwardRef(() => RichTextComponent)
        },
        {
            provide: NG_VALIDATORS,
            useExisting: forwardRef(() => RichTextComponent),
            multi: true
          }      
      ]
  })
  
export class RichTextComponent implements OnInit, OnDestroy, ControlValueAccessor, Validator {

    @Input() label: string = 'Please supply label';
    @Input() placeholder: string = 'Please provide a value';

    public paletteSettings: PaletteSettings = {
        palette: 'basic'
    }

    formControl = new FormControl('', [Validators.required, noWhitespaceValidator]);
    subs: Subscription[] = [];
    _htmlUtilities: HTMLUtilities;
    onChange: any = () => {};
    onTouch: any = () => {};

    constructor(htmlUtilities: HTMLUtilities) {
        this._htmlUtilities = htmlUtilities;
    }

    ngOnInit(): void {

    }

    ngOnDestroy(): void {
        this.subs.forEach((s) => s.unsubscribe());
    }

    writeValue(value: string): void {
        if (value) {
            this.formControl.setValue(value);
        }

        if (value === null) {
            this.formControl.reset();
            this.formControl.setValue('');
        }
    }

    registerOnChange(fn: any): void {
        this.subs.push(
            this.formControl.valueChanges.subscribe(fn)
          );
    }

    registerOnTouched(fn: any): void {
        this.onTouch = fn;
    }

    validate(_: FormControl) {
        return this.formControl.valid ? null : this.formControl.errors;
    }

    getErrorMessage() {
        if (this.formControl.errors['required']) {
            return ERROR_MESSAGES.REQUIRED;
        }
        if (this.formControl.errors['whitespace']) {
            return ERROR_MESSAGES.WHITESPACE;
        }
    }
}

rich-text.component.html

<div>
  <kendo-label [text]="label" class="rich-text-label"></kendo-label>
    <kendo-editor [formControl]="formControl" (blur)="onTouch()"
      [placeholder]="placeholder" [pasteCleanupSettings]="_htmlUtilities.pasteCleanupSettings">
        <kendo-toolbar>
          <kendo-toolbar-buttongroup>
            <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
          </kendo-toolbar-buttongroup>
          <kendo-toolbar-colorpicker
            kendoEditorForeColor
            [paletteSettings]="paletteSettings"
          ></kendo-toolbar-colorpicker>
          <kendo-toolbar-colorpicker
            kendoEditorBackColor
            [paletteSettings]="paletteSettings"
          ></kendo-toolbar-colorpicker>
          <kendo-toolbar-buttongroup>
            <kendo-toolbar-button
              kendoEditorInsertUnorderedListButton
            ></kendo-toolbar-button>
            <kendo-toolbar-button
              kendoEditorInsertOrderedListButton
            ></kendo-toolbar-button>
          </kendo-toolbar-buttongroup>
          <kendo-toolbar-buttongroup>
            <kendo-toolbar-button
              kendoEditorCreateLinkButton
            ></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>
          </kendo-toolbar-buttongroup>
        </kendo-toolbar>
      </kendo-editor>
  <mat-error *ngIf="formControl.invalid">
    {{getErrorMessage(formControl) | translate}}
  </mat-error>
</div>

Editor

answered on 13 Nov 2023

0 answers

532 views

Drawer items - can you change the selected item programatically?

The drawer is working fine when I click to select items, but there are cases where I want to select an item programmatically instead of a mouse click.

My drawer's items come from an array of DrawerItem objects:

[items]="drawerItems"

In the .ts file, I've tried both of these ways to change the selected item:

drawerItems[index].selected = true;

and creating a reference to the drawer with @ViewChild

drawer.items[index].selected = true;

I can see from console.log statements that both are adding a "selected = true" property to the correct DrawerItem, but it has no effect in the template. Is there a better way to achieve this?

Drawer

asked on 10 Nov 2023

1 answer

282 views

Kendo Grid Master Detail

Hi,

Master Detail Grid with custom icon (expand and collapse) and align detail row columns with parent columns width in percentage. Like below image

Grid

answered on 10 Nov 2023

1 answer

148 views

Colors of Gantt Task bars

The colors for the taskbar overall and completed are too close to one another such that some of the user cannot tell the percent complete. Can anyone tell me the styles to use to color of the overall bar and completed portion.

I have tried (with primary colors as a test.

div.k-task-template {
background-color: red !important;

}
k-task.k-task-complete {
background-color: yellow !important;
}

any help would be appreciated.

Gantt

answered on 10 Nov 2023

1 answer

367 views

Style che select row checkbox column

Hi folks,

the question is: how I can modify the style of the select row checkbox inside kendo-grid?

I use the kendo-grid for AngularUI.

I have added the kendo-grid-checkbox-column for selecting multiple row. Using the <ng-template kendoGridHeaderTemplate> I'm able to change the style of the header check box.

I need to change the style of the row checkbox. I have tried to verride the css class (using <style> on the component html or adding class to the component css) .k-checkbox

new class:

.k-checkbox {
    border: 1px solid #474747 !important; 
    width:24px !important; 
    height: 24px !important;
    border-radius: 8px !important;
  }

Picture:

Grid

answered on 10 Nov 2023

1 answer

307 views

Datepicker has decided to only allow 2-digit years on keyboard input

Since upgrading to 14.0.1, if a date-picker is provided with a Date object that contains time (e.g., if I default it to "right now", aka `new Date()`), trying to change the value with the keyboard will only allow 2 digits.

So, effectively, as I try to type, say, 2013, the date-picker's year field will show:

0002
0020
0001
0013

I have not been able to find anything in the API that switches how many years the input should accept (only which year should be the "break around" for 2-digit years).

If the field is prefilled with a Date object with no time (i.e. time is 00:00:00), this doesn't happen.

What am I missing?

DatePicker

answered on 09 Nov 2023

0 answers

273 views

Adding white-space: nowrap to textarea

I am having an issue applying a white-space: nowrap style to a kendo-textarea. The parent kendo-textarea has the nowrap style, the textarea inside the kendo-textarea inherites the nowrap but the user agent stylesheet then overrides the nowrap and giving it a pre-wrap.

Is there a way to add styling to a textarea directly without it being inherited through kendo-textarea?

TextArea