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"
}

My website has a dark theme so the chart has a black background with white text, but when it's exported to PDF the background color should be white and the text color should be black.  How do you set the colors of the chart to be different for when it's being exported to PDF?  

Thanks,
Rob

I'm trying to export an entire page with the Kendo Angular PDF, this works fine except when I add a Kendo Angular Grid on to the page. I'm seeing issues where rows are missing and there is extra blank space on some of the pages.

Here is a sample with the behavior. https://stackblitz.com/edit/angular-qkj4p7 Notice that it skips from id 11 to 19 between the first and second page and that there is a large margin at the bottom of the pages.

It seems like part of the issue is that it picks where to do page breaks based upon the current DOM, instead of the copied DOM after the k-pdf-export style has been applied. Is there a way to get the grid to work properly with the pdf component?

  Hi,

Is there any way to achieve this drag and drop cells in angular grid? 

Thanks