I have a donut chart with rounded ends in Kendo UI for jQuery running exactly as the client wants. However, I need this to be using Kendo UI for Angular instead. I believe this is supported if I use Drawing Visuals, but I can't figure out how to port over what I have for my jQuery version into the Angular version.

My working stackblitz of the jQuery donut is here: https://stackblitz.com/edit/web-platform-szmuv9

My Angular version that I am trying to work on is here:

https://stackblitz.com/edit/angular-bi2dsw

My app.component.ts:

@Component({
selector: 'my-app',
  template: `
      <kendo-chart>
        <kendo-chart-legend [visible]="false"></kendo-chart-legend>
        <kendo-chart-area background="none"></kendo-chart-area>
        <kendo-chart-tooltip>
          <ng-template kendoChartSeriesTooltipTemplate
                       let-value="value" let-category="category" let-series="series">
              {{ category }} ({{ series.name }}): {{ value }}%
          </ng-template>
        </kendo-chart-tooltip>
        <kendo-chart-series>
          <kendo-chart-series-item *ngFor="let series of model; let outermost = last;"
                                   type="donut" [startAngle]="90"
                                   [holeSize]="60" [margin]="10"
                                   [name]="series.name" [data]="series.data"
                                   field="value" categoryField="category" colorField="color">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    `,
})

the tempdata.ts file:

export const tempdata = [
  {
    data: [
      {
        category: 'demand',
        value: '75%',
        color: '#009a8c',
      },
      {
        category: 'late',
        value: '25%',
        color: '#e31b23',
      },
    ],
  },
  {
    data: [
      {
        category: 'All',
        value: 500,
        color: '#065aa3',
      },
    ],
  },
];

I am going through your API references as well (https://www.telerik.com/kendo-angular-ui/components/drawing/api/), but haven't had much luck.  Can anyone help point me in the right direction?

Hi

I could not using class="col-xs-8" on scheduler project with bootstrap 4.6.0

Scheduler still is on full screen ?

Why ?

Regards

 template: `
        <div class="container-fluid">
            <div class="row boxFix" style="padding-top:10px;">
                <div id="agendaSidebar" class="col-xs-2">
                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                </div>
                <div id="agendaScheduler" class="col-xs-8">
                    <my-scheduler></my-scheduler>
                </div>
            </div>
        </div>
    `

Regards

Hi,

I would like to try to allow my users to change order of the items displayed in drawer component with hierarchy.

In my drawer, parents are "containers" and i would like to allow user to move items from one to another parent.

For example from global items to personal or favorite items.

Is it possible to do something without much of changes?

Thank you very much.

Vedad

Hello guys!

Is it possible to aggregate (sum) some columns inside an extra last row (footer) with a grid that gets data from an async source?

Here is a sample of my code :

<kendo-grid [data]="gridData$ | async" (cellClick)="onCellClick($event)" [rowClass]="rowCallback">
                <kendo-grid-column

public gridData$ = this.service.cdiVariable$.pipe(
    tap(console.log),
    switchMap(cdiVariable =>
      this.dataSource.getContracts(cdiVariable).pipe(
        catchError(error => {
          if (error.error instanceof ErrorEvent) {
            this.errorMsg = `Error: ${error.error.message}`;
          } else {
            this.errorMsg = `Error: ${error.message}`;
          }
          return of([]);
        })
      )
    ),
    tap(console.log)
  );

I understand how to apply custom placeholder values for individual components via the parameter on the component selector, but is there a way to apply a global placeholder value so that I don't need to remember to put it on every single individual DateInput component usage? I tried looking for a way to use the dependency injector to do this but it looks like injection tokens aren't used for this value (nor any of the other customizable parameters) and since it only uses the basic type of "string", I can't inject based on type either.

I thought also about using factory injection to try and override the constructor, but then I have to copy the constructor signature, which could then break in the future if you make updates to it. Not a huge deal since ideally this would only be defined in one place and thus I'd only have to make one change, but still a downside I'd rather not deal with.

Is there a predefined or best practice way to do this?

In my grid, I get this error when I set the navigable property true:

I guess that is happening because they are still no rows in the grid (they load with the API response) and it accesses the unregisterRow method for some reason. 

The needsViewPort() is the only one condition, but it does not check if this.viewPort is undefined.

There is a way to condition the navigable property to wait the API response and then set it true?

Thanks.

Hello,

I'm my angular app I'm trying to achieve drag and drop from treeview to grid.

I have on the sidebar a list of items in a treeview and what to drag them to the grid. Even if this feature is not provided out-of-the-box, I could implement it if I had on the drop event, the id of the dragged item and the position where it is dropped.

Is this possible?

Thanks in advance

Hello guys.

I have a Kendo Grid and I want to set the minimum width of some columns to the size of their content.

Any ideas on how to do that?

Thank you.

Hello,

how to turn off selection only inside cell which is editable and in edit mode? When you select some data inside editable cell you can see this selection (color red - added screenshot).

I still want to  be able to select cells outisde editable cell, but I want to turn this off while my mouse cursor is inside cell which is in edit mode.

I would like to have normal selection while cell is in edit mode and while I'm starting selection from inside cell.

Stackblitz with issue: https://stackblitz.com/edit/angular-wsp7zm-27tmxu?file=app/app.component.ts

Regards,

Dawid