Telerik Forums
Kendo UI for Angular Forum
1 answer
103 views

Setting the initial TreeList selection, or clearing it programmatically, does not seem to update the Select All checkbox.  Is there a way to programmatically do it?
I am using row selection as described in these pages:

https://www.telerik.com/kendo-angular-ui/components/treelist/selection/row-selection#select-all-checkbox

https://www.telerik.com/kendo-angular-ui/components/treelist/selection/persisting#persisting-row-selection-based-on-a-specific-field

Thanks.

Zornitsa
Telerik team
 answered on 13 Jan 2025
1 answer
79 views

I have a flat list of objects that I am grouping for a dropdown list.  The issue is that no matter what, the order of the groups is always in descending order, even if I provide the "dir" sort descriptor.  Please see the following code


//Group departments by user departments and other for easier access on UI
this.departments.forEach(department => {
  department["subCategory"] = this.isMyDept(department.id) ? "My Departments": "Others";
});
this.departmentGrouping = groupBy(this.departments, [
  { field: "subCategory", dir: "asc" },
]) as GroupResult[];

<kendo-dropdownlist
            [(ngModel)]="deptID"
            [data]="departmentGrouping"
            [filterable]="true"
            [showStickyHeader]="false"
            textField="name"
            valueField="id"
            [valuePrimitive]="true"
          >
</kendo-dropdownlist>

When my dropdown is displayed, the "Others" group is always on top.  It doesn't matter if I change the "dir" descriptor to "asc" or "desc" in the groupBy function, nothing changes.  How do I sort the group order so I can have "My Departments" as the top group?

Martin Bechev
Telerik team
 answered on 13 Jan 2025
1 answer
183 views

Hi,

  Can I continue using the Kendo subscription license that I had which is expired now if I don't want to renew it?

Thanks.

Hetali
Telerik team
 answered on 09 Jan 2025
1 answer
89 views

i want to customize kendo-grid by own component . 

i think its only taking columns and i need help to get other things except columns like kendo-grid-checkbox-column, kendo-grid-command-column
https://www.telerik.com/forums/kendo-angular-editor-content-projection-for-custom-toolbar
this comment saying "Content projection is not typically supported in the Grid" so i have problem with it.

i'm using like https://stackblitz.com/edit/angular-7qonm9-7qusje this example.

app-grid-wrapper component
<kendo-grid
[data]="data"
[height]="height"
[loading]="loading"
[resizable]="resizable"
[selectable]="selectable"
[kendoGridSelectBy]="'selectionKeyBy'"
[selectedKeys]="selectedKeys"
(edit)="editHandler($event)"
(remove)="removeHandler($event)"
(cancel)="cancelHandler($event)"
(save)="saveHandler($event)"
(add)="addHandler($event)"
>
<ng-content></ng-content>
<kendo-grid-excel fileName="UserList.xlsx"> </kendo-grid-excel>
</kendo-grid>

 

and using like this other components

<app-grid-wrapper
#grid
[data]="dataService.view$ | async"
[loading]="dataService.pending"
[selectable]="{ mode: 'single' }"
[(selectedKeys)]="selectedItems"
(edit)="editHandler($event)"
(remove)="removeHandler($event)"
(cancel)="cancelHandler($event)"
(save)="saveHandler($event)"
(add)="addHandler($event)"
[resizable]="true"
nesAutoHeight

>

<kendo-grid-checkbox-column [width]="40" showSelectAll="true"></kendo-grid-checkbox-column>
<kendo-grid-column nesField="licenseCode">
<ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">
<input nesFormControl [readonly]="!isNew" [formControl]="formGroup.get('licenseCode')" />
</ng-template>
</kendo-grid-column>
<kendo-grid-column nesField="name">
<ng-template kendoGridCellTemplate let-dataItem>
<div class="">
<a style="color: #4e61ec" href="javascript:;" (click)="moreHandler(dataItem)"> {{dataItem.name}} </a>
</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column nesField="name2"></kendo-grid-column>
<kendo-grid-column nesField="licenseType">
<ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">
<kendo-dropdownlist
[formControl]="formGroup.get(column.field)"
[valuePrimitive]="true"
[dictCode]="'LCNS001'"
></kendo-dropdownlist>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.licenseType }} - {{ dataItem.licenseTypeName }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column nesField="status">
<ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">
<kendo-dropdownlist
[formControl]="formGroup.get(column.field)"
[valuePrimitive]="true"
[dictCode]="'LCNS002'"
></kendo-dropdownlist>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem> {{ dataItem.statusName }} </ng-template>
</kendo-grid-column>
<kendo-grid-column nesField="sysNo">
<ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">
<kendo-dropdownlist
[formControl]="formGroup.get(column.field)"
[valuePrimitive]="true"
[dictCode]="'LCNS008'"
></kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
<!-- <kendo-grid-excel fileName="licenseList.xlsx"></kendo-grid-excel>
<kendo-grid-pdf fileName="LicenseList.pdf"></kendo-grid-pdf> -->
<kendo-grid-command-column title="" [width]="220">
<ng-template kendoGridCellTemplate let-formGroup="formGroup">
<button kendoGridEditCommand class="k-secondary">
<i class="nes-i-edit"></i>
</button>
<button kendoGridRemoveCommand class="k-secondary">
<i class="nes-i-delete"></i>
</button>
<button kendoGridSaveCommand [disabled]="formGroup?.invalid">
<i class="nes-i-save"></i>
</button>
<button kendoGridCancelCommand><i class="nes-i-cancel"></i></button>
</ng-template>
</kendo-grid-command-column>
</app-grid-wrapper>

 but first thing is other than kendo-grid-column are not working. 

so getting columns like this

@ContentChildren(ColumnComponent) private columns: QueryList<ColumnComponent>;
ngAfterViewInit() {
this.grid.columns.reset(this.columns.toArray());
}

 

Yanmario
Telerik team
 updated answer on 09 Jan 2025
1 answer
307 views

I want to configure a custom button for the editor toolbar as described here https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/  However, the button should not always be there, depending on in which other component the editor is used. So, I wanted to approach the issue by using content projection with ng-content. I implemented the custom button and placed ng-content tag into the kendo-editor definition. However, when I try to project the custom button to the editor it does not work. The button is absent.

Below my editor implementation in an own component "my-editor".

<kendo-editor #editor
              [placeholder]="placeholder"
              [(ngModel)]="content"
              [iframe]="false"
>
  <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>
    <ng-content></ng-content>             <!-- The place where the custom buttons should be inserted -->
  </kendo-toolbar>
</kendo-editor>

I inject the custom button like that

<my-editor>
  <custom-button></custom-button>
</my-editor>

Yanmario
Telerik team
 updated answer on 09 Jan 2025
0 answers
36 views
Grid grouping only shows groups that appear in data.  How can I tell the grid all of my group by values.  I need to be able to show a group header and tell the user there are no records.
Brad
Top achievements
Rank 1
Iron
 asked on 08 Jan 2025
1 answer
126 views
Hello.  I'm not using a kendo form here, so that may well be my issue.  I have constructed a kendo-dialog window to add or edit an object using kendo inputs--primarily text boxes with a couple of dropdowns and a checkbox.  When editing I want the fields to display the current variable value.  I'm binding with [(ngModel)].  The problem is that when I open an edit window, those values don't display until I click on each field (bring them into focus).   Is there a way to get these to display?  Thanks.
Yanmario
Telerik team
 answered on 02 Jan 2025
2 answers
114 views

                  <kendo-multicolumncombobox [fillMode]="'flat'" [readonly]="!canEdit() || invoice().isPosted" #vendorList [data]="vendors()"
                    [filterable]="true" (filterChange)="handleFilter($event)" textField="display" valueField="id"
                    formControlName="vendor" [valuePrimitive]="true" (valueChange)="onVendorChange($event)" [popupSettings]="{width: '75em'}">

 

that is how it is being used.  all the values being accessed with () are signals and not methods that should get endlessly called (except for the filter and value change handlers)  But in 17.1.1 if you try to expand the dropdown or change the filter it grinds the whole page to a halt and the entire browser page becomes unresponsive.

Reverting to 17.1.0 fixes the issue.

Zornitsa
Telerik team
 answered on 20 Dec 2024
0 answers
139 views

After update I've arrors in console:

./node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "444501037893190567" ("clear" - "kendo.timepicker.clearTitle").

./node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "5837182130353517790" ("clear" - "kendo.datetimepicker.clearTitle").

./node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "6401309146619618412" ("clear" - "kendo.datepicker.clearTitle").

./node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "6947941843239609210" ("clear" - "kendo.dateinput.clearTitle").

./node_modules/@progress/kendo-angular-layout/fesm2020/progress-kendo-angular-layout.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "3414996632637231223" ("next" - "kendo.timeline.next").

./node_modules/@progress/kendo-angular-layout/fesm2020/progress-kendo-angular-layout.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "5733397898153231659" ("previous" - "kendo.timeline.previous").
How to fix this issue?
Robert
Top achievements
Rank 2
 asked on 20 Dec 2024
1 answer
187 views

I use an in-line editing Grid. On one column I have defined a tooltip like so:

<ng-template #templateVMReq let-anchor>
  <span>PAY = négatif, COL=Positif</span>
</ng-template>
<div class="grid" id="repoCompenseGrid"
      kendoTooltip
      showOn="none"
      [tooltipTemplate]="templateVMReq"
      filter=".k-grid td"
      (mouseover)="showTooltip($event)">

*Template to define the tooltip and it's anchor, the reference to the directive in the grid and the template associated to it as well as the mouseover event that calls the tooltip. 

 <kendo-grid-column
        title="VM Requirement"
        field="miVmRequirement"
        [width]="75"
        [headerClass]="'customHeader gridHeaderDefault'"
        [headerStyle]="{ 'white-space': 'pre-wrap' }"
        [editable]="false"
        [filter]="'numeric'"
        [editable]="editable"
        [class]="{ vmReqColumn: true }"
      >
        <ng-template kendoGridCellTemplate let-dataItem>
          <app-format-number-red [value]="dataItem.miVmRequirement" />
        </ng-template>
       
      </kendo-grid-column>

*This ios the column where the tooltip needs to be displayed

*This is the showTooltip method that allows the correct cells to trigger the display of the tooltip template on its anchor.

This works when the cell contains a value, however the cell is empty by default and since it's empty there is no style attribute to the cell until it contains a value so the tooltip is never displayed when the cell is empty.

I've tried applying an id to the column, to wrap it in a div with an id but they are always empty. I cannot target the cell using something other than the classList which is null when the cell is empty.

How can I identify the correct cell despite being empty to show the tooltip?

How can I have custom text for different cells?

Why is it so complicated to just implement a simple tooltip? Wouldn't be easy if there were a tooltip directive built-in to the grid i.e. [tooltiptext]="''Simple Tooltip"

 

Please refrain from using jQuery I am unfamiliar with its syntax and am using the Angular version of Kendo.

 

**This project is on Angular 17.2 and uses the Kendo 15.1 Libraries. I am aware there is a new version but it breaks all our theme variables.

 

 

Zornitsa
Telerik team
 answered on 20 Dec 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?