I would like to add a horizontal scrollbar so that I can clearly view all the graph data.

for example: if I had all 12 months of the year I would like to see those of 2019 and then with the scroll bar go to 2020 and 2021. through the parameter that identifies the X axis.

<kendo-chart (seriesClick)="onSeriesClick($event)">
  <kendo-chart-title text="title"></kendo-chart-title>
  <kendo-chart-category-axis>
    <kendo-chart-category-axis-item
                  [categories]="month"
                  [title]="{ text: 'Months' }">
    </kendo-chart-category-axis-item>
  </kendo-chart-category-axis>
  <kendo-chart-legend position="bottom" [visible]="false"></kendo-chart-legend>
  <kendo-chart-series>
    <kendo-chart-series-item type="line" 
                  [style]="normal" categoryField="month" 
                  [data]="Totaldata" field="total" 
                  [markers]="{ visible: true }">
   </kendo-chart-series-item>
 </kendo-chart-series>

Hi,

I'm facing a situation, that I need to show the title of the Y-axis. As I saw in the docs, it is possible to place the title next to Y-axis labels but there is no choice to place it on the top of the axis.

I found this workaround for Kendo UI for jQuery and I'd need something similar for Angular.

I'm able to place a div with some text on the same DOM level as kendo chart, like this

and to assign z-index to chart-title to be shown in the front, but it corrupts me the chart completely - it changes the font.

So is there any way how to do this?

Thanks a lot for any advice.

J

Hi,

I have a chart with category axis of type 'Date', base units are set to 'days'.

I wonder how to tell the chart to show labels in format of 'day of month', i.e. 'd' (reference), because if I use either

type: 'Date',
baseUnit: 'days',
labels: {
  dateFormats: {
    days: 'd',
  },
}

type: 'Date',
baseUnit: 'days',
labels: {
  format: 'd'
}

Hi

Am trying to use a TabStrip, integrated with a RouterOutlet to display the tab content.  The module in question has it's own routing, and I hoped to map the router links to tab headers, and thus an outlet for the content.

Without native support for it, I have attempted to place the <router-outlet> in the kendoTabContent element, and manually use the Angular Router on the tabSelect event.   However, on tab change, the router-outlet is destroyed on the old and recreated on the new tab. 

Add in the router navigating and changing the content for router-outlet, and I'm in a lifecycle hook nightmare that isn't feasible the way I have attempted to approach it.   The current component on display in the outlet is destroyed and then instantly recreated as the tab switches, and then router navigation takes over and changes it again.

I wanted to ask if there is any planned support for Router integration for TabStrip, like other Layout components have, and/or has anyone had success attempting similar?

Thanks

Hi

In your sample https://www.telerik.com/kendo-angular-ui/components/notification/types/ and https://6yuvdu--run.stackblitz.io on notification type, when i try to running sample Type is undefined ?

Error: src/app/app.component.ts:20:18 - error TS2304: Cannot find name 'Typе'.

Why

Regards

Hi, 

I'm working on using Draw and Export a Signature feature to save a drawn object in SVG format while it works on the desktop browser on Mouse event but not working on Mobile browser by Touch event, and is there a way to implement this feature works by Touch event on mobile browser?

Thanks,

How should I hide the field name and get only the content inside the field to show as my grouping variable?

For example:

Instead of getting

driverID : 1

                      all my content

I want only

1

                    all my content

I want to reset the filter settings without making the call again. I need to do this because at the change of page I have to set the grid without filters but without call the function again because the data are the same

This is my component:

 
 gridData: GridDataResult;
  state: State = {
    skip: 0,
    take: 25
  };

  clearState: State = {
    skip: 0,
    take: 25
  };

  //DATASOURCE
  products: any[] = [];

  public dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    this.gridData = process(this.products, this.state);
  }

public filterChange(filter: CompositeFilterDescriptor): void {
    this.filter = filter;
    this.products = filterBy(this.products, filter);
  }

public clearFilters() {
  this.state = this.clearState;
  this.gridData = process(this.products, this.clearState);
}

public getProducts(){
    this.myService.getData(year).subscribe(data => {
      this.products= data;
      this.gridData = process(data, this.state);
    });
}



                                    

    <kendo-grid
            [data]="gridData"
            [pageSize]="state.take"
            [skip]="state.skip"
            [sort]="state.sort"
            [filter]="state.filter"
            [sortable]="true"
            [pageable]="true"
            [filterable]="true"
            [selectable]="true"
            [resizable]="true"
            (filterChange)="filterChange($event)"
            (dataStateChange)="dataStateChange($event)">
                    <ng-template ngFor [ngForOf]="columns" let-column>
                        <kendo-grid-column
                            width="{{column.width}}"
                            format="{{column.format}}"
                            filter="{{column.filter}}"
                            field="{{column.value}}"
                            title="{{column.title}}">
                        </kendo-grid-column>
                    </ng-template>
   </kendo-grid>

if I call the clearFilters function the filters are reset but the arrows remain on the previously filtered columns. then the data in the table returns as originally but the css part of the table remains filtered (attached img)

Hi

I have an Reactive Form with 3 kendo-button

"save" "cancel" and "addPhoneNumber"

This last button add an array with two input textField, BUT it execute code to ""onSaveButtonClick" Event !

How avoid this and execute code "addTelephoneNumber"

Regards

  <form *ngIf="formCreate" [formGroup]="formCreate" (ngSubmit)="onSaveButtonClick()">

    <div class="col-xs-12">
      <button kendoButton iconClass="fa fa-times" id="annulerContactBtn" class="k-primary k-button ng-hide"
              (click)="onCancelButtonClick()"
              [disabled]="isLoading"
      >
        {{'button.cancel' | translate | titlecase}}
      </button>
      <button kendoButton iconClass="far fa-save" id="sauvegarderContactBtn" class="k-primary k-button ng-hide"
              [primary]="true"
              [disabled]="formCreate.invalid || isLoading"
      >
        {{'button.save' | translate | titlecase}}
      </button>

.....
......

  <button kendoButton look="clear" icon="image"
          (click)="addTelephoneNumber()"> {{'contact.edit.button.addtelephone' | translate}}</button>
</label>

</form>

when I try to login to telerik using cmd I faced to attached error.

I run this command:
npm login --registry=https://registry.npm.telerik.com/ --scope=@progress