I am using the kendo-chart to display charts in my application.  I need to format the values on the chart to currency.  I have tried to use the format option on the kendo-chart-series-item but that did not work.

                <kendo-chart [title]="{ text: selectedCommentDriver?.driverTypeText  + ' Chart' }"  *ngIf="selectedCommentDriver?.driverType === 1">
                    <kendo-chart-series >
                        <kendo-chart-series-item type="column" [data]="(ChartData$ | async) ?.acuityChartData" field="nprImpact"  categoryField="chartLabelText" [labels]="seriesLabels" >
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                    <kendo-chart-category-axis>
                        <kendo-chart-category-axis-item>
                        <kendo-chart-category-axis-item-labels [position]="'end'"></kendo-chart-category-axis-item-labels>
                        </kendo-chart-category-axis-item>
                    </kendo-chart-category-axis>
                </kendo-chart>

Here is a sample of the bar chart with sample data of 100000.  I would like these values to be $100,000.00

Thank you for the help,

Jimmy

Hi 

I was checking this https://www.telerik.com/kendo-angular-ui/components/data-query/api/FilterDescriptor/#toc-ignorecase and tried to use the gte on my filters like in the following example:

 public onFilter(inputValue: string): void {
        this.gridView = process(this.gridData, {
            filter: {
                logic: 'or',
                filters: [
                    {
                        field: 'mainDate',
                        operator: 'gte',
                        value: inputValue
                    },
                    {
                        field: 'otherDate',
                        operator: 'gte',
                        value: inputValue
                    }
                ],
            }
        }).data;

My dates are all formatted in the European date format using a pipe like this in the template:

<ng-template kendoGridCellTemplate let-dataItem>
        {{ dataItem[col.field] | date:'dd/MM/yyyy'}}
</ng-template>

but when I am trying to search for a date ex: 21/05/2010 the data are not filtered on mainDate and otherDate dates greater than 21/05/2010. I am not getting any kind of JS error, but the grid is getting empty, like it doesn't find anything mathcing the filter.

If it's not clear, I could try to make an example on stackblitz.

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.