Telerik Forums
Kendo UI for Angular Forum
0 answers
133 views

I am using Kendo UI timeline view for scheduling events in a day.

I want to provide a feature where user can clone (create a copy of) existing events and edit them as required in order to minimize their work.

I found this concept in jQuery where they are cloning events using keyboard shortcuts(https://docs.telerik.com/kendo-ui/knowledge-base/clone-events-on-ctrl-and-click) but there is no way available to do the same in Angular.

Kindly help in achieving this feature as I am new to Telerik UI.

kavi
Top achievements
Rank 1
 asked on 16 Nov 2022
1 answer
385 views

My treeview is defined as follows:

            <kendo-treeview
              #treeView
              kendoTreeViewExpandable
              kendoTreeViewSelectable
              (selectionChange)="edit($event)"
              [(expandedKeys)]="expandedKeys"
              textField="text"
              [filter]="filterTerm"
              [nodes]="keyValues$ | async"
              [children]="fetchChildren"
              [hasChildren]="hasChildren"
            >

As the screen is opened I set the expandedKeys so that some of my nodes are by default opened, and the data is automatically loaded in.

However certain nodes have children which I would also like to load when their parent is opened, and  to further complicate the matter, a different call to the server is required than the one defined in fetchChildren for fetching this data.

Is there any way I can independently load this data, not using fetchChildren and then programmatically insert it into the tree?  It seems as though there isn't a way to perform a hybrid approach to data loading...

 

Martin Bechev
Telerik team
 answered on 16 Nov 2022
0 answers
218 views
Hello,

I'm using the Angular Hierarchical Drawer and I added a toggle button to expand/ collapse all items.

How can I expand/ collapse the items in the drawer using this toggle button?

Thanks
Amr
Top achievements
Rank 1
 asked on 15 Nov 2022
1 answer
417 views
I have a use case for this component where I don't wish the user to be able to create nested expressions. Is there any way to control the enabling / disabling of the Add Group button. Or show / hide it depending on nesting level?
Martin Bechev
Telerik team
 answered on 14 Nov 2022
0 answers
214 views
For the Angular Data Grid, I use the autoFitColumn property as below to expand all the columns to take the maximum width of the column. I have large column names and default is set to not wrap hence column widths are as per the column names and not the content. This is desired behavior on initial rendering. However upon user resizing of columns, I would like column names to wrap, I am not able to figure this one out. 
If I set the css property as below to normal then on initial rendering, it will wrap column name and I do not want that

Also how to add a tooltip to the column name. This helps with resizing which cuts the header with ellipsis


  public ngAfterViewInit() {
  
    if (this.grid && this.grid.columns) {
      this.grid.columns.forEach((item, index) => {
        if (!this.isColumnWidthSet(item.field))
          this.grid.autoFitColumn(item);
      });
    }

  }
  
  css property to use 
  
.k-column-title
{
    white-space:normal;
}
Kunal
Top achievements
Rank 1
 asked on 11 Nov 2022
0 answers
982 views

Hi together,

On my local environment my license activation works well - I use the license key file there. But during deployment, I have a problem with the license activation - I need it because I call ng build there. I use an environment variable there.

This is how I do the license activation during deployment with Azure DevOps and YAML script:

  1. I've added a variable inside my DevOps library named KENDO_UI_LICENSE. The value of the variable is the content of my local license key file. The variable is a secret variable, but I have the same problem, if it is a normal text variable
  2. In my YAML file I do the following steps:

- task: Npm@1
        displayName: Install Packages for Angular Client
        inputs:
          command: ci
          workingDir: '<my working dir>'

 - script: 'npx kendo-ui-license activate'
        displayName: Activate Kendo UI License
        workingDirectory: '<my working dir>'
        env:
          KENDO_UI_LICENSE: $(KENDO_UI_LICENSE)

 - task: Npm@1
        displayName: Build Angular Client
        inputs:
          command: custom
          workingDir: '<my working dir>'
          customCommand: 'run build'

Everything works well except the "Activate Kendo UI License" script, there I get the error "License key signature is not valid". I think there is a problem with the environment variable.

Here is the output of the DevOps Pipeline console:

For 'npm ci':

> @progress/kendo-licensing@1.2.2 postinstall D:\agent\_work\1\s\DSO.Isys.Web.Client\IsysApp\node_modules\@progress\kendo-licensing

> node ./bin/kendo-ui-license.js activate --ignore-no-license

(INFO) Kendo UI: KENDO_UI_LICENSE environment variable not set

For 'npx kendo-ui-license activate':

Skriptinhalte:
npx kendo-ui-license activate
========================== Starting Command Output ===========================
"C:\Windows\system32\cmd.exe" /D /E:ON /V:OFF /S /C "CALL "D:\agent\_work\_temp\ed2dfcbf-634f-43e2-8232-208b8ca7e658.cmd""
(INFO) Kendo UI: Reading license from KENDO_UI_LICENSE environment variable...
(ERROR) Kendo UI: License key signature is not valid. Please, download a new copy of the license and try again.
##[error]"Cmd.exe" wurde mit dem Code "2" beendet.

 

 

What am I doing wrong here?

Thanks for your help,

Katharina

Katharina
Top achievements
Rank 1
Iron
 asked on 09 Nov 2022
1 answer
219 views

I am using a donut chart and have data with wide varying data values. This means that some of the individual segments can be very small. I would like to display the value next to each label e.g. Active [890], Backlog [2156], Rejected [2].

I need this for both labels around the chart or in the Legend on charts where I only display the legend.

Attached chart shows an example of my chart. The yellow highlights are where I'd like the data value to appear.

Thanks

Hetali
Telerik team
 answered on 08 Nov 2022
0 answers
152 views

I have a button "Show" on my website and when I click on it, an alert appears, and there is an "OK" button on that alert. I have to click on it to close the alert and finish my test case, I need to make a period before I click the OK button, please help.

Sorry for my English.

Thank you.

Khánh
Top achievements
Rank 1
 updated question on 04 Nov 2022
1 answer
107 views

I have been trying to create something in the style below. But the event never seems to fire when I select a date. Help  ? 

 

 

  //  validators: [this.sessionStartEndLogic()],
               

//  updateOn: 'change'

 

 

Martin Bechev
Telerik team
 answered on 03 Nov 2022
2 answers
145 views

Hi

I am using angular 13.

My page contains a button "New Application"

I press a button to open the window "Search for applicant"

the window is open , it contains another buttton with label "continue"

I press the "coninue" button to open the action sheet. the action sheet is open at the back and attached to the parent page not to the window.

here is the HTML


<kendo-window
  title="Search For Applicant"
  *ngIf="opened"
  (close)="close()"
  [minWidth]="800"
  [width]="1200"
  [height]="650"
>
  <dhaman-entities></dhaman-entities>
  <kendo-dialog-actions>
    <button  id="openActionSheetBttn" kendoButton (click)="Start()" themeColor="primary">
      Continue..
    </button>
  </kendo-dialog-actions>
</kendo-window>
<kendo-actionsheet
*ngIf="openActionSheet"
(itemClick)="acOnItemClick()"
(overlayClick)="acOnOverlayClick()"
[title]="title"
[items]="items"
>
</kendo-actionsheet>


public openActionSheet = false;
  public title = 'Select item';
  public items: ActionSheetItem[] = [
    {
      title: 'Edit Item',
      iconClass: 'k-icon k-i-edit',
    },
    {
      title: 'Add to Favorites',
      iconClass: 'k-icon k-i-heart',
    },
  ];


.k-actionsheet-container {
  width: 100%;
  height: 100%;
  z-index: 1;
}
.k-actionsheet-container > .k-overlay {
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

Tarek
Top achievements
Rank 2
Iron
 answered on 03 Nov 2022
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?