Questions on Kendo UI for Angular Forum

1 answer

194 views

Hi

I have tried without succes to define column witdth in % ? Could you help me ?

Regards

  <kendo-grid-column field="date" title="{{'page.column.date' | translate | titlecase}}" [width]="25%"></kendo-grid-column>

Grid

answered on 21 Oct 2021

1 answer

1.0K+ views

[Solved] Change row background based on validity of data

Hello everyone, I'm having troubles understanding how to change the background color of a row when one of the (required) values of its cells is invalid

Code:

<kendo-grid
        #grid
        [kendoGridBinding]="kgData"
        [sortable]="true"
        [pageable]="!kgHasOrdernumField"
        [pageSize]="kgHasOrdernumField ? 1000 : 5"
        [rowClass]="kgRowCallback"
        (add)="kgAddHandler($event)"


        (cancel)="kgCancelHandler($event)"
        (save)="kgSaveHandler($event)"
        >
        <!-- BUTTONS -->
        <ng-template kendoGridToolbarTemplate>
          <button kendoGridAddCommand [hidden]="kgTemplateButtonsHidden">
            Add
          </button>
          <!-- Button disabled when there's no data to send OR one of them contains an invalid value -->
          <button class="k-button" [hidden]="kgTemplateButtonsHidden" [disabled]="kgDataToSend.length == 0 || (kgDataToSend.length != 0 && kgInvalidFields.length != 0)" (click)="kgSendData()">
            Save
          </button>
          <span style="width:10px"></span> <b>*</b> fields are mandatory
 
        </ng-template>

        <!-- HEADERS -->
        <kendo-grid-column *ngFor="let col of columnInfoArray" [field]="col.fieldname" [title]="col.mandatory ? col.description + '*' : col.description" [hidden]="col.fieldname === 'id'">
          <ng-template
            kendoGridCellTemplate
            let-dataItem
            let-rowIndex="rowIndex">
              <!--! NUMBER  -->
              <!--
                decimals: do not allow the user to type , and . when focused
                format n0: do not put commas when the input is not focused
                autocorrect: prevent insertion of invalid values
                disabled: disable ordernum
              -->
              <kendo-numerictextbox
                *ngIf="col.configtype === 'int'"
                [disabled]="col.fieldname=='ordernum'"
                kendoGridFocusable
                [decimals]="0"
                format="n0"
                [min]="1"
                [autoCorrect]="kgAutoCorrect"
                [value]="dataItem[col.fieldname]"
                (valueChange)="kgUpdateValue(col,rowIndex,dataItem,$event)"
                ></kendo-numerictextbox>
              <!--! SELECT  -->
              <!--
                [data]: the array of options, textField and valueField access the properties of the objects contained inside the array
                [value]: gets the default value based on the fieldname and the value
              -->
              <kendo-dropdownlist
                *ngIf="col.configtype === 'combo'"
                kendoGridFocusable
                [data]='kgSelectOptions[col.fieldname]'
                textField='label'
                valueField='value'
                [value]='kgGetDefaultOption(col.fieldname,dataItem[col.fieldname])'
                (valueChange)="kgUpdateValue(col,rowIndex,dataItem,$event)"
                ></kendo-dropdownlist>
              <!--! CHECKBOX  -->
              <input
                *ngIf="col.configtype === 'bool'"
                type="checkbox"
                kendoGridFocusable
                kendoCheckBox
                [checked]="dataItem.deleted"
                (input)="kgUpdateValue(col,rowIndex,dataItem,$event)"/>
              <!--! STRING  -->
              <input
                *ngIf="col.configtype === 'string'"
                kendoGridFocusable
                [value]="kgGetValue(dataItem[col.fieldname])"
                (input)="kgUpdateValue(col,rowIndex,dataItem,$event)"/>
          </ng-template>
        </kendo-grid-column>
        <!--# COMANDI NUOVA RIGA -->
        <kendo-grid-command-column title="Comandi" [hidden]="!kgTemplateButtonsHidden">
          <ng-template kendoGridCellTemplate let-isNew="isNew">
            <button *ngIf="isNew" kendoGridSaveCommand [disabled]="!kgNewRowValid" class="k-button">Confirm</button>
            <button *ngIf="isNew" kendoGridCancelCommand class="k-button">Cancel</button>
          </ng-template>
        </kendo-grid-command-column>
      </kendo-grid>

Using the suggested rowClass method doesn't work as intended

kgRowCallback = (context: RowClassArgs) => {
    return { invalid: !this.kgValidateValue(context.dataItem) }
  }

I get different results based on the css selector, but none of them modifies ONLY the affected row

tr.invalid, tr.invalid:hover {
  background-color: rgba(255, 99, 88, 0.2);
}

Gives me this:

Whereas this (which was suggested here: https://stackoverflow.com/questions/54553443/)

.k-grid tr.invalid, .k-grid tr.invalid:hover {
  background-color: rgba(255, 99, 88, 0.2);
}

Gives me this

What did I do wrong?

Grid

answered on 21 Oct 2021

1 answer

153 views

Where is the callback event handler after a file is deleted from this.apiRemoveUrl ?

I want to handle what happens after this REMOVE URL is called... I want to then get the file list and re bind it to the upload control..

How do I do this ?

 deleteAttachmentKendo(e: RemoveEvent): void {
    console.log(`Removing ${e.files[0].name}`);
    const myFile: MyFileInfo = <MyFileInfo>e.files[0];
    e.data = {
      attachmentIdPost: myFile.attachmentId
    };
    this.getFiles(this.currentOrder.id);
  }

Upload

answered on 21 Oct 2021

1 answer

141 views

convert bootstap3 theme_white to bootstrap5 scss

Hi,

I look for converting an Kendo AngularJS application with "theme_withe.css" to Angular12 with bootstrap5 and scss files.

Which is best bootstrap5 theme to converting application

Regards

General Discussions

answered on 20 Oct 2021

1 answer

655 views

Kendo UI Donut chart with rounded ended

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?

Charts

Drawing

Styling

answered on 20 Oct 2021

0 answers

150 views

class="col-xs-8" not running on scheduler

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

General Discussions

Scheduler

updated question on 20 Oct 2021

1 answer

208 views

allow user to arrange order of items in drawer

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

Drawer

answered on 20 Oct 2021

1 answer

734 views

Aggregate(sum) async data

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)
  );

Grid

answered on 20 Oct 2021

1 answer

168 views

[Solved] How to apply a global placeholder for DateInput?

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?

DateInput

answered on 19 Oct 2021

1 answer

242 views

Viewport is undefined and tries to acess the lastItemIndex

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.

Grid

answered on 19 Oct 2021