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

Hi there,

I'm looking to display different data than the one initialized in my panelbar and panelbar-items in the constructor. I'm getting my data programmatically and would like to change the data the same way. 

The request will come from a global switch that sets a few global flags. Actually I will be switching the data in the panelbar back and forth, there is only data A and data B.

Thanks in advanced,

Carla

Is there a possibility to mark the filter line in the grid column menu as active?

The menu button itself is marked with .k-state-active, but the popup itself or the filter line is not. So the elements are not reachable with CSS.

Is there any solution to reach the element?

Thanks for your help and best regards,

Andi