Hi!

I am looking for examples to implement following when virtual scrolling is enabled for Kendo Angular Grid.

- Predefined group when loading the grid initially. For example, when I navigate to a page which has the grid, I would like to group the grid using a particular column and keep all the groups collapsed. I have tried multiple approaches such as this one: https://stackblitz.com/edit/angular-tpetae

- Have an external button to collapse and expand all groups. For example, when I change grouping on the grid by dragging and dropping columns, I would like to make it easy for user to quickly reach the group needed.

-Ability to display Group header aggregations. I came up with something like this to show count of rows under each group:

<kendo-grid-column field="myCol" title="My Col" width="300">
            <ng-template kendoGridGroupHeaderTemplate let-group let-value="value" let-aggregates>
                <div>{{value}} ({{getCount(aggregates)}})</div>
            </ng-template>
        </kendo-grid-column>
getCount(agg: any): number {
    return (agg && agg.items) ? agg.items.length : 0;
  }

But it doesn't work when groups are collapsed, count becomes 0 (especially when grouping with multiple columns)

Hi

I am trying to have the default filter operators for all dates, set to search between to dates.
My first operator is operator="gte" but how I can change the extra operator to operator="lte" in the kendo-grid-date-filter-menu ?

hi, I have found an issues with autosize true. for large text it adds a lot of empty rows. How can I resolve this issue? See example below

https://stackblitz.com/edit/kendo-angular-textarea-autosize-height-b7csdb

I am attempting to include a Kendo Bullet Chart in my .Net Core Angular Application.

The one issue I have come up against is finding the functionality needed to customize the Target Line (color, width, shape potentially).

I have seen that this is possible for Kendo UI in Jquery, etc. but I cannot find an example in Angular.

I have attached an example of what I currently have (top) vs what I am looking for(bottom).

Any help would be appreciated.

Note:

Below is the html and typescript code showing how the line is currently getting populated.

<kendo-chart-series-item type="bullet" [(data)]="temp" color="#fff" >
          </kendo-chart-series-item>

public temp: any[] = [[0,2]];

I have sparkline charts embedded in my grid with tooltips.
I can not get the tooltip to display predictably without flickering.
The problem is outlined in the mp4 file in the zip attached.
Can you suggest anything for me too look for or any css to bring the tooltip to the fore and stop it flickering?

Hi,

We are using kendo grid for Angular and displaying the results based on some input criteria (input some fields in the form and click on button to fetch results and display in grid). For the first time grid displays the first page.

If we change the search criteria and fetches the results, the grid still displays the previous page index and not reset to first page.

EX: We set the pageSize as 10. In the first search request we get 100 records. So displayed 10 pages. I select 8'th page

       In the second search request we get only 40 records displaying 4 pages. But no data is displayed in the grid unless we click on any of the 4 paging buttons         as it is still considering the page index as 8.

How can we reset page index to first page  with every new request that is fetching new data. We are using "kendoGridBinding" to bind the data to the grid

<kendo-grid [style.height.%]="100" #grid
     [kendoGridBinding]="gridData"

     [pageSize]="10"
     [pageable]="true"

     <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
          <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
          <kendo-pager-numeric-buttons [buttonCount]="10"></kendo-pager-numeric-buttons>
          <kendo-pager-next-buttons></kendo-pager-next-buttons>
          <kendo-pager-info></kendo-pager-info>
          <kendo-pager-page-sizes [pageSizes]="[10, 50, 100, 200]"></kendo-pager-page-sizes>     

    </ng-template>

</kendo-grid>

Thanks in advance,

Rajesh

Hello, 

i am trying to implement a language switch for the grid in AngularJS. I found this page in the forum https://docs.telerik.com/kendo-ui/knowledge-base/angular-dynamic-language-change. Unfortunately this example is for jquery and not for AngularJS even though it should be according to the title. How can i implement this in Angular?

Here https://www.telerik.com/kendo-angular-ui/components/grid/how-to/persist-state/ you are using onReorder function:

public onReorder(e: any): void {

const reorderedColumn = this.grid2Settings.columnsConfig.splice(e.oldIndex, 1);

this.grid2Settings.columnsConfig.splice(e.newIndex, 0, ...reorderedColumn);this.saveGrid2();

}

If you select to start by default with some columns hiddenthe reordering is not working properly.

This is my error message:

ERROR in ./node_modules/@progress/kendo-angular-grid/dist/fesm2015/index.js 9465:29-35
"export 'getter' was not found in '@progress/kendo-common'
ERROR in ./node_modules/@progress/kendo-angular-grid/dist/fesm2015/index.js 9486:33-39
"export 'getter' was not found in '@progress/kendo-common'
ERROR in ./node_modules/@progress/kendo-angular-grid/dist/fesm2015/index.js 11538:26-32
"export 'getter' was not found in '@progress/kendo-common'

Partial of my package.json

"@telerik/kendo-draggable": "^2.2.0",
"@progress/kendo-angular-buttons": "^5.5.2",
"@progress/kendo-angular-common": "1.2.3",
"@progress/kendo-angular-dateinputs": "^4.4.0",
"@progress/kendo-angular-dropdowns": "4.4.1",
"@progress/kendo-angular-excel-export": "^3.1.6",
"@progress/kendo-angular-grid": "4.8.2",
"@progress/kendo-angular-inputs": "6.7.3",
"@progress/kendo-angular-intl": "^2.0.4",
"@progress/kendo-angular-l10n": "^2.0.3",
"@progress/kendo-angular-pdf-export": "2.1.0",
"@progress/kendo-angular-popup": "^3.0.7",
"@progress/kendo-data-query": "^1.5.4",
"@progress/kendo-drawing": "^1.9.3",
"@progress/kendo-theme-default": "latest",
"@progress/kendo-ui": "2020.3.1118",

"webpack": "^4.42.1",

I have done:

npx npm-check-updates -u -f /.*@progress.*/ --packageFile projects/dino-spikes-lib/package.json

npm install

Any ideas?

Hi,

I have 3 components in a form (1.dropdownlist, 2.multiselect, 3.dropdownlist) and I need to add some dependencies among them. 

The 2nd component should turn into a required component based on the value selected in the 1st component. And being a multiselect, the user needs to select at least one option.

The 3rd component is defaulted to 'No' and has to be changed to 'Yes' when a particular value (I'll call it value 'A') is selected in the 2nd component.

Note that the 2nd component can be left blank on submit if the value selected in the 1st components is '6'. 

Here is a portion of the code, I'm not looking to use cascading components but leave the code as is with the existing data binding:

Thanks,

Carla