Telerik Forums
Kendo UI for Angular Forum
1 answer
335 views

Hello,

Is there a way to change table/cells width in KendoEditor other than typing spaces or editing HTML source directly ?

Ideally with a mouse dragging, similar to what TinyMCE Editor offers.

Thank you,

--

Leonid.

Martin Bechev
Telerik team
 answered on 29 Nov 2021
0 answers
306 views

Hello Team,

I am using line type stock chart for multiple series where I have dates like: "01-Jan-2021", "04-Jan-2021" and so on. I am using new Date() to parse the dates to Kendo acceptable format. Chart is rendering but dates are wrong on the X axis labels as well as tooltip. Data set contains multiple attributes along with date starting from "01-Jan-2021" but in the chart it is starting from "27-Dec-2020" that is incorrect and it is happening for all next data points. All data points showing incorrect date. I have tried to change date format by using getTime() method (referring Kendo API Data) but no luck. When I change the date range by using navigator it shows me correct start and end date in information popup which appears for few seconds but x axis labels are incorrect.

Could you please help me to understand what I am doing wrong here.

Thanks in advance.

 

Regards,

Deepesh

Deepesh
Top achievements
Rank 1
Iron
 asked on 26 Nov 2021
1 answer
559 views

Hi, i want to make a link on the row, when the user see the grid he can click on the row wich is a link.

Thank you

 

<divclass="grid-collaborateur">

    <!-- Création du bloc Grid de Kendo qui encadre tous le contenu avec ses paramètres -->
    <kendo-grid
        [height]="500"
        [kendoGridBinding]="collaborateurs"
        [resizable]="true"
        [filterable]="true"
        [sortable]="true"
        [pageable]=true
        [pageSize]="10">
        <!-- Début Excel boutton -->
        <ng-template kendoGridToolbarTemplate>
            <button kendoGridExcelCommand icon="file-excel" class="excel-export">Exporter sur Excel</button>
            <kendo-grid-excel fileName="ListeCollaborateur.xlsx">
                <!-- Choix des colonnes export pour excel (la colonne action n'est pas présente ci-dessous car ne doit pas être présente dans le fichier excel) -->
                <kendo-excelexport-column field="matricule" title="Matricule">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="nom" title="Nom">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="prenom" title="Prénom">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="dateDebut" title="Date Début">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="dateFin" title="Date Fin">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="typeEmploye" title="Type Collaborateur">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="section" title="Section Collaborateur">
                </kendo-excelexport-column>
            </kendo-grid-excel>
        </ng-template>
        <!-- Fin excel boutton -->
        <!-- Début création des colonnes du Grid -->
        <!-- Création de la colonne Matricule dans le tableau -->
        <kendo-grid-column field="matricule" title="Matricule">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <!-- Modification du filtre par défault par un filtre String -->
                <kendo-grid-string-filter-cell
                  [showOperators]="false"
                  [column]="column"
                  [filter]="filter">
                </kendo-grid-string-filter-cell>
              </ng-template>
        </kendo-grid-column>
        <!-- Création de la colonne Nom dans le tableau -->
        <kendo-grid-column field="nom" title="Nom">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <!-- Modification du filtre par défault par un filtre String -->
                <kendo-grid-string-filter-cell
                  [showOperators]="false"
                  [column]="column"
                  [filter]="filter">
                </kendo-grid-string-filter-cell>
              </ng-template>
        </kendo-grid-column>
        <!-- Création de la colonne Prénom dans le tableau -->
        <kendo-grid-column field="prenom" title="Prénom">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <!-- Modification du filtre par défault par un filtre String -->
                <kendo-grid-string-filter-cell
                  [showOperators]="false"
                  [column]="column"
                  [filter]="filter">
                </kendo-grid-string-filter-cell>
              </ng-template>
        </kendo-grid-column>
        <!-- Création de la colonne Date Début dans le tableau -->
        <kendo-grid-column field="dateDebut" title="Date Début">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <!-- Modification du filtre par défault par un filtre Date -->
                <kendo-grid-date-filter-cell
                    [showOperators]="false"
                    [column]="column"
                    [filter]="filter">
                </kendo-grid-date-filter-cell>
            </ng-template>
        </kendo-grid-column>
        <!-- Création de la colonne Date Fin dans le tableau -->
        <kendo-grid-column field="dateFin" title="Date Fin">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <!-- Modification du filtre par défault par un filtre Date -->
                <kendo-grid-date-filter-cell
                    [showOperators]="false"
                    [column]="column"
                    [filter]="filter">
                </kendo-grid-date-filter-cell>
            </ng-template>
        </kendo-grid-column>
        <!-- Création de la colonne Type Collaborateur dans le tableau -->
        <kendo-grid-column field="typeEmploye" title="Type Collaborateur">
            <!-- Pas de modification du filtre, version défault -->
        </kendo-grid-column>
        <!-- Création de la colonne Section dans le tableau -->
        <kendo-grid-column field="section" title="Section">
            <!-- Pas de modification du filtre, version défault -->
        </kendo-grid-column>
       
        <!-- Création de la colonne Actions dans le tableau -->
        <kendo-grid-column field="Modifier" title="Actions">
            <!-- Suppression du filtre pour cette colonne -->
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
            </ng-template>
            <!-- Création d'un bouton Modifier -->
            <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                <!--  Appel du bouton modifier collaborateur-->
              <button-modifier-collaborateur></button-modifier-collaborateur>
            </ng-template>
        </kendo-grid-column>
        <!-- Fin création des colonnes du Grid -->
        <!-- Modification du text du pager -->
        <kendo-grid-messages [pagerOf]="'sur'" [pagerItems]="'collaborateurs'">
        </kendo-grid-messages>
    </kendo-grid>
</div>
Dimiter Topalov
Telerik team
 answered on 25 Nov 2021
1 answer
255 views

Hi,

I was wondering if it is possible to default the AM/PM designator programmatically, without having to set an actual time value to the time picker?

The min property does work, however it does not seem to synchronise with the AM/PM designator on the actual input field.

For example, if I've set the min to be 1:00PM, then the list actually does not have the AM available - which is correct. However, the input field still has "hh:mm am" displaying.

I suppose one other way could be to change the dayPeriod placeholder text from AM to PM, if that is at all possible using the currently existing API.

Martin Bechev
Telerik team
 answered on 23 Nov 2021
1 answer
206 views

Hi,

 

Could i use Kendo component with RxJs7 and Typescript 4.4 in Angular13 ?

 

Regards

Dimiter Topalov
Telerik team
 answered on 23 Nov 2021
1 answer
980 views

I am using autoFocusedElement to set focus to the first input on a dialog as described at https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/initial-focus/.  When that input is wrapped in a floating label, it appears to work, but it produces the following error in the console:  

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'k-state-focused: false'. Current value: 'k-state-focused: true'.

Am I doing something wrong, or is there anything I can do to work around this?  Here is the modified template that I used to reproduce the error:


        <div class="example-wrapper">
            <button kendoButton *ngIf="!opened" (click)="open()">Open dialog</button>
            <kendo-dialog *ngIf="opened"
                autoFocusedElement="#username"
                title="Please confirm"
                (close)="close('cancel')"
                [minWidth]="250"
                [width]="450"
            >
                <div style="margin: 30px; text-align: center;">
                    <p>Enter your username below</p>

                    <kendo-floatinglabel text="User Name">
                      <input kendoTextBox id="username" placeholder="Your username" style="width: 200px"/>
                    </kendo-floatinglabel>
                </div>
                <kendo-dialog-actions>
                    <button kendoButton (click)="close('no')">No</button>
                    <button kendoButton (click)="close('yes')" primary="true">Yes</button>
                </kendo-dialog-actions>
            </kendo-dialog>
        </div>

Martin Bechev
Telerik team
 answered on 22 Nov 2021
1 answer
337 views

Hi Team,

I am trying to use shared tooltip in stock chart but it is not working as expected. However it is working fine with line chart. Can anyone help me on this?

 

Thanks in advance.

Martin Bechev
Telerik team
 answered on 22 Nov 2021
1 answer
216 views

I'm having six tabs and in all six tabs, I'm having a kendo-grid table. when I load the component it's becoming too slow(40 seconds) when working with 500 records. and I'm loading data from API(Backend) and data comes from the backend very quickly(1 second) and pagination is enabled.

I have even implemented virtual scrolling but didn't help me.

<kendo-grid [data]="gridDataOpen" [loading]="loaderVisible" [filterable]="true" [filter]="state.filter" 
                 scrollable="virtual" [rowHeight]="35" [sortable]="true" [sort]="state.sort" [pageSize]="state.take"    

[skip]="state.skip"[height]="700"(dataStateChange)="dataStateChange($event)"(pageChange)="pageChange($event)">

pageChange(e) {
    this.loaderVisible = true;
    this.state.skip = e.skip;
    this.loadItems(e);

}

public pageSize = 100;
  loadItems(state): void {
    this.gridDataOpen = {
      data: this.tableDataOpen.slice(this.state.skipthis.state.skip + this.pageSize),
      total: this.tableDataOpen.length,
    };
    this.gridDataAccepted = {
      data: this.tableDataAccepted.slice(this.state.skipthis.state.skip + this.pageSize),
      total: this.tableDataAccepted.length,
    };
    this.gridDataSubmitted = {
      data: this.tableDataSubmitted.slice(this.state.skipthis.state.skip + this.pageSize),
      total: this.tableDataSubmitted.length,
    };
    this.gridDataSubmissionAccepted = {
      data: this.tableDataSubmissionAccepted.slice(this.state.skipthis.state.skip + this.pageSize),
      total: this.tableDataSubmissionAccepted.length,
    };
    this.gridDataRejected = {
      data: this.tableDataRejected.slice(this.state.skipthis.state.skip + this.pageSize),
      total: this.tableDataRejected.length,
    };
    this.gridDataCancelled = {
      data: this.tableDataCancelled.slice(this.state.skipthis.state.skip + this.pageSize),
      total: this.tableDataCancelled.length,
    };
    this.loaderVisible = false;
  }

 

Martin Bechev
Telerik team
 answered on 19 Nov 2021
1 answer
191 views

Hi,

We use editable grids with multiple selection that sometimes have a page size of 500 or larger. In this case, when selecting another row when one or more rows are already selected, it takes few seconds to execute the operation. Is there anything that can be done to make this work faster?

Thanks,

Iuliana

Martin Bechev
Telerik team
 updated answer on 19 Nov 2021
1 answer
158 views

hello,

I have been searching myself silly on how to change just 1 label in an axis.I have searched for hours on how to do this, but can not find it. 

For instance : I have a x-axis that has every month of the year. But I want to change the color of the current month. 

As far as i can tell, I have to do something with the  axisLabelVisualArgs, but for the life of me, I can't figure out how I can change a text's color dependant on a condition.

This is the result I want to get :

Dimiter Topalov
Telerik team
 answered on 18 Nov 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?