Questions on Kendo UI for Angular Forum

1 answer

99 views

Month View, current date/days out of month indication?

Hello!
I've checked Scheduler docs + forum but couldn't find the answer for my question.

Does Month View support:
1) indicating/styling current day
2) indicating/styling days that are out of current month

Thanks in advance!

Scheduler

answered on 25 Oct 2021

1 answer

581 views

Export to PDF too slow

Hello Team,

We are using the Kendo drawing library(drawDom and exportPDF methods) for PDF export in Angular 12. We can have multiple charts and grids that can be dynamically added to be downloaded as PDF and these charts and grids can be further customized by end user. So this has to be handled from client-side only.

When we are trying to export to PDF, the process is very slow. On debugging, we observed that the exportPDF method is taking a lot of time to complete its execution.

Please suggest if there are any ways/work-arounds by which we can achieve some performance improvement in the PDF export.

Drawing

PDF Export

answered on 25 Oct 2021

1 answer

1.0K+ views

filter date column with year

Hi,

I have a grid with a datasource, where I have a year field (date) and set it's value like this (this is just a sample data):

year: new Date(2021, 0, 1)

On this column I have this filtering:

<kendo-grid-column field="year" title="Év" format="yyyy">
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-date-filter-cell
          [showOperators]="false"
          [column]="column"
          [filter]="filter"
          activeView="decade"
          bottomView="decade"
          format="yyyy"
        >
        </kendo-grid-date-filter-cell>
      </ng-template>
    </kendo-grid-column>

As you see, the filter component is limited to year view/selection. If I select in the filter 2021, I get no record:

But if I type the value in the editor, I get the right results:

How could I get this working with the filter selection too? Why is this behaviour?

Thanks.

DatePicker

Grid

updated answer on 22 Oct 2021

1 answer

116 views

Window Service and Resolver

I am opening a popup window using kendo window service to display a component,

I want to implement resolver so I will have data before displaying the component.

How can I do this with kendo window service?

Thanks!

Window

answered on 22 Oct 2021

1 answer

94 views

grid column with %

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

937 views

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

88 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

76 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

563 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

90 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