Hi there,

recently we've been implementing row selection on all grids in our application. We've implemented persisting the selection and the custom select-all logic that also selects rows from all pages when using pagination according to:

https://www.telerik.com/kendo-angular-ui/components/grid/selection/persisting/#toc-selecting-all-items

Question #1

With this logic implemented, we're now running into an issue though. Selecting all rows using the select-all checkbox and afterwards clicking a single row on any page (without using Ctrl):

• selects that single row (expected)
• deselects all other rows on the page (expected), but
• keeps all rows on other pages selected (not expected)

Is there any way to override the selection mechanism to include all pages when selecting a single item via regular click after applying the custom select-all logic? I've tried using the selectionChange event, but since we're adding the other pages' rows via the custom logic above, the provided event data does not contain enough information out of the box to detect whether the user just deselected all rows on a page by selecting a single row.

We could try to figure out whether the user selected a single row by comparing:

pageSize === deselectedRows.length - selectedRows.length

Is there any more elegant way to do this?

Question #2

When using the KendoGridCheckbox component, by clicking on the checkbox of a row, we can de-/select a single row in addition to the other already selected rows. When clicking a row's cells though, this behavior is inverted, de-/selecting the single row and deselecting all other rows. Is there any way to match the two behaviors without relying on the Ctrl key to do so?

Best Regards
Philipp

RESOLVED

Hi,

I have an loggin page and after login i tried without succes to navigate to page2 like this

this.router.navigate(['agenda'])
this.router.navigateByUrl('/agenda');
 this.router.navigateByUrl('agenda');

i have removed from routes AuthGuard] without success too

My  routes

  export const routesKendo = [
  {path: '**', redirectTo: '/login'},
  {path: 'login', component: LoginComponent},
  { path: 'agenda', component: AgendaComponent, canActivate: [AuthGuard], text: 'Agenda' },
  { path: 'contact', component: ContactComponent, canActivate: [AuthGuard], text: 'Contact' },
  { path: 'facture', component: FactureComponent, canActivate: [AuthGuard], text: 'Facture' }

];

my module

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routesKendo,
      {enableTracing: true , // <-- debugging purposes only
        relativeLinkResolution: 'legacy'} //dans l"exemple de Kendo
    )
  ],
  exports: [RouterModule]
})

Where is my mistake ?

Regards

RESOLVED

Hi

Currently i have an standard Router with an JWT LoginComponent

When i submit login and password i route on an MenuComponent based on your sample https://imf7xn--run.stackblitz.io/

But i have two problems

1 in need to change path with .. because url begin with menu

2 when i click in one option menu compoment disspear, have only finalComponent without menu, how could i avoid it ??

In fact problem is how having an page before MenuPage like an LoginPage  !

Regards

Hi,

Our requirement is to have a grid with fixed headers on scroll.

I have come across a solution in jQuery for the same (Below link) -

https://docs.telerik.com/kendo-ui/knowledge-base/fixed-headers-grid

Could you please provide the solution in angular?

Thanks in advance.

Hi,

Our purpose is to have a fixed menu at the left side of our website. The menu must be collapsablel (minimizable) to see only icons. I think the Drawer control can be the right control.

I want to use routes to navigate to a page in the drawer-content space.

If I navigate to a route in the angular page, I want that a specific draweritem is selected.

How can I achieve this?

Can I use the routerLinkActive on a drawer item? 

Is the drawer the most suitable control?

Thanks for your help

I have two donut charts displayed side by side .. and even though I set the height of the chart area to be same.. the actual chart series coming different height .. how to make it same.. It is in Angular Kendo UI.. Following in my code of the component

fyi: I added the image as well how they look as an attachment

    <kendo-chart
      [transitions]="false"
      (seriesHover)="onSeriesHover($event)"
      (seriesClick)="onSeriesClick($event)" >
      <kendo-chart-area background="transparent" [height]="height">
        <kendo-chart-legend [visible]="false">
        </kendo-chart-legend>
        <kendo-chart-title [text]="header"></kendo-chart-title>
        <kendo-chart-series style="cursor: pointer">
          <kendo-chart-series-item
            [autoFit]="true"
            type="donut" [data]="data"
            categoryField="name" field="value" colorField="color" >
            <kendo-chart-series-item-labels
              position="outsideEnd"
              color="#000"
              background="transparent"
              [content]="labelContent">
            </kendo-chart-series-item-labels>
            <kendo-chart-series-item-tooltip format="pie" padding="2">
              <ng-template let-category="category" let-dataItem="dataItem">
                {{category}} ({{dataItem.value}})
              </ng-template>
            </kendo-chart-series-item-tooltip>
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart-area>
    </kendo-chart>

I want to achieve a menu like the Azure DevOps menu with the Drawer control (see image below)

How can I put the toggle button at the bottom within the Drawer control? The drawer control is a fixed menu at the left side with height 100%.

Can i do this with the footer template?

I have just updated my dialogs to use the latest 5.0.0 dependency and now I see a major difference in the way the action buttons are rendered. Previously the buttons took up all the space across the bottom of the dialog, and now they have shrunk and are placed bottom right. Please see attached pics of the difference. How do I render them as before? I've tried passing actionLayout: "stretched" to the dialog service when creating them but this has no effect.

Hi,

In our use case, there are two tabs in a card having kendo grid each. If user is on first tab grid and scroll down to any row eg 300, and switches the tab. Now if user returns back to first tab again, dataStateChange  event returns skip as 0 for the first grid and because of that it scrolls to top, but the expectation is to remain on row 300. Virtual scroll is enabled in both the grids. Similar behavior can be observed in https://www.telerik.com/kendo-angular-ui/components/grid/, when user navigates from one page to another.

 Is this the expected behavior or there is a way to keep the scroll at the earlier position.

Please suggest.

Regards,

Jaspreet

Good day,

I am trying to export multiple girds (from an external button request) into one Excel doc, with each grid in its own sheet. I cannot get it quite right, and cannot find any example that can help me (the export multiple data sets from the Excel Export section looks close, but the objects in the grid are different than those.

Any examples or assistance would be greatly appreciated.

Thank you,

Tyler