I am using <kendo-tabstrip> and i have 10 tabs <kendo-tabstrip-tab> that should be loaded all of them when I enter the page. If i have only 3-5 tabs are loaded okay, but with 10, it loads only 5 and does not display the content of them at all and when i click on them it displays for each click the remaing tab and after 5 clicks I have all of the tabs with content loaded. I tried everything, ChanceDectorRef, but it still does not work. 

I let the code bellow:

<kendo-tabstrip #tabstrip class="tabs-outside-section" (tabSelect)="onTabSelect($event)">
  <kendo-tabstrip-tab
    *ngFor="let tab of tabs; let i = index"
    [title]="tab.title | translate"
    [selected]="selectedIndex === i">
    <ng-template kendoTabContent>
      <ng-container *ngComponentOutlet="tab.component"></ng-container>
    </ng-template>
  </kendo-tabstrip-tab>
</kendo-tabstrip>

  tabs = [
    { title: this.resourceCodes.common.generalDetails, component: Tab1Component },
    { title: this.resourceCodes.booking.common.reservations, component: Tab2Component },
    { title: this.resourceCodes.menu.vouchers, component: Tab3Component },
    { title: this.resourceCodes.menu.campaigns, component: Tab4Component },
    { title: this.resourceCodes.menu.messages, component: Tab5Component },
    { title: this.resourceCodes.menu.interactions, component: Tab6Component },
    { title: this.resourceCodes.document.documents, component: Tab7Component },
    { title: this.resourceCodes.menu.offers, component: Tab8Component },
    { title: this.resourceCodes.menu.surveys, component: Tab9Component },
    { title: this.resourceCodes.menu.reviews, component: Tab10Component },
  ];

  constructor(
    private router: Router,
    userService: UserService,
    private route: ActivatedRoute,
    private cdr: ChangeDetectorRef
  ) {
    this.authUserModel = userService.authUser;
    this.currentUrl = this.router.url;
    this.checkAndSetSelectedIndex(this.currentUrl);
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        if (this.currentUrl === event.urlAfterRedirects) {
          // URL has not changed, read from localStorage
          const savedIndex = localStorage.getItem('selectedCustomerTabIndex');
          if (savedIndex !== null) {
            this.selectedIndex = parseInt(savedIndex, 10);
          }
        } else {
          this.selectedIndex = 0;
          localStorage.removeItem('selectedCustomerTabIndex');
        }
        this.currentUrl = event.urlAfterRedirects;
      }
    });
  }
  ngOnInit() {
    this.route.params.subscribe(params => {
      this.customerId = +params['id'];
      this.cdr.detectChanges(); // Manually trigger change detection
    });
    setTimeout(() => {
      this.cdr.detectChanges();
    }, 20);
  }

Thank you!

Hello

we use <kendo-datepicker> to select "from" and "to" dates. But these fields are not mandatory and the user should be able to clear the date fields manually. Does Kendo DatePicker component provide an easy way to clear a selected date? Something like an X icon inside the input area or a CLEAR button inside the popup, e.g. beside the TODAY link?

Best regards

Sebastian

I would like to know if anyone has attempted to use sparkline to show progress/ processing stat in a table column.

As shown below - Green = Success, Red = Error, Orange = Processing, Yellow = Waiting.

Hi,

So I have created a treeview and have kendoTreeViewSelectable added to it which allows me to work with the items I have selected. That part, I was able to get working correctly so when I select an item in the treeview, the parent node of that item is also added to the selectedKeys and it "highlights" both the item and its parent(s). The issue that I am running into now is, when I select an item and then select it again, the item I clicked on is no longer highlighted but its parent(s) are. I want to set it up so that it stays selected. 

I've tried a few approaches like not running the method I have for selecting the parent nodes if the current item Id matches the one clicked on and also by resetting the selectedKeys array and trying to run my method but both don't seem to do anything. 

Any suggestions on what I could do?

Thanks,

Harry

[object object]

Is it possible to have rounded ends on a sparkline?  Below is an image of the component used multiple times in a grid, and the component template.

<kendo-sparkline 
    type="bar"
    [data]="score"
    [transitions]="true"
    [seriesDefaults]="{labels: {background: 'none', visible: true, format: '{0}'}, color: getBarColor(score), bar: { size: 6 } }"
    [tooltip]="{visible: false}"
>
    <kendo-chart-area opacity="0" [width]="100"></kendo-chart-area>
    <kendo-chart-value-axis>
        <kendo-chart-value-axis-item
            [min]="0"
            [max]="130"
            [reverse]="true"            
        >
        </kendo-chart-value-axis-item>
    </kendo-chart-value-axis>
</kendo-sparkline>

Hi,

The license key works when i activate locally on my machine but it does not when trying the same with Dockerfile. Here's the dockerfile code:

We're busy putting all our 3rd party tools behind wrappers. Unfortunately, the Tile Layout work is not going so well. We've tried splitting up all the consituent components behind our own wrapper components, with each component referencing a key part of the Tile Layout structure, like so:

dashboard-view -> References <kendo-tilelayout>
   dashboard-item -> References <kendo-tilelayout-item>
      dashboard-header-> References <kendo-tilelayout-item-header>
      dashboard-body -> References <kendo-tilelayout-item-body>
   dashboard-item -> References <kendo-tilelayout-item>
      dashboard-header-> References <kendo-tilelayout-item-header>
      dashboard-body -> References <kendo-tilelayout-item-body>

etc.

The trouble starts when splitting off the `kendo-tilelayout-item` from `kendo-tilelayout` and putting them into their own separate components.

It all looks fine from a coding standpoint, but when building the app and running it in the browser, we get this error:

NullInjectorError: No provider for LocalizationService!

We can provide for this service and also get the injection token, but the comments states that this service is hidden. Nevertheless, even after this is done we then get this error:

NullInjectorError: NullInjectorError: No provider for TileLayoutDraggingService!

Now, the service in question is present in the Kendo library, but is also hidden and inaccessible.

I don't think trying to fudge a way around importing the service somehow is the answer here.

Instead, I want to know if we're doing anything wrong and/or whether we are implementing the wrapper component correctly?

There is currently no way to separate selected color and primary color in the new var based theme.

Primary color are often way too strong and heavy for a selected background.

Half the selected states are hard linked to primary color, while the other half to base.

Right now, the only way to separate this is to write CSS overrides for every single component that has some selected states.

It feels like the theme has become way too strict and opinionated. Standard common states should be still globally themable and not linked to some base color. 

$kendo-selected-text / bg for example cannot be overwritten either  -  they are not marked as !default.

Hi

I want to programmatically hide the right panel.
But if you change the panel size, then when hidden, the left panel does not take up free space.

Kendo component

https://www.telerik.com/kendo-angular-ui/components/layout/splitter/

Demo

https://stackblitz.com/edit/angular-m7fxze-rabzpa?file=src%2Fapp%2Fapp.component.ts