Telerik Forums
Kendo UI for Angular Forum
2 answers
753 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
465 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
215 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
225 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.0K+ 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
466 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.5K+ 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
1 answer
729 views

We are having a problem with the location of popup that is placed into a modal dialog when user needs to scroll down the main window in order to access the control that open the modal. The link shows the problem 

https://vsolvit-git.github.io/kendo-popup

There are 2 buttons that open the same modal dialog. 
When dialog is open by clicking on the top button, popups in the modal (dropdown and datepicker) are displayed as expected.

 When the same dialog is open by clicking on the bottom button the popups are missaligned (since the default 'appendTo' setting for the popup is 'root' the position accounts for the scroll offset).

I tried setting value of  'appendTo' to 'component' in the popupSettings. This fixes the alignment issue but makes popup unreachable when the control is located near the bottom of the dialog. 

Thank you

Svet
Telerik team
 answered on 19 May 2021
1 answer
199 views

Hi

 

Do you support Bootstrap5 without Jquery in May 2021 ?

Regards

Dimiter Madjarov
Telerik team
 answered on 19 May 2021
5 answers
1.8K+ views

Hi all,

I'm getting so frustrated with your scrollable options on the grid.
It seems to get horizontal scrolling to work we must set the width of the grid which has to be less that the total width of all the columns?
How am we supposed to get that to work when we have column selectors and users are adding and removing columns?
How the hell am I supposed to know the width of the grid when I want it to to expand to 100% width of the container?

Is it not possible for you guys to calculate the width after render, compare this to the parent div and then decide whether or not to implement a horizontal scroll?

A stackable option would be great so on a mobile device columns will stack with a container border around each row.
But let's just get the horizontal scroll sorted first, I have so many customers where the end of the grid simply disappears behind the container div.

Please help, your grid is way ahead of the competition for functionality but way behind in terms of responsive options.  The media-width stuff just causes even more work and confusion, I tried but had to pull it out after a lot of work and a lot of complaints.

BTW - well done on the forum, it's coming along nicely...

Cheers,
Bob

Martin Bechev
Telerik team
 answered on 17 May 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?