Telerik Forums
Kendo UI for Angular Forum
0 answers
94 views
Hi,

I am using Kendo-dialog in angular project page. In html I have a table with rows that loads data as objects array with each object bound to row.

 <table class="table table-hover table-sm table-striped" style="width:75%;">
   <thead>
     <tr>
       <th scope="col"></th>
       <th scope="col"></th>
       <th scope="col">Name</th>
       <th scope="col">Description</th>
       <th scope="col">Date</th>
       <th scope="col">Day of Week</th>
     </tr>
   </thead>
   <!--write the data rows-->
   <tbody>
     <tr *ngFor="let h of hl" style="padding:0px" class="{{h.RowClass}}">
       <th scope="row"><span class="fas fa-edit" style="padding-left:10px" (click)="editDialog(h)" *ngIf="isAd" title="Edit this h"></span>
       <th scope="row"><span class="fa fa-trash" style="padding-left:10px" (click)="deleteDialog(holiday)" *ngIf="isAdmin" title="Delete this holiday"></span></th>
       <td><em *ngIf="h.Historical" style="color:#C8C8C8">{{h.Name}}</em><span *ngIf="!h.Historical">{{h.Name}}</span></td>      
     </tr>
   </tbody>
 </table>

dialog looks like this.
<kendo-dialog title="Edit H" *ngIf="showEditDialog" (close)="cancelUpdate()" [minWidth]="250" [width]="450">
  <form #form="ngForm">
    <div class="row vcenter form-group m-1">
      <div class="col-4">Title:</div>
      <div class="col-8 vcenter">       
        <input class="form-control" style="height:30px"
               required name="editTitle" id="editTitle" #name="ngModel" [(ngModel)]="this.editH.Name" type="text" />
        <span class="fa fa-asterisk vcenter" style="color:red; padding-left:5px; font-size:12px" *ngIf="!name.valid && !name.pristine"></span>
      </div>
    </div>
   .......
  </form> 
  <kendo-dialog-actions>
    <button kendoButton (click)="updateH()" primary="true" [disabled]="!form.valid">Save</button>
    <button kendoButton (click)="cancelUpdate()">Cancel</button>
  </kendo-dialog-actions>
</kendo-dialog>


TypeScript Code:
EditDialog(h: Holiday)
{
this.editholiday = h;
}

update(){
//data service layer call by passing this.editholiday object
//refresh main page table rows
}

When I edit data like Name in Dialog, as I am type letters, main html page table row column gets updated. I do not want main table data to get updated as I am typing in dialog.
How do I avoid.

Prathibarani
Top achievements
Rank 1
 asked on 14 Aug 2024
0 answers
185 views

Hi,

currently I'm evaluating/experimenting with the kendo grid. I have a question regarding grid editing. I read, that we can use the directive 'kendoGridInCellEditing' to simplify our code base and avoid bolierplate codes. But in this case if we click on a cell, the cell goes automatically in edit mode.  Alternatively we can use the 'manual' mode and write all the boilerplate code. I found a feature request on this topic: https://feedback.telerik.com/kendo-angular-ui/1661188-provide-an-option-for-activating-in-cell-editing-on-double-click

I investigated the internal methods of the grid and did the following:


this.grid.cellClick.subscribe((cellClickEvent) => {
      this.grid.closeCell();
    });


With this piece of code, the grid won't go in edit mode. This is fine, but regardless of this, if we inspect f. e. the grid row element in the browser debug mode, then we see, that after clicking on a cell, the row element is updated. The question is, how we can prevent it, while having the 'kendoGridInCellEditing' still active?

In the meantime I discovered, that the updating of the row element occurs also in any other cases if the cell goes in edit mode. In the kendo source code there should be some logic, which updates the 'tr' element of the grid. I guess this is because an editor is showing in the grid. How can we avoid this update? The background of my question is, that I do some DOM manipulation inside the grid, and every time, if the grid goes in edit mode, this manipulations are gone, because the 'tr' element gets refreshed.

peter
Top achievements
Rank 1
 updated question on 14 Aug 2024
0 answers
49 views

Hi,

I am trying to build angular 17 standalone component based on kendo ui menu for angular. Goal is to replace menu in old angularjs app built using kendo ui for jquery. I am trying to migrate little parts one by one.

I built component and added it to the old app, menu is rendered using default theme, but for some reason menu is dead - open or select events don't trigger. So i don't see submenus or cant select even anything on the root.

On the other side, if i put kendo ui button for angular in the same component, it works normally and triggers event on click.

Do you please have any ideas how to proceed next, because menu is one of crucial components I need for the further migration.

Thank you.

Regards,
Vedad

Vedad
Top achievements
Rank 3
Bronze
Bronze
Iron
 asked on 13 Aug 2024
0 answers
86 views

In Angular Grid Grouping, Do we have the ability to display a row with multiple columns instead of a specific field?
For Ex: 
https://www.telerik.com/kendo-angular-ui/components/grid/grouping/basics/
Instead of adding a specific field that we group by, Could we add a row with multiple columns?

Additionally, is there a way to achieve a hierarchical view within the grid itself? Similar to the Master Detail functionality, we'd like to have sub-rows that share the same columns as the main row, but without treating them as separate components with distinct headers.
https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/#:~:text=To%20apply%20a%20hierarchical%20order%20to%20the%20desired,are%20filtered%20by%20the%20parent%20key%20field%20value.


Aya
Top achievements
Rank 1
 asked on 13 Aug 2024
1 answer
71 views
The Angular Grid Filter Menu doc page (https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-menu/) has a stackblitz example (https://stackblitz.com/run/?file=src%2Fapp%2Fapp.component.ts). The products.ts file in that example has dates but no times, e.g. new Date(1996, 8, 20). Filter by "is equal to" on 8/20/1996 returns one row, as expected. But when I modify that file and add a time, say 10:11:05, and filter by "is equal to" and enter date 8/20/1996, no results are returned. How can I supply exact times but filter only on date? I can create a filter using "is after or equal to" combined with "is before or equal to", but that is non-intuitive to my users. I could use the DateTimePicker, but the users don't want to select a time, they just want to select the date. There is a similar discussion in the forum (https://www.telerik.com/forums/filter-date-column-with-year) but that just has to do with the year. I could create a similar function, but that seems like overkill. Is there an easier way? 
Zornitsa
Telerik team
 answered on 13 Aug 2024
0 answers
50 views

<activity-overlay [activity]="portfolioDataLoader$" class="fade-out">
    <kendo-grid [data]="buildings" [height]="500" [filterable]="true" >
        <kendo-grid-column field="name" [title]="'GROUP_DETAILS.NAME' | translate" width="200" [filterable]="true" ></kendo-grid-column>
        <kendo-grid-column field="description" [title]="'GROUP_DETAILS.DESCRIPTION' | translate" width="300" [filterable]="true"></kendo-grid-column>
        <kendo-grid-column [title]="'PORTFOLIO.DETAILED_VIEW'| translate" [style.text-align]="'center'">
            <ng-template kendoGridCellTemplate let-dataItem>
                <i class="tk tk-arrow-r-o tk-3x font-weight-bold w-100 text-center" (click)="detailView(dataItem)"></i>
            </ng-template>
        </kendo-grid-column>
        <kendo-grid-column [title]="'PORTFOLIO.ACTIONS' | translate">
            <ng-template kendoGridCellTemplate let-dataItem>
                <div class="d-flex gap-2 w-100 justify-content-center">
                    <i class="tk tk-pencil-o tk-3x font-weight-bold  text-center edit" [hidden]="dataItem.isUpdating"
                        (click)="editGroup(dataItem)"></i>
                    <i class="tk tk-check-o tk-3x font-weight-bold  text-center save"
                        [class]="isSavingInProgress ? 'k-icon k-i-loading' : ''" [hidden]="!dataItem.isUpdating"
                        (click)="saveChanges(dataItem)"></i>
                    <i class="tk tk-reset-o tk-3x font-weight-bold  text-center reset" [hidden]="!dataItem.isUpdating"
                        (click)="resetGroup(dataItem)"></i>
                </div>
            </ng-template>
        </kendo-grid-column>
        <ng-template kendoGridDetailTemplate="" let-dataItem>
            <kendo-grid class="inline-grid" [data]="buildingsGroupByNames[dataItem.name] ? buildingsGroupByNames[dataItem.name]  : []" [scrollable]="'none'">
                <kendo-grid-column field="groupName" [title]="'PORTFOLIO.GROUP_NAME' | translate"></kendo-grid-column>
                <kendo-grid-column field="rearDoors" [title]="'PORTFOLIO.FLOORS' | translate">
                    <ng-template kendoGridCellTemplate let-dataItem>
                        <kendo-multiselect [clearButton]="false" [disabled]="true" [data]="groupStopsInfo[dataItem.groupDeviceId]"
                            textField="groupFloorLabel"
                            valueField="groupStopId" valuePrimitive="true"
                            [(ngModel)]="dataItem.groupFloorAccess">
                            <ng-template kendoMultiSelectHeaderTemplate let-dataItem>
                                <div class="content-box">
                                    <p class="lead m-0">
                                        {{'PORTFOLIO.SELECT_ALL' | translate}}
                                    </p>
                                </div>
                            </ng-template>
                        </kendo-multiselect>
                    </ng-template>
                </kendo-grid-column>
                <kendo-grid-column field="isVipCallsAllowed" [title]="'PORTFOLIO.PERMISSIONS' | translate">
                    <ng-template kendoGridCellTemplate let-dataItem>
                        <kendo-multiselect [data]="elevatorFunctionalityLOV" [clearButton]="false"
                            [disabled]="!dataItem.isUpdating" [(ngModel)]="dataItem.permissions">
                            <ng-template kendoMultiSelectItemTemplate="" let-dataItem>
                                <ng-container [ngSwitch]="dataItem">
                                    <ng-container *ngSwitchCase="'isVipCallsAllowed'">{{'PORTFOLIO.ALLOW_VIP_CALLS' |
                                        translate}}</ng-container>
                                    <ng-container *ngSwitchCase="'isHandicapCallsAllowed'">{{'PORTFOLIO.ALLOW_HANDICAP_CALLS' |
                                        translate}}</ng-container>
                                </ng-container>
                            </ng-template>
                            <ng-template kendoMultiSelectTagTemplate let-dataItem>
                                <ng-container [ngSwitch]="dataItem">
                                    <ng-container *ngSwitchCase="'isVipCallsAllowed'">{{'PORTFOLIO.ALLOW_VIP_CALLS' |
                                        translate}}</ng-container>
                                    <ng-container *ngSwitchCase="'isHandicapCallsAllowed'">{{'PORTFOLIO.ALLOW_HANDICAP_CALLS' |
                                        translate}}</ng-container>
                                </ng-container>
                            </ng-template>
                        </kendo-multiselect>
                    </ng-template>
                </kendo-grid-column>
              </kendo-grid>
        </ng-template>
      </kendo-grid>
      <ng-template #floorsTemplate let-floors>
        <span>{{ floors.value === 'all' ? 'All floors' : floors.value.join(', ') }}</span>
      </ng-template>
    <button type="button" class="btn btn-primary d-flex gap-2 align-items-center mt-4" (click)="addGroup()">
        <i class="tk tk-plus-o tk-2x"></i>
        <span>{{'PORTFOLIO.CREATE_USER_GROUP' | translate}}</span>
    </button>
</activity-overlay>


 I added [filterable]-true property for Name and Description property filters are coming. But they are not working when I try to search

Below is the output :-

Ankit
Top achievements
Rank 1
 asked on 12 Aug 2024
1 answer
61 views

Hello,

the Timeline component displays a collection of events grouped by the year of the event.

Is there a way to group the events in a more granular way? E.g. by month?

Best regards,
Thomas

Zornitsa
Telerik team
 answered on 09 Aug 2024
1 answer
140 views
On Angular PDFViewer, none of the hyperlinks on the file are clickable.  Is there a way to enable this?  I have been searching but only see a workaround for JQuery component and not for Angular.
Zornitsa
Telerik team
 answered on 07 Aug 2024
0 answers
58 views

Hi,

My Code is below , I am using dropdown list in kendoGridEditTemplate it has a value and text field. Also i am using [columnMenu]="{ filter: true }" in the grid to get column menu filter. When i filter through the filter

of this column it filters on the value field of the rather than the text field of the dropdown list.

I want the filter to filter on text field of the dropdown. Please help

<kendo-grid[kendoGridBinding]="data"[pageSize]="gridState.take"[skip]="gridState.skip"[sort]="gridState.sort"

[columnMenu]="{ filter: true }"[pageable]="true"[sortable]="true"(dataStateChange)="onStateChange($event)"

(edit)="editHandler($event)"(cancel)="cancelHandler($event)"(save)="saveHandler($event)"

(remove)="removeHandler($event)"(add)="addHandler($event)"[navigable]="true"[selectable]="{ mode: 'single'}"

(selectionChange)="selectedKeysChange($event)">

<kendo-grid-column field="ClientCode" title="ClientCode" [width]="150">
    <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">
     

<kendo-dropdownlist[valuePrimitive]="true"[data]="clientCodes"textField="Code_Description"

valueField="Code"[formControl]="formGroup.get('ClientCode')"></kendo-dropdownlist>

    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem>
      {{ clientCode(dataItem.ClientCode)?.Code_Description }}
    </ng-template>
 

</kendo-grid-column>

</kendo-grid>
Deepak
Top achievements
Rank 1
 updated question on 07 Aug 2024
1 answer
125 views

If I upgrade to version 16.6, any component that has a normal html table in the same page with a kendo-grid component throws an error.  Reverting to version 16.5 fixes the issue.

NullInjectorError: NullInjectorError: No provider for ColumnResizingService!

    at NullInjector.get (core.mjs:1632:21)
    at R3Injector.get (core.mjs:3014:27)
    at R3Injector.get (core.mjs:3014:27)
    at R3Injector.get (core.mjs:3014:27)
    at R3Injector.get (core.mjs:3014:27)
    at ChainedInjector.get (core.mjs:5282:32)
    at lookupTokenUsingModuleInjector (core.mjs:5625:31)
    at getOrCreateInjectable (core.mjs:5671:10)
    at ɵɵdirectiveInject (core.mjs:11565:17)
    at NodeInjectorFactory.TableDirective_Factory [as factory] (progress-kendo-angular-grid.mjs:8777:113) 
Yanmario
Telerik team
 answered on 07 Aug 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?