Telerik Forums
Kendo UI for Angular Forum
1 answer
81 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
48 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
81 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
0 answers
119 views

I am using <kendo-tabstrip> and i have 10 tabs <kendo-tabstrip-tab> that should be loaded all of them when I enter the page. If i have only 3-5 tabs are loaded okay, but with 10, it loads only 5 and does not display the content of them at all and when i click on them it displays for each click the remaing tab and after 5 clicks I have all of the tabs with content loaded. I tried everything, ChanceDectorRef, but it still does not work. 

I let the code bellow:

<kendo-tabstrip #tabstrip class="tabs-outside-section" (tabSelect)="onTabSelect($event)">
  <kendo-tabstrip-tab
    *ngFor="let tab of tabs; let i = index"
    [title]="tab.title | translate"
    [selected]="selectedIndex === i">
    <ng-template kendoTabContent>
      <ng-container *ngComponentOutlet="tab.component"></ng-container>
    </ng-template>
  </kendo-tabstrip-tab>
</kendo-tabstrip>

  tabs = [
    { title: this.resourceCodes.common.generalDetails, component: Tab1Component },
    { title: this.resourceCodes.booking.common.reservations, component: Tab2Component },
    { title: this.resourceCodes.menu.vouchers, component: Tab3Component },
    { title: this.resourceCodes.menu.campaigns, component: Tab4Component },
    { title: this.resourceCodes.menu.messages, component: Tab5Component },
    { title: this.resourceCodes.menu.interactions, component: Tab6Component },
    { title: this.resourceCodes.document.documents, component: Tab7Component },
    { title: this.resourceCodes.menu.offers, component: Tab8Component },
    { title: this.resourceCodes.menu.surveys, component: Tab9Component },
    { title: this.resourceCodes.menu.reviews, component: Tab10Component },
  ];

  constructor(
    private router: Router,
    userService: UserService,
    private route: ActivatedRoute,
    private cdr: ChangeDetectorRef
  ) {
    this.authUserModel = userService.authUser;
    this.currentUrl = this.router.url;
    this.checkAndSetSelectedIndex(this.currentUrl);
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        if (this.currentUrl === event.urlAfterRedirects) {
          // URL has not changed, read from localStorage
          const savedIndex = localStorage.getItem('selectedCustomerTabIndex');
          if (savedIndex !== null) {
            this.selectedIndex = parseInt(savedIndex, 10);
          }
        } else {
          this.selectedIndex = 0;
          localStorage.removeItem('selectedCustomerTabIndex');
        }
        this.currentUrl = event.urlAfterRedirects;
      }
    });
  }
  ngOnInit() {
    this.route.params.subscribe(params => {
      this.customerId = +params['id'];
      this.cdr.detectChanges(); // Manually trigger change detection
    });
    setTimeout(() => {
      this.cdr.detectChanges();
    }, 20);
  }

 

Thank you!

Andreea
Top achievements
Rank 1
Iron
 asked on 05 Aug 2024
2 answers
2.8K+ views

Hello

we use <kendo-datepicker> to select "from" and "to" dates. But these fields are not mandatory and the user should be able to clear the date fields manually. Does Kendo DatePicker component provide an easy way to clear a selected date? Something like an X icon inside the input area or a CLEAR button inside the popup, e.g. beside the TODAY link?

Best regards

Sebastian

Yanmario
Telerik team
 answered on 02 Aug 2024
0 answers
34 views

I would like to know if anyone has attempted to use sparkline to show progress/ processing stat in a table column.

As shown below - Green = Success, Red = Error, Orange = Processing, Yellow = Waiting.

Shikari
Top achievements
Rank 1
 asked on 29 Jul 2024
0 answers
104 views

Hi,

So I have created a treeview and have kendoTreeViewSelectable added to it which allows me to work with the items I have selected. That part, I was able to get working correctly so when I select an item in the treeview, the parent node of that item is also added to the selectedKeys and it "highlights" both the item and its parent(s). The issue that I am running into now is, when I select an item and then select it again, the item I clicked on is no longer highlighted but its parent(s) are. I want to set it up so that it stays selected. 

I've tried a few approaches like not running the method I have for selecting the parent nodes if the current item Id matches the one clicked on and also by resetting the selectedKeys array and trying to run my method but both don't seem to do anything. 

Any suggestions on what I could do?

Thanks,

Harry

Harry
Top achievements
Rank 1
 updated question on 29 Jul 2024
1 answer
36 views

[object object]

Martin
Telerik team
 answered on 26 Jul 2024
1 answer
55 views

Is it possible to have rounded ends on a sparkline?  Below is an image of the component used multiple times in a grid, and the component template.


<kendo-sparkline 
    type="bar"
    [data]="score"
    [transitions]="true"
    [seriesDefaults]="{labels: {background: 'none', visible: true, format: '{0}'}, color: getBarColor(score), bar: { size: 6 } }"
    [tooltip]="{visible: false}"
>
    <kendo-chart-area opacity="0" [width]="100"></kendo-chart-area>
    <kendo-chart-value-axis>
        <kendo-chart-value-axis-item
            [min]="0"
            [max]="130"
            [reverse]="true"            
        >
        </kendo-chart-value-axis-item>
    </kendo-chart-value-axis>
</kendo-sparkline>

Yanmario
Telerik team
 answered on 26 Jul 2024
2 answers
276 views

Hi,

The license key works when i activate locally on my machine but it does not when trying the same with Dockerfile. Here's the dockerfile code:

# base image
FROM node:18.17.0 as build
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
ARG KENDO_UI_LICENSE_KEY

ENV KENDO_UI_LICENSE= ${KENDO_UI_LICENSE_KEY}

RUN echo ${KENDO_UI_LICENSE_KEY} > kendo-ui-license.txt

RUN npm install

COPY . /app

RUN npx kendo-ui-license activate

 

RUN ng build --prod

FROM nginx:1.17.4-alpine
## Remove default Nginx website
RUN rm -rf /usr/share/nginx/html/*
# copy artifact build from the 'build environment'
COPY --from=build /app/dist/ui/ /usr/share/nginx/html

 

The docker build gave the following error. Please help. The signature is valid as I have activated the same

llicense key on local machine.

=> [build  9/11] COPY . /app                                                                                     17.9s
 => ERROR [build 10/11] RUN npx kendo-ui-license activate                                                          1.0s
------
 > [build 10/11] RUN npx kendo-ui-license activate:
0.939 (INFO) Kendo UI: Reading license from KENDO_UI_LICENSE environment variable...
0.941 (ERROR) Kendo UI: License key signature is not valid. Please, download a new copy of the license and try again.
------

 
Ambarish
Top achievements
Rank 1
Iron
 answered on 22 Jul 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?