Questions on Kendo UI for Angular Forum

1 answer

1.2K+ views

[Solved] How to do a search in a listview kendo angular

How can I do a search bar in the kendo listview ?

ListView

answered on 12 May 2021

0 answers

480 views

Mode of grid paging is changing on tab change.

Hello,

I am using three kendo grids in separate tabs. Paging is using in all three kendo grids. When the page loads, paging is working as expected
However, on tab change mode of paging changed. But if we are going to resize the page, paging will appear. Please see the attached screen shots.

Recently upgraded from Angular 8 to 11. We got this issue after the upgrade.

Angular version: 11.2.3

Kendo UI Grid :

"@progress/kendo-angular-grid": "5.0.2",

 
 <nav ngbNav #nav="ngbNav" type="pills" (navChange)="toggleTabs($event)" class="users_role_managers">
      <ng-container ngbNavItem="tab-1">
        <a ngbNavLink>{{'lblManageUsers' | labelTranslate}}</a>
        <ng-template ngbNavContent>
          <div class="container-fluid product_grid_kendo m-0 mt-4 user_grid_kendo">
            <kendo-grid #kendoGrid1 class="" [data]="manageUsersGridData" [resizable]="true" [scrollable]="'scrollable'"
              [sortable]="true" [filterable]="true" [pageable]="true" [pageSize]="manageUsersGridstate.take"
              [skip]="manageUsersGridstate.skip" [sort]="manageUsersGridstate.sort"
              [filter]="manageUsersGridstate.filter" (dataStateChange)="manageUsersGridDataStateChange($event)">
              <kendo-grid-column field="displayName" title="{{'lblDisplayName' | labelTranslate}}" width="150">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="pointer mainbg-text-primary" (click)="performCrudOperationOnUser('EDIT', dataItem)">
                    <a>{{ dataItem.displayName}}</a>
                  </div>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="email" title="{{'lblEmail' | labelTranslate}}" width="150">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="userRoles" title="{{'lblRoles' | labelTranslate}}" width="250">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="modifiedBy" title="{{'lblLastUpdatedBy' | labelTranslate}}" width="200">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="modifiedOn" title="{{'lblLastUpdatedDate' | labelTranslate}}" width="160">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-date-filter-cell [column]="column" [filter]="filter" operator="eq"
                    [showOperators]="false">
                  </kendo-grid-date-filter-cell>
                </ng-template>
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  {{ dataItem.modifiedOnString }}
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="Edit" title="Edit" width="70" [filterable]="false" [sortable]="false">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="text-center">
                    <span class="editicn-trim" (click)="performCrudOperationOnUser('EDIT',dataItem)">
                      <span class="edit_icon pointer ml-15" aria-hidden="true"></span>
                    </span>
                  </div>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="Delete" title="Delete" width="70" [filterable]="false" [sortable]="false">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="text-center">
                    <span class="delete_icon pointer" aria-hidden="true"
                      (click)="performCrudOperationOnUser('DELETE',dataItem)"></span>
                  </div>
                </ng-template>
              </kendo-grid-column>
            </kendo-grid>
          </div>
        </ng-template>
      </ng-container>
      <ng-container ngbNavItem="tab-2">
        <a ngbNavLink>{{'lblManageRoles' | labelTranslate}}</a>
        <ng-template ngbNavContent>
          <div class="container-fluid product_grid_kendo product_grid_kendomng m-0 mt-4 user_grid_kendo">
            <kendo-grid #kendoGrid class="" [data]="manageRolesGridData" [resizable]="true" [scrollable]="'scrollable'"
              [sortable]="true" [filterable]="true" [pageable]="true" [pageSize]="manageRolesGridstate.take"
              [skip]="manageRolesGridstate.skip" [sort]="manageRolesGridstate.sort"
              [filter]="manageRolesGridstate.filter" (dataStateChange)="dataStateChange($event)">
              <kendo-grid-column field="roleName" title="{{'lblRoleName' | labelTranslate}}" width="">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="modifiedBy" title="{{'lblLastUpdatedBy' | labelTranslate}}" width="300">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="modifiedOn" title="{{'lblLastUpdatedDate' | labelTranslate}}" width="180">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-date-filter-cell [column]="column" [filter]="filter" operator="eq"
                    [showOperators]="false">
                  </kendo-grid-date-filter-cell>
                </ng-template>
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  {{ dataItem.modifiedOnString }}
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="Edit" title="Edit" width="80" [filterable]="false" [sortable]="false">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="text-center">
                    <span class="editicn-trim" (click)="performCrudOperationonRole('EDIT',dataItem)">
                      <span class="edit_icon pointer ml-15" aria-hidden="true"></span>
                    </span>
                  </div>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="Delete" title="Delete" width="80" [filterable]="false" [sortable]="false">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="text-center">
                    <span class="delete_icon pointer" aria-hidden="true"
                      (click)="performCrudOperationonRole('DELETE',dataItem)"></span>
                  </div>
                </ng-template>
              </kendo-grid-column>
            </kendo-grid>
          </div>
        </ng-template>
      </ng-container>

      <ng-container ngbNavItem="tab-3" *ngIf="this.kpmgFunctionId===1000 && IsSuperAdmin">
        <a ngbNavLink>{{'lblManageAdministrators' | labelTranslate}}</a>
        <ng-template ngbNavContent>
          <div class="container-fluid product_grid_kendo m-0 mt-4 user_grid_kendo">
            <kendo-grid #kendoGrid class="" [data]="manageSystemUsersGridData" [resizable]="true"
              [scrollable]="'scrollable'" [sortable]="true" [filterable]="true" [pageable]="true"
              [pageSize]="manageSystemUsersGridstate.take" [skip]="manageSystemUsersGridstate.skip"
              [sort]="manageSystemUsersGridstate.sort" [filter]="manageSystemUsersGridstate.filter"
              (dataStateChange)="manageSystemUsersGridDataStateChange($event)">
              <kendo-grid-column field="displayName" title="{{'lblDisplayName' | labelTranslate}}" width="150">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <!-- <div class="pointer mainbg-text-primary"> -->
                  {{ dataItem.displayName}}
                  <!-- </div> -->
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="email" title="{{'lblEmail' | labelTranslate}}" width="150">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="modifiedBy" title="{{'lblLastUpdatedBy' | labelTranslate}}" width="200">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
                    [showOperators]="false">
                  </kendo-grid-string-filter-cell>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="modifiedOn" title="{{'lblLastUpdatedDate' | labelTranslate}}" width="160">
                <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                  <kendo-grid-date-filter-cell [column]="column" [filter]="filter" operator="eq"
                    [showOperators]="false">
                  </kendo-grid-date-filter-cell>
                </ng-template>
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  {{ dataItem.modifiedOnString }}
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="Delete" title="Delete" width="70" [filterable]="false" [sortable]="false">
                <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <div class="text-center">
                    <span class="delete_icon pointer" aria-hidden="true"
                      (click)="performCrudOperationOnSystenUser('DELETE',dataItem)"></span>
                  </div>
                </ng-template>
              </kendo-grid-column>
            </kendo-grid>
          </div>
        </ng-template>
      </ng-container>

    </nav>

Any help is really appreciated.

Thanks

Hirankumar

Grid

asked on 12 May 2021

1 answer

349 views

Add a row in a a group in grid

hi i m a new user of kendo, and i would know if it s possible to add a row inside a grouped grid?i want the row visible in edition inside the group.

Grid

updated answer on 12 May 2021

1 answer

174 views

Do we have any examples for Sorting , Filtering , Grouping concept when scrollable="virtual" property enabled. ?

alos when endless scrolling enabled. Do we need to implement from Backend side ? Is there any examples available to check ?

Thanks.

Grid

ScrollView

Sortable

answered on 12 May 2021

1 answer

337 views

Change the format

Is it possible to open kendo date range picker from a single input field in angular 8 and it should be a convert to text format ex. (Jan 8th - Feb 08th, 2021 ) Please refer the attached image

DateInput

DateRange

updated answer on 11 May 2021

3 answers

728 views

TreeView not updating after version upgrade

Hello,

We are upgrading the version of the kendo libs we are using. The tree view version went from 4.3.0 to 5.1.1. After this upgrade the tree views in our app don't update dynamically when the bound data is changed. That is when nodes are added, they are not shown.

I tried to make a plunker to demo this problem, and at first I seemed to replicate it, but then I found that including the BrowserAnimationsModule in the plunker fixed it, but we're already doing that in our app. So I don't have a MWE to show you. :-( But it still makes me think it is some kind of animation failure. No errors are logged.

I hate asking this question without being able to provide an actual example, but maybe someone will recognize the symptoms... Here are some bits of the code, it's basically for displaying and editing GridList filters

<kendo-treeview [nodes]="[filter]" kendoTreeViewHierarchyBinding childrenField="filters"> 

 <ng-template kendoTreeViewNodeTemplate let-dataItem let-index="index">
  <button kendoButton look="flat" icon="close" (click)="delete(index)"></button>
  <span *ngIf="dataItem.filters != null">
  <button kendoButton icon="filter-add-expression" [look]="'flat'" (click)="addFilter(dataItem)"></button>
  <button kendoButton icon="filter-add-group"[look]="'flat'"(click)="addGroup(dataItem)"></button>
 ...
 </ng-template>
</kendo-treeview>

...


public filter: CompositeFilterDescriptor;

public addFilter(dataItem: CompositeFilterDescriptor) {
 dataItem.filters.push({ field: '', operator: 'eq', value: '' });
}
public addGroup(dataItem: CompositeFilterDescriptor) {
 dataItem.filters.push({
  logic: 'and',
  filters: [{ field: '', operator: 'eq', value: '' }],
 });
}

Here are the version changes we did. I also tried updating Angular from 11.0.4 to 11.2.12 without luck.

TreeView

answered on 11 May 2021

1 answer

459 views

Kendo Theme Default no longer working

We are using Kendo Theme Default 4.37.0 for implementing dark and light theme to our Kendo charts in our project. However, a recent upgrade to some of our packages are disabling the kendo theme that we have set up.

Steps to reproduce the issue on our side is to delete the current package-lock.json file, delete node modules and then npm install.

under style.scss, we have

@import"~@progress/kendo-theme-default/dist/all.scss";

I have attached our package-lock.json file (post upgrade) for reference.

Anyone having this issue or know the cause behind it?

Charts

answered on 10 May 2021

1 answer

626 views

A function called in grid cell template always triggering for all data in grid when click or mouseover or etc.

Hello all,

I am using kendo grid. When call a function in cell template, this function is constantly triggering for all data in the grid. It causes a problem when I want to load a lot of data in the grid.

How can i solve this ?

Thanks.

<kendo-grid-column>
<ng-template kendoGridCellTemplate let-dataItem>
{{GetExpenditure(dataItem)}}
</ng-template>
</kendo-grid-column>

Grid

answered on 10 May 2021

1 answer

683 views

[Solved] Adjust toolbar k-popup width

Hi!

Is it possible to set the with of the popup from toolbar!

Example: https://stackblitz.com/edit/angular-ymzuwx?file=app/app.component.ts

ToolBar

answered on 07 May 2021

1 answer

995 views

rowClass rowCallback function is continuously called

I'm trying to implement the basic rowClass rowCallback example shown here: https://stackblitz.com/edit/angular-yh8zyr?file=app/app.component.ts, and I noticed in my local environment the rowCallback is being called continuously. Logging out a value in the function will fill the entire console, and inspecting the element shows the class being added to the row is flashing consistently from being added over and over.

Is there any way to figure out what is causing this? I've tried to just implement the example in the link with a basic grid and hard coded array of data, but still experiencing the same issue. Any help appreciated. Thanks!

Steve

Grid

Styling

answered on 07 May 2021