Telerik Forums
Kendo UI for Angular Forum
1 answer
5 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

Bob
Top achievements
Rank 1
Iron
 answered on 11 May 2021
0 answers
2 views
How can I do a search bar in the kendo listview ?
hiba
Top achievements
Rank 1
 asked on 11 May 2021
1 answer
5 views
 Is it possible to open kendo date range picker from a single input field in angular 8 and it should be a convert to text format ex. (Jan 8th - Feb 08th, 2021 ) Please refer the attached image
Hetali
Telerik team
 updated answer on 11 May 2021
0 answers
2 views

There seems to be a bug when filtering the grid with virtual scrolling. Everything works fine if I apply the filter before scrolling through the grid.

Now failed scenario:

1. Scroll to the very bottom of the grid.

2. Apply filter.

Result - nothing shows up. Unless you scroll, then the records magically appear. Setting skip to 0 after filtering does nothing, skip = 1 works sometimes.

Fun fact: if  filtered item list does not exceed the maximum number of rows in the actual grid view, there is no way to make them display.

 

Is there a way to bypass this issue? Am I doing something wrong?

https://kendo-grid-checkall-kjuhaw.stackblitz.io

https://stackblitz.com/edit/kendo-grid-checkall-kjuhaw?file=app

Krzysztof
Top achievements
Rank 1
 updated question on 11 May 2021
0 answers
2 views

By default the kendo-numerictext box uses the "n3" format. Is there any way to disable formatting? I would like the number displayed to be the number entered by the user. 

Thanks!

Daniel
Top achievements
Rank 1
 asked on 11 May 2021
4 answers
17 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? 

 

 

Bob
Top achievements
Rank 1
Iron
 updated answer on 11 May 2021
3 answers
12 views

Hello,

  We are upgrading the version of the kendo libs we are using. The tree view version went from 4.3.0 to 5.1.1. After this upgrade the tree views in our app don't update dynamically when the bound data is changed. That is when nodes are added, they are not shown.

I tried to make a plunker to demo this problem, and at first I seemed to replicate it, but then I found that including the BrowserAnimationsModule in the plunker fixed it, but we're already doing that in our app. So I don't have a MWE to show you. :-( But it still makes me think it is some kind of animation failure. No errors are logged.

I hate asking this question without being able to provide an actual example, but maybe someone will recognize the symptoms... Here are some bits of the code, it's basically for displaying and editing GridList filters 



<kendo-treeview [nodes]="[filter]" kendoTreeViewHierarchyBinding childrenField="filters"> 

 <ng-template kendoTreeViewNodeTemplate let-dataItem let-index="index">
  <button kendoButton look="flat" icon="close" (click)="delete(index)"></button>
  <span *ngIf="dataItem.filters != null">
  <button kendoButton icon="filter-add-expression" [look]="'flat'" (click)="addFilter(dataItem)"></button>
  <button kendoButton icon="filter-add-group"[look]="'flat'"(click)="addGroup(dataItem)"></button>
 ...
 </ng-template>
</kendo-treeview>

...



public filter: CompositeFilterDescriptor;

public addFilter(dataItem: CompositeFilterDescriptor) {
 dataItem.filters.push({ field: '', operator: 'eq', value: '' });
}
public addGroup(dataItem: CompositeFilterDescriptor) {
 dataItem.filters.push({
  logic: 'and',
  filters: [{ field: '', operator: 'eq', value: '' }],
 });
}

Here are the version changes we did. I also tried updating Angular from 11.0.4 to 11.2.12 without luck.

Stefani
Telerik team
 answered on 11 May 2021
0 answers
2 views
I see the example of providing custom visuals for chart labels using drawing functions (https://www.telerik.com/kendo-angular-ui/components/charts/elements/labels/#toc-rendering-custom-visuals), but how would one go about replacing the axis labels with, say, a kendo avatar or some other kendo component? I can't find an example of that.
Art Kedzierski
Top achievements
Rank 2
 asked on 10 May 2021
1 answer
7 views

We are using Kendo Theme Default 4.37.0 for implementing dark and light theme to our Kendo charts in our project. However, a recent upgrade to some of our packages are disabling the kendo theme that we have set up.

Steps to reproduce the issue on our side is to delete the current package-lock.json file, delete node modules and then npm install.

under style.scss, we have

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

 

I have attached our package-lock.json file (post upgrade) for reference.

Anyone having this issue or know the cause behind it?

 

Martin
Telerik team
 answered on 10 May 2021
1 answer
10 views

Hello all,

I am using kendo grid. When call a function in cell template, this function is constantly triggering for all data in the grid. It causes a problem when I want to load a lot of data in the grid.

How can i solve this ?

Thanks.

<kendo-grid-column>
<ng-template kendoGridCellTemplate let-dataItem>
{{GetExpenditure(dataItem)}}
</ng-template>
</kendo-grid-column>

 

Dimiter Madjarov
Telerik team
 answered on 10 May 2021