Telerik Forums
Kendo UI for Angular Forum
1 answer
769 views

Is it possible to perform server-side grouping/aggregates on a grid? I have several columns which are calculated percentages that need the raw data to accurately calculate averages.

Thanks

Svet
Telerik team
 answered on 26 May 2021
2 answers
905 views

Drag and Drop functionality is not available in Kendo UI for Angular.

I need this type of feature in Kendo UI for Angular.

https://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/draganddropnodes/defaultcs.aspx

I couldn't find this option. Can you please let me know is this feature will include in coming versions or not. Let me know is there any alternative way to achieve this.

Ivan
Telerik team
 answered on 26 May 2021
1 answer
2.5K+ views

Hi

How can we expand all nodes of kendo treeview in angular on the click of a button? Any help would be appreciated.

 

Thank You

 

 

Hetali
Telerik team
 answered on 25 May 2021
2 answers
822 views

Hi,

I tried the ExpansionPanel by implementing the example below in my app-root component:

Interaction - ExpansionPanel - Kendo UI for Angular (telerik.com)

All panels are expanded by default, if I click on the collapse button, I see the animation to go from expanded to collapse state, but the panel resets itself immediatly to its expanded state. (see video as attachment)

I am importing this style in my styles.scss:

@import "~@progress/kendo-theme-bootstrap/scss/expansion-panel/index";

When I add the all.scss in my styles it seems to work correctly...

@import "~@progress/kendo-theme-bootstrap/scss/all.scss";

 

Any idea why this does not work?

thx!

----

My Styles.scss

@import "~@progress/kendo-theme-bootstrap/scss/appbar/index";
@import "~@progress/kendo-theme-bootstrap/scss/badge/index";
@import "~@progress/kendo-theme-bootstrap/scss/icons/index";
@import "~@progress/kendo-theme-bootstrap/scss/menu/index";
@import "~@progress/kendo-theme-bootstrap/scss/grid/index";
@import "~@progress/kendo-theme-bootstrap/scss/avatar/index";
@import "~@progress/kendo-theme-bootstrap/scss/drawer/index";
@import "~@progress/kendo-theme-bootstrap/scss/datetime/index";
@import "~@progress/kendo-theme-bootstrap/scss/notification/index";
@import "~@progress/kendo-theme-bootstrap/scss/loader/index";
@import "~@progress/kendo-theme-bootstrap/scss/expansion-panel/index";
@import "~@progress/kendo-theme-bootstrap/scss/bootstrap_dist.scss";

 

My Kendo-packages.json

  "@progress/kendo-angular-buttons""^6.1.2",
    "@progress/kendo-angular-common""^2.0.1",
    "@progress/kendo-angular-dateinputs""^5.2.0",
    "@progress/kendo-angular-dropdowns""^5.3.0",
    "@progress/kendo-angular-excel-export""^4.0.1",
    "@progress/kendo-angular-grid""^5.1.2",
    "@progress/kendo-angular-icons""^0.4.3",
    "@progress/kendo-angular-indicators""^1.1.0",
    "@progress/kendo-angular-inputs""^7.2.1",
    "@progress/kendo-angular-intl""^3.1.1",
    "@progress/kendo-angular-l10n""^3.0.1",
    "@progress/kendo-angular-label""^3.0.3",
    "@progress/kendo-angular-layout""^6.1.5",
    "@progress/kendo-angular-menu""^3.0.2",
    "@progress/kendo-angular-messages""^1.29.1",
    "@progress/kendo-angular-navigation""^1.1.0",
    "@progress/kendo-angular-notification""^3.0.1",
    "@progress/kendo-angular-pdf-export""^3.0.1",
    "@progress/kendo-angular-popup""^4.0.1",
    "@progress/kendo-angular-progressbar""^2.0.1",
    "@progress/kendo-angular-treeview""^5.3.1",
    "@progress/kendo-data-query""^1.5.5",
    "@progress/kendo-drawing""^1.10.0",
    "@progress/kendo-licensing""^1.1.4",
    "@progress/kendo-svg-icons""^0.1.2",
    "@progress/kendo-theme-bootstrap""^4.35.1",
Georgi
Telerik team
 answered on 25 May 2021
1 answer
527 views

Hi,

I have a few pages with the code structure below and I'm looking to make the right pane a floating pane. The reason for this is because the panel bar in the left pane can be quite long when expanded. The right pane displays functions from the item selected in the left pane and hence they need to be visible at all times when the user scrolls down. What's the best way to achieve this?

Here is a sample of the code:


<kendo-splitter orientation="horizontal">
  <kendo-splitter-pane size="50%" min="40%">
    <div class="panelbar-wrapper">
      <kendo-panelbar [expandMode]="kendoPanelBarExpandMode"
                      (stateChange)="onPanelChange($event)"
                      [keepItemContent]="true">
        <kendo-panelbar-item 
           ......
        </kendo-panelbar-item>
      </kendo-panelbar>
    </div>
  </kendo-splitter-pane>
  <kendo-splitter-pane min="40%">
    <div *ngIf="openannotation" class="container card">
      <app-annotation [taskId]="selectedTaskId" [expId]="expId"></app-annotation>
    </div>
  </kendo-splitter-pane>
</kendo-splitter>

thanks in advanced,

Carla

 

Georgi
Telerik team
 answered on 24 May 2021
1 answer
260 views

Hello, I recently discovered that using the key combination of Shift+Return in the Angular editor is inserting an unclosed <br> tag into the HTML.  This is different from the JS editor where a closed <br/> tag is properly inserted.

Thanks,

Bob

Georgi
Telerik team
 answered on 24 May 2021
1 answer
273 views

Hi,

We are using angular grid. Quite often the alignment of cells in grid gets distorted. We tried in a sample https://angular-jwnnwp.stackblitz.io/. It is reproducible here as well. PFA the screenshot.

Please suggest if this can be handled.

Regards,

Jaspreet

Yanmario
Telerik team
 answered on 21 May 2021
0 answers
2.1K+ views

Hi,

We are creating a custom control which contains a kendo textbox. (The custom control only contains the kendo-textbox)
We want to use reactive forms with the formGroup/formControlName in this custom control on the kendo-textbox

How can I achieve this one?

thanks!

Kristof
Top achievements
Rank 1
Iron
Iron
 asked on 20 May 2021
1 answer
562 views

I am using a Kendo Grid component with a large variety of data set sizes, so I would like to use auto, but still make it multipage and have the PDF header and footer. I have this working with paperSize of A4 but when I set it to 'auto', then the header/footer templates do not show.

Is this a known issue? Currently using pdf-export 2.0.0, angular-grid 4.8.4

 

Svet
Telerik team
 answered on 20 May 2021
7 answers
2.7K+ views

I have implemented a custom drop-down filter following the instructions at Reusable Custom Filter Components.

So far so good.  I select a filter

and we can see it clearly in the settings for the grid and the Category column shows it has been applied.

 

Now I select the clear filter:

But the filter for the column is not cleared.

I have modified your code to give me an emitter when the default item is selected:

import { ComponentEventEmitterInputOutput } from '@angular/core';
import { FilterServiceBaseFilterCellComponent } from '@progress/kendo-angular-grid';
@Component({
    selector: 'drop-down-list-filter',
    template: `
    <kendo-dropdownlist
      [data]="data"
      (valueChange)="onChange($event)"
      [defaultItem]="defaultItem"
      [value]="selectedValue"
      [valuePrimitive]="true"
      [textField]="textField"
      [valueField]="valueField">
    </kendo-dropdownlist>
  `
})
export class DropDownListFilterComponent extends BaseFilterCellComponent {
    @Output() clearGridFilter = new EventEmitter<any>();
    public get selectedValue(): any {
        const filter = this.filterByField(this.valueField);
        return filter ? filter.value : null;
    }
    @Input() public filterany;
    @Input() public dataany[];
    @Input() public textFieldstring;
    @Input() public valueFieldstring;
    public get defaultItem(): any {
        return {
            [this.textField]: 'All...',
            [this.valueField]: 0
        };
    }
    constructor(filterServiceFilterService) {
        super(filterService);
    }
    public onChange(valueany): void {
        if (value === 0) {
            this.removeFilter(this.valueField// remove the filter
            this.clearGridFilter.emit(this.valueField);
        } else {
            this.updateFilter({ // add a filter for the field with the value
                field: this.valueField,
                operator: 'eq',
                value: value
            })
        }
        // this.applyFilter(
        //     value === null ? // value of the default item
        //         this.removeFilter(this.valueField) : // remove the filter
        //         this.updateFilter({ // add a filter for the field with the value
        //             field: this.valueField,
        //             operator: 'eq',
        //             value: value
        //         })
        // ); // update the root filter
    }
}

 

Which then clears all filters:

  clearGridFilter(): void {
    this.ncNotesGridSettings.state.filter = {
      logic: 'and'
      filters: []
    };
  }

 

Hardly ideal.  How do I hook the Clear filter button into the DropDownListComponent and make it work predictably? 

 

 

Martin Bechev
Telerik team
 answered on 19 May 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?