Hi
I'm trying to upgrade my progress controls to 2018 R3 from 2018 R1.  I am using Angular 5.2.3

The issue is the LocalizationService isn’t getting injected into the tootltip directive.  

So this code is failing since localizationService is null 

                this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function(e) {
                    return t.direction = e.rtl ? "rtl" : "ltr"
                })

I noticed on the tooltip samples use Angular 6, so Im not sure if this could be a version issue.  The code worked fine with 2018 R1

Currently I am not immediately planning to upgrade to Angular 6 as I need to make several code modifications for the Rxjs library updates

Any suggestions would be appreciated, thanks

Hello

In this component I miss vertical spinners, so I extended your implementation

It would be great if you could adopt my implementation in your branch, so I don't have to maintain a private package for each new release of the kendo-angular-inputs package

Vertical spinners are much more useable when it comes to mobile devices, and the changes are minimal

• In the HTML-Template two additional <spans> for the extra buttons

• An extra property

• A CSS class (I think you would adopt it to your structure)

Best regards

Jürgen

First I'd like to say that I was working with the PDF Export and Drawing API's to build a quote/invoice with repeating header section and complex cells for specific parts, prices, etc. and the automatic paging and repeatHeaders worked out wonderfully.

One thing I'm still trying to figure out is how to add something like the {{pageCount}} of {{pageTotal}} without having a grid involved. Is there anything in the API's that I can use to achieve this effect and if not is there a way I can perhaps interact with the repeat header to hook the Javascript to it that I'd need to make this happen?

In JQuery, we have:

Do we have something similar in Angular?

I have a treeview working with multiple columns but I need the buttons in those columns to be aligned.  The jquery example found here: https://www.telerik.com/forums/treeview-with-columns-in-node

was helpful but it relies on the data containing the row level information.  I don't want to have to add and maintain that in my datastructure.  Is there another way to do it.

Here is my code:

@Component({
    selector: 'app-treeview',
    template: `
    <kendo-treeview
    [nodes]="treeNodes"
    [isExpanded]=""
    textField="Text"

    kendoTreeViewExpandable

    kendoTreeViewFlatDataBinding
    idField="Ordinal"
    parentIdField="OrderNumber">
    <ng-template kendoTreeViewNodeTemplate let-dataItem>
   <div style="width:1500px;">
      <div style="display: inline-block;width:40%">
        {{dataItem.Text}}
      </div>
      <div style="display:inline; width:30%;">
      <button class="btn btn-primary">{{dataItem.NRName}}</button>

      </div>
      <div style="display:inline; width:30%; ">
        <button class="btn btn-primary">{{dataItem.RECName}}</button>
      </div>
   </div>
    </ng-template>
  </kendo-treeview>

  `
})

Any suggestions are appreciated.

Are there example out there on how single or double row click event work?

Thanks,

Bryian Tan

Hi,

I am having with editing grid cell.

The issue is that once the cell is clicked, I can only type one character then the cursor disappears (lose focus on the cell I am typing). All other commands like add, remove, cancel works normally (especially the add when a new row is added for editing and saved).

My idea is to allow users to add/create/edit/remove data to the grid and then submit the grid data afterward.

I create a small project on GitHub to illustrate this: Could you help me point out the issue? 

Thanks.

To date for most of my maintenance tables I'm currently using a variant of the following:
https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-reactive-forms/

It's working quite well as far as the add/edit/delete functions however I have situations often where I'm implementing the kendoGridCellTemplate to replace a GUID with the name its associated with (assuming the given column has a dropdown list for editing). I'd like to be able to provide the end user with the ability to filter on the name values and, if possible, sort alphabetically on them.

I did see that there was a tutorial for reusable filters at the bottom of this page:
https://www.telerik.com/kendo-angular-ui/components/grid/filtering/built-in-template/

The kendo-multiselect looks like it could suffice for my needs but I notice that the demos for the filterChange all work from the premise that the grid is being supplied by public gridData: any[]. The pattern I'm using is public view: Observable<GridDataResult> which filterBy doesn't seem to take.

Do you have any suggestions on how I could integrate this approach with a grid based in 'view | async' data? I've thought about using the this.xservice.map(data => process(data.filter(x), this gridstate)) but I'm not sure how I'd phrase the connection between the filterService and the data.filter option. Also assuming I may have more than one column where I need to perform data substitutions this approach could get tricky.

Hello -

We have a requirement to use kendo grid and its working perfectly. We have a filter button separated to outside of kendo grid and we fire an event to filter the results. I know that grid with filter and paging on inside kendo-grid working fine, but our requirement is to separate the filter out side of grid for better customization and better look.

When we filter to get all the claims with 500 records, we have  the paging, when we are in 45th page to see 451 to 460 records, if you change the filter drop down to get current year claims with total of 100 records, it doesn't display since the grid is still on 45th page (Current claims only have 100 records and only 10 pages are there, so grid says no records). How to reset the pager on the filter button click (Its a separate button outside of grid).?

Grid code : - 

 <kendo-grid #gridClaims [kendoGridBinding]="claims" 
                        [pageSize]="10"
                        [pageable]="{
                       previousNext: true,
                        class:'d-flex d-row justify-content-center'
                        }"
                        [sortable]="{allowUnsort: disable, mode: 'single'}"
                        [sort]="sort"
                        [selectable]="true"
                        (selectionChange)="onRowSelect($event)"
                        (sortChange)="sortChange($event)">

                <kendo-grid-column field="dateofService" title="Date Of Service" width="120" format="{0:MM/dd/yyyy}">
                    <ng-template kendoGridHeaderTemplate>Date Of Service <span ng-reflect-ng-class="[object Object]" id="defaultSortSpan" class="k-icon k-i-sort-desc-sm" hidden="true"></span> </ng-template>
                    <ng-template kendoGridCellTemplate let-dataItem>
                        <a (click)="getClaimDetails(dataItem.internalClaimNumber)" href="javascript:void(0)"> {{dataItem.dateofService | date: 'MM/dd/yyyy'}}</a>
                    </ng-template>
                </kendo-grid-column>

 <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>
                </ng-template>
            </kendo-grid>

Filter button code - 

 <button id="filterClaimsBtn" class="btn btn-primary btn-md pl-5 pr-5" type="submit" (click)="filterClaims(claimType,memberId,claimDateRange)">Filter claims list</button>

How can I reset the grid page to first in my filterClaims method (typescript)?

Thank you.

100% stacked bar for angular doesn't have proper documentation to understand. My requirement is to draw a chart to show how much % amount they spent for college fees for each student. It should be from 0 to 100% in a single bar. Used percentage will be in dark color and remaing will be in white on the same bar chart.

Non working with two series for 85 % ( It should be showing 85 % and chart should start fomr 0 to 100 on horizontal legends but, it starts from 0, Please help me to correct it.

@Component({
  selector: 'my-app',
  template: `
     <kendo-chart >
                                <kendo-chart-series>
                                    <kendo-chart-series-item type="bar" [color]="chartfillColor" [border]="seriesBorder" [stack]="{ type: '100%' }" [data]="[85]">
                                    </kendo-chart-series-item>
                                    <kendo-chart-series-item type="bar" [color]="mainColor" [border]="seriesBorder" [data]="[15]">
                                    </kendo-chart-series-item>
                                    <kendo-chart-axis-defaults [background]="background"
                                                               [color]="color"
                                                               [crosshair]="crosshair"
                                                               [line]="line"
                                                               [majorGridLines]="majorGridLines"
                                                               [minorGridLines]="minorGridLines"
                                                               [majorTicks]="majorTicks"
                                                               [minorTicks]="minorTicks"
                                                               [visible]="axisVisible"></kendo-chart-axis-defaults>
                                </kendo-chart-series>
                            </kendo-chart>
  `
})
class AppComponent {
     public mainColor = "#ffffff";
    public chartfillColor = "#4ec2c0"
}

Example 2 (If I have one more dummy series, it works with some space after the first chart.

@Component({
  selector: 'my-app',
  template: `
     <kendo-chart >
                                <kendo-chart-series>
                                    <kendo-chart-series-item type="bar" [color]="chartfillColor" [border]="seriesBorder" [stack]="{ type: '100%' }" [data]="[85,0]">
                                    </kendo-chart-series-item>
                                    <kendo-chart-series-item type="bar" [color]="mainColor" [border]="seriesBorder" [data]="[15,0]">
                                    </kendo-chart-series-item>
                                    <kendo-chart-axis-defaults [background]="background"
                                                               [color]="color"
                                                               [crosshair]="crosshair"
                                                               [line]="line"
                                                               [majorGridLines]="majorGridLines"
                                                               [minorGridLines]="minorGridLines"
                                                               [majorTicks]="majorTicks"
                                                               [minorTicks]="minorTicks"
                                                               [visible]="axisVisible"></kendo-chart-axis-defaults>
                                </kendo-chart-series>
                            </kendo-chart>
  `
})
class AppComponent {
     public mainColor = "#ffffff";
    public chartfillColor = "#4ec2c0"
}