Telerik Forums
Kendo UI for Angular Forum
0 answers
243 views

In our application we are using angular 14 and the kendo control  tree-list , our requirement is to hide the parent node(Root container, unsedContainer) as you can see in the attached image. We want to display the child node only. Is there is any way out or property by which we can hide the root node.

 image

The code sample and data is below

<kendo-treelist
  class="kendo-treelist"
  [kendoTreeListFlatBinding]="data"
  #directive="kendoTreeListFlatBinding"
  parentIdField="wrkdocParentoid"
  idField="wrkdocOid"
  kendoTreeListExpandable
  kendoTreeListSelectable
  [height]="1200"
  [rowReorderable]="true"
  (cellClick)="onCellClick($event)"
>
  <kendo-treelist-rowreorder-column
    [width]="25"
  >
  </kendo-treelist-rowreorder-column>
  <kendo-treelist-column 
    [expandable]="true" 
    title="Name" 
    [width]="250"
  >
    <ng-template 
      kendoTreeListCellTemplate let-dataItem let-rowIndex="rowIndex"
    >
      <span class="k-icon k-i-folder" *ngIf="isFolder(dataItem)"></span>
      <span> {{ getTemplateName(dataItem) }}</span>
    </ng-template>
  </kendo-treelist-column>
  <kendo-treelist-column
    field="wrkdocUdid"
    title="ID"
    [width]="140"
  ></kendo-treelist-column>
</kendo-treelist>

 

DATA set:

mockData: any[] = [
  {
    wrkdocOid: 3,
    wrkdocType: 'RootTemplateContainer',
    wrkdocUdid: 'BuiltIn.RootContainer',
    wrkdocDescription:
      'an invisible built-in folder which contains all items that appear on the root level',
    wrkdocUpdatedate: null,
    wrkdocUpdatename: null,
    wrkdocWrkxlsoid: null,
    wrkdocParentoid: null,
    wrkdocPosition: null,
    wrkdocXmlfile: null,
    fmwrkdoclans: [],
    inverseWrkdocParento: [],
    wrkdocParento: null,
  },
  {
    wrkdocOid: 4,
    wrkdocType: 'UnusedTemplateContainer',
    wrkdocUdid: 'BuiltIn.UnusedContainer',
    wrkdocDescription:
      'an invisible built-in folder which contains all items that appear in the not-used list',
    wrkdocUpdatedate: null,
    wrkdocUpdatename: null,
    wrkdocWrkxlsoid: null,
    wrkdocParentoid: null,
    wrkdocPosition: 1,
    wrkdocXmlfile: null,
    fmwrkdoclans: [],
    inverseWrkdocParento: [],
    wrkdocParento: null,
  },
  {
    wrkdocOid: 5,
    wrkdocType: 'Folder',
    wrkdocUdid: 'BwTemplates',
    wrkdocDescription: null,
    wrkdocUpdatedate: '2010-03-03T09:42:15',
    wrkdocUpdatename: null,
    wrkdocWrkxlsoid: null,
    wrkdocParentoid: 3,
    wrkdocPosition: 0,
    wrkdocXmlfile: null,
    fmwrkdoclans: [],
    inverseWrkdocParento: [],
    wrkdocParento: null,
  },
  {
    wrkdocOid: 52,
    wrkdocType: 'Folder',
    wrkdocUdid: 'BwIT100',
    wrkdocDescription: null,
    wrkdocUpdatedate: '2010-03-17T13:55:12',
    wrkdocUpdatename: 'Basware system',
    wrkdocWrkxlsoid: null,
    wrkdocParentoid: 5,
    wrkdocPosition: 0,
    wrkdocXmlfile: null,
    fmwrkdoclans: [
      {
        wrkdoclanWrkdocoid: 52,
        wrkdoclanText: 'BW Input Templates',
        wrkdoclanLanudid: 'EN',
        wrkdoclanWrkdoco: null,
      },
      {
        wrkdoclanWrkdocoid: 52,
        wrkdoclanText: 'BW Syöttöpohjat',
        wrkdoclanLanudid: 'FI',
        wrkdoclanWrkdoco: null,
      },
    ],
    inverseWrkdocParento: [],
    wrkdocParento: null,
  },
 
  {

  {
    wrkdocOid: 10200,
    wrkdocType: 'Template',
    wrkdocUdid: 'E_104',
    wrkdocDescription: null,
    wrkdocUpdatedate: '2023-01-13T12:56:10',
    wrkdocUpdatename: 'Latvanen Henri',
    wrkdocWrkxlsoid: 10124,
    wrkdocParentoid: 4,
    wrkdocPosition: 0,
    wrkdocXmlfile: 20241,
    fmwrkdoclans: [
      {
        wrkdoclanWrkdocoid: 10200,
        wrkdoclanText: 'laskelma',
        wrkdoclanLanudid: 'EN',
        wrkdoclanWrkdoco: null,
      },
      {
        wrkdoclanWrkdocoid: 10200,
        wrkdoclanText: 'laskelma',
        wrkdoclanLanudid: 'FI',
        wrkdoclanWrkdoco: null,
      },
    ],
    inverseWrkdocParento: [],
    wrkdocParento: null,
  },
];
Johina
Top achievements
Rank 1
 updated question on 19 Oct 2023
1 answer
465 views

I have a scenario, where I have to filter the grid based on a Boolean column.

for ex: "isMember" is a boolean field with  "yes" or "No" values

The user can filter records with :

"yes":- to see only member records,[checked= true]

"No":-  to see non-member records[checked = fslse]

and "both yes and No":- to see all records[checked=null]

 The Prime-ng has a p-triStateCheckbox component to implement this scenario.

Do we have something similar in kendo to implement this scenario?

Hetali
Telerik team
 answered on 18 Oct 2023
1 answer
390 views

Hello,

How can we use dropdown buttons to show export to excel and export to pdf options in grid's header? I'm not able to visualize how to use kendoGridExcelCommand and kendoGridPdfCommand in dropdown button.

 

Hetali
Telerik team
 updated answer on 17 Oct 2023
0 answers
83 views

Hello, 

I have a multi-week view scheduler, in which i use the kendo kendoSchedulerGroupHeaderTemplate directive to style my groups according to some resources. 

I want to impose a max-width on this, in order to make sure that the names of the groups are within proportion. (See example: Too-long.png)

 

I have my html code: 

<ng-template kendoSchedulerGroupHeaderTemplate let-resource="resource">
  <div class="group-header-wrapper">
    <div class="group-header-main">{{ resource.text }}</div>
    <div class="group-header-alt">{{ resource.line }}</div>
  </div>      
</ng-template>

and my css: 


.group-header-wrapper {
  //code
}

.group-header-main {
  width: 100%;
  text-align: left;
  background-color: $secondary-color;
  padding: 2px 4px;
}

.group-header-alt {
  width: 100%;
  text-align: left;
  color: white;
  padding: 2px 4px;
}

adding max-width to group-header-wrapper. doesn't fix this. Because the event become unaligned. (see example: unaligned.png)

How can I style this so the events are aligned with their respective slots and days?

Thanks,

Govert Jaap

 

Govert Jaap
Top achievements
Rank 1
 asked on 17 Oct 2023
10 answers
4.4K+ views

HI,

I am using the Kendo grid tooltip with angular 4 as is this example

https://stackblitz.com/edit/angular-3yujdm-eqvgqg?file=app/app.component.ts

 

When I have a long tooltip in my title is it possible to add a line break without using ng-template?

 

Thanks 

Marcus
Top achievements
Rank 1
Iron
 answered on 17 Oct 2023
1 answer
191 views

hi!

I have in plan to implement material v3 styles in my angular application. I saw on your forum that you have this task in your roadmap. Is it possible to know about the release date?

 

Thanks

Vessy
Telerik team
 answered on 16 Oct 2023
0 answers
74 views

Hello Kendo community,

I hope you're all doing well. I've been working with the Kendo Angular Scheduler, and I've run into an issue related to the "resources" field not updating correctly in the scheduler slots.

The problem I'm encountering is that even though I'm filtering and changing the "resources" dynamically, the corresponding slots in the scheduler are not updating as expected. This means that the slots are not reflecting the current state of the resources, and there seems to be a synchronization problem.

Here's a simplified representation of the issue:

- I have resources that can be filtered and changed dynamically.
- When I apply filters or make changes to the resources, the scheduler slots should update to display the filtered or changed resources, but this is not happening as expected.

Bellow screenshots with repro

1. That it's my initial state, I have one user in resources, and as you can see in the console propper user was selected

2. When I changed filtering for resources, list of resources was updated and then now I have more users. But if I select different user, slots assigned to them still hold value for previous state

I've reviewed the documentation and tried different approaches, but I haven't been able to resolve this issue. Has anyone else encountered a similar problem, and if so, could you please share your insights or solutions? Any assistance would be greatly appreciated.

If you need more specific details or code samples, please let me know, and I'll be happy to provide them.

Thank you in advance for your help and support!

Best regards,

Damian

Damian
Top achievements
Rank 1
Iron
 updated question on 13 Oct 2023
0 answers
605 views

I want to display the number in the following format

1000000 => 1 000 000

<kendo-numerictextbox id="quota"
[min]="-1000000"
[max]="1000000"
[decimals]="0"
[format]="'n0'"
[autoCorrect]="true"
/>

What needs to be done for this?

Dmitry
Top achievements
Rank 1
 asked on 13 Oct 2023
1 answer
2.0K+ views

I updated Angular Kendo packages to version 14.

After this, the icons are not shown, although the svg icons are displayed. What could be the problem? Before this everything worked. Maybe something with the font?

Styles .k-i-... are missing in the "Elements" tab of the browser.

<button (click)="refresh()">
  <kendo-icon name="refresh"/>
</button>

package.json
"dependencies": {
    "@angular/animations": "^16.2.8",
    "@angular/common": "^16.2.8",
    "@angular/compiler": "^16.2.8",
    "@angular/core": "^16.2.8",
    "@angular/forms": "^16.2.8",
    "@angular/platform-browser": "^16.2.8",
    "@angular/platform-browser-dynamic": "^16.2.8",
    "@angular/router": "^16.2.8",
    "@apollo/client": "^3.8.5",
    "@auth0/angular-jwt": "^5.1.2",
    "@ngrx/effects": "^16.3.0",
    "@ngrx/eslint-plugin": "^16.3.0",
    "@ngrx/store": "^16.3.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@progress/kendo-angular-buttons": "^14.0.0",
    "@progress/kendo-angular-dateinputs": "^14.0.0",
    "@progress/kendo-angular-dialog": "^14.0.0",
    "@progress/kendo-angular-dropdowns": "^14.0.0",
    "@progress/kendo-angular-grid": "^14.0.0",
    "@progress/kendo-angular-icons": "^14.0.0",
    "@progress/kendo-angular-indicators": "^14.0.0",
    "@progress/kendo-angular-inputs": "^14.0.0",
    "@progress/kendo-angular-layout": "^14.0.0",
    "@progress/kendo-angular-menu": "^14.0.0",
    "@progress/kendo-angular-navigation": "^14.0.0",
    "@progress/kendo-angular-notification": "^14.0.0",
    "@progress/kendo-angular-treeview": "^14.0.0",
    "@progress/kendo-data-query": "^1.7.0",
    "@progress/kendo-theme-fluent": "^7.0.1",


angular.json
"styles": [
  {
    "input": "node_modules/@progress/kendo-theme-fluent/dist/all.css"
  },
  "src/styles.less",
  "src/kendo.less",
  "src/assets/fonts/OpenSans/open-sans.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Hetali
Telerik team
 answered on 12 Oct 2023
1 answer
97 views
I want to create a custom view with a predefined start and end date in the Gantt view, how can I do it?
Svet
Telerik team
 answered on 12 Oct 2023
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?