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

Hi,

Recently upgraded the angular project from 8 to 10. After the upgrade we noticed in master details grid details grid template which is in expanded mode is not refreshing while we invoke parent grid refresh. It was invoking the detail template ng onint in earlier version of angular. we are forced to collapse and expand to make the refresh happen. Is there any additional property missing in new angular/kendo version.

Angular Version -  "@angular/core": "10.2.0",

Angular Grid Version - "@progress/kendo-angular-grid": "4.8.0",

Thanks

Rajeev

hi, how can i print key and value of object inside template?

The template is 'kendo chart series item tooltip'

My html

My json:

This code doesn't work and it return this error:

Uncaught Error: Template parse errors:
The pipe 'keyvalue' could not be found ("ue" let-catego

Hi,

I am following the example here: https://www.telerik.com/kendo-angular-ui/components/grid/how-to/persist-state/
First of all the hidden is missing from column-settings.interface.ts.

Since I wanted to use more attributes like we can do when using  kendo-grid-column I changed the columnsConfig: ColumnSettings[]; to columnsConfig: any[]; into grid-settings.interface.ts 

I have severl date fields coming from my response in the following format: 2020-06-22T00:00:00
When I was using the HTML and kendo-grid-column with the following example I could get them formatted as I wanted:

<kendo-grid-column
          field="startDate"
          title="Start Date"
          [width]="120"
          filter="date"
          [hidden] = "true">

          <ng-template kendoGridCellTemplate let-dataItem>
            {{dataItem.startDate | date: 'dd/MM/yyyy'}}
          </ng-template>
        </kendo-grid-column>

Now that I had to move the logic into the component to be able to have persistent grids I am trying several format, but none seems to work:

columnsConfig: [{
            field: 'startDate',
            title: 'Start Date',
            filterable: true,
            filter: 'date',
            format: '{0:d}',
            hidden: true,
            width: 120
        } ]

And secondary how can I also add an action column in the begining of my grid with view, edit, delete icons as I did before in the html with the following code:

 <kendo-grid-column field="{{'common.actions' | translate}}" width="120">
          <ng-template kendoGridCellTemplate let-project let-isNew="isNew">
            <div class="action-buttons">
              <button title="{{'common.displayInfo' | translate}}"><i class="fa fa-info"></i></button>
              <button routerLink="/project/{{project.id}}/view"><i class="fa fa-search"></i></button>
              <button kendoGridEditCommand><i class="fa fa-pencil"></i></button>
              <button kendoGridRemoveCommand><i class="fa fa-trash"></i></button>
            </div>
          </ng-template>
</kendo-grid-column>
How can I write the same in my component!?!? I tried using template there without any luck.

Thank you.