After running this it selects "Mike" but It does not expand. Am I missing anything!!

<kendo-treeview
  [nodes]="data"
  textField="text"
  kendoTreeViewHierarchyBinding
  childrenField="items"
  [filterable]="true"
  kendoTreeViewExpandable
  [expandedKeys]="expandedKeys"
  kendoTreeViewCheckable
  [(checkedKeys)]="checkedKeys"
>
</kendo-treeview>

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'kendo-appx';

  public fetchChildren(node: any): Observable<any[]> {
    //Return the items collection of the parent node as children.
    return of(node.items);
  }

  public hasChildren(node: any): boolean {
    //Check if the parent node has children.
    return node.items && node.items.length > 0;
  }

  public expandedKeys: any[] = ['2', '0', '1', '3'];

  public checkedKeys: any[] = ['2_0_0_1'];

  public data: any[] = [
    {
      text: 'Furniture',
      items: [{ text: 'Tables' }, { text: 'Sofas', items: [{ text: 'Red' }] }],
    },
    {
      text: 'Decor',
      items: [{ text: 'Curtains' }, { text: 'Carpets' }],
    },
    {
      text: 'RH',
      items: [
        {
          text: 'Magdelena',
          items: [
            {
              text: 'Joel',
              items: [
                {
                  text: 'Ashish',
                },
                {
                  text: 'Mike',
                },
              ],
            },
          ],
        },
      ],
    },
  ];
}

Hi Team,

I am working on the kendo-grid and implement export to excel but issue is that after excel data is visible but button not render on the excel can  you please tell me why button not visible on excel,check below attached stackblitz for reference.i am stuck above issue in last 3 days.please  help me regarding this issue?

https://stackblitz.com/edit/angular-ko29cm?file=src%2Fapp%2Fapp.component.ts

So I have a grid where only certain rows are selectable via checkbox selection, so only certain rows have checkboxes. With the default styling, when I click on the Select All checkbox, ALL the rows, both those with checkboxes and those without get the highlighted style applied.  Is there any way to only apply the highlight to the checkbox rows?

I have two templates but I need optimize it to one template, the only different of that templates is that one kendo datepicker has more viewing atributes. Is there any way to get one template and for example for one button the kendo datepiker has some atributes and for another clicking button the datepiker has different atributes and everything is on one template? With two templates everything is working fine.

<ul class="list-group">
    <li class="list-group-item flex-fill border-0">  
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportDaily(itemListRef, 'pdf')">PDF</button>
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportDaily(itemListRef, 'csv')">CSV</button>          
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportDaily(itemListRef, 'xlsx')">XLSX</button>
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportDaily(itemListRef, 'txt')">TXT</button>   
    </li>
</ul>

<ul class="list-group">
    <li class="list-group-item flex-fill border-0">
       
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportMonthly(itemListRef1, 'pdf')">PDF</button>
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportMonthly(itemListRef1, 'csv')">CSV</button>
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportMonthly(itemListRef1, 'xlsx')">XLSX</button>
        <button type="button" class="btn btn-link btn-sm" (click)="generateReportMonthly(itemListRef1, 'txt')">TXT</button>
    </li>
</ul>

<ng-template #itemListRef kendoCalendarMonthCellTemplate let-context="cellContext">
    <form>
        
        <div>
            <kendo-datepicker
            [(ngModel)]="reportStartEnd"
            [ngModelOptions]="{standalone: true}">
            </kendo-datepicker>
        </div>
     
        <div>
            <kendo-datepicker
            [(ngModel)]="reportEndDate"
            [ngModelOptions]="{standalone: true}"> 
            </kendo-datepicker> 
        </div>
    </form>
</ng-template>

<ng-template #itemListRef1 kendoCalendarMonthCellTemplate let-context="cellContext">
    <form>
        
        <div>
            <kendo-datepicker
            [(ngModel)]="reportStartDate"
            [ngModelOptions]="{standalone: true}"
            bottomView="year"
            topView="decade"
            format="MMMM yyyy"
            >
            </kendo-datepicker>
        </div>
       
        <div>
            <kendo-datepicker
            [(ngModel)]="reportEndDate"
            [ngModelOptions]="{standalone: true}"
            bottomView="year"
            topView="decade"
            format="MMMM yyyy">
            </kendo-datepicker>
        </div>
    </form>
</ng-template>

Hi Team , 

In our use case we wanted a tabular view inside spanned columns cell value.

Example Structure Inside Spanned columns:

<kendo-grid-span-column [style]="{ 'padding': '0px'}">
  <!-- CAPA NAME -->
        <kendo-grid-column field="cName" title="CName" [width]="180">
        </kendo-grid-column>

        <kendo-grid-column field="cDescription" title="CDescription" [width]="180">
        </kendo-grid-column>

        <kendo-grid-column field="cCategory" title="CCategory" [width]="180">
        </kendo-grid-column>

        <kendo-grid-column field="pName" title="pName" [width]="180">
        </kendo-grid-column>

        <kendo-grid-column field="pValue" title="pValue" [width]="180">
        </kendo-grid-column>

  <ng-template kendoGridCellTemplate let-dataItem>

          <tr style="height:200px"class="border-tr" *ngFor="let item of dataItem.capability">
            <td class="border-td column-style-class" width=19.9%>
              <p>{{ item?.cName }}</p>
            </td>
            <td class="border-td column-style-class" width=20.2%>
              <p>{{ item?.cDescription }}</p>
            </td>
            <td class="border-td column-style-class" width=20%>{{ item?.cCategory }}
              <span><button (click)="removeCapability(item)" kendoGridRemoveCommand>Remove</button></span>
            </td>
            <td style="padding:0px" >
              <div style="height:300px !important;overflow-y:scroll;">
          <tr *ngFor="let itemParam of item.parameters" >
            <td width=50.1% class="border-td column-style-class">{{itemParam.pName}}</td>
            <td [width]="460" class="border-td column-style-class">
              <kendo-textbox *ngIf="itemParam.pName == 'Name' || itemParam.pName == 'InterfaceIndex' "
                [style.width]="460" (change)="updateCapabilityParameters($event,itemParam,item)"
                placeholder="Type your message here" [clearButton]="true" [value]=itemParam.pValue>
              </kendo-textbox>
              <kendo-dropdownlist [style.width]="460"
                *ngIf="itemParam.pName == 'Ingress' || itemParam.pName == 'Egress'"
                [data]="listItemsIngressEgress" [value]=itemParam.pValue> </kendo-dropdownlist>
              <button kendoButton [style.width]="460" *ngIf="!openedDialog && itemParam.pName == 'Alias'"
                (click)="open(itemParam.pName )">Details</button>
            </td>
          </tr>
          </div>
          </td>
          </tr>

        </ng-template>

      </kendo-grid-span-column>

But with this customization we are not able to achieve proper stylings and filters provided by kendo-grid.

Hi team,

I am working on a simple UI where kendo combo-box is a column of a kendo tree-list. The problem is, the opening and closing of kendo combo-box also expands and collapses the kendo tree-list's row.

I think the event of kendo-combo-box is bubbled to treelist. Is this a bug or am I missing something? Here's my Stackblitz example for reproducing the issue (Link: https://stackblitz.com/edit/angular-18guak?file=src/app/app.component.ts)

Thanks,

Deepak

The data is charged correctly, and the selected values are added correctly into the list. 

It binds correctly when the values are already selected, but when you try to add more doesnt work. Like this:

The code is down below.

I have used the kendo tree view component with multi select check boxes.

and when I check them it will return the position of the node tree item. like below image.

My problem is how can I get the text of the selected items instead of this checked keys. 

Here is my code 

  <div class="example-config">Checked keys: {{ checkedKeys.join(",") }}</div>
    <kendo-treeview
         textField="moduleName"
         [nodes]="nodes"
         [children]="children"
         [hasChildren]="hasChildren"
         kendoTreeViewExpandable
         kendoTreeViewCheckable
         class="k-treeview"
         [(checkedKeys)]="checkedKeys"
         (checkedChange)="checked(checkedKeys)"
     >
    
     <ng-template kendoTreeViewNodeTemplate let-dataItem>
            {{dataItem.moduleName || dataItem.featureName}}
        </ng-template>
     </kendo-treeview>

 public checkedKeys: any[] = [];
  public nodes: any[] = [
    {
      moduleId: 1,
      moduleName: 'Home',
      features: [
        {
          featureId: 2,
          featureName: 'Orgonization',
          subFeatures: [
            {
              featureId: 4,
              featureName: 'Group Activity Solution',
              subFeatures: [
                {
                  featureId: 10,
                  featureName: 'Test',
                  subFeatures: [{
                    featureId: 8,
                    featureName: '8888888888',
                    subFeatures: []
                  }]
                },
                {
                  featureId: 11,
                  featureName: 'New',
                  subFeatures: []
                },
              ]
            },
            {
              featureId: 4,
              featureName: 'Office of the CIO',
              subFeatures: []
            },
          ]
        },
        {
          featureId: 3,
          featureName: 'Planing',
          subFeatures: [
            {
              featureId: 4,
              featureName: 'Group Activity Solution',
              subFeatures: []
            },
            {
              featureId: 4,
              featureName: 'Office of the CIO',
              subFeatures: []
            },
          ]
        },
      ],
    },
  ];

  /**
   * A function that returns an observable instance which contains the
   * [child nodes](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-children)
   * for a given parent node.
   */
  public children = (dataitem: any): Observable<any[]> =>
    of(dataitem.features || dataitem.subFeatures);

  /**
   * A function that determines whether a given node
   * [has children](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-haschildren).
   */
  public hasChildren = (dataitem: any): boolean =>
    !!dataitem.features || !!dataitem.subFeatures;

I have used the kendo tree view component with multi select check boxes.

and when I check them it will return the position of the node tree item. like below image.

My problem is how can I get the text of the selected items instead of this checked keys. 

Here is my code 

  <div class="example-config">Checked keys: {{ checkedKeys.join(",") }}</div>
    <kendo-treeview
         textField="moduleName"
         [nodes]="nodes"
         [children]="children"
         [hasChildren]="hasChildren"
         kendoTreeViewExpandable
         kendoTreeViewCheckable
         class="k-treeview"
         [(checkedKeys)]="checkedKeys"
         (checkedChange)="checked(checkedKeys)"
     >
    
     <ng-template kendoTreeViewNodeTemplate let-dataItem>
            {{dataItem.moduleName || dataItem.featureName}}
        </ng-template>
     </kendo-treeview>

 public checkedKeys: any[] = [];
  public nodes: any[] = [
    {
      moduleId: 1,
      moduleName: 'Home',
      features: [
        {
          featureId: 2,
          featureName: 'Orgonization',
          subFeatures: [
            {
              featureId: 4,
              featureName: 'Group Activity Solution',
              subFeatures: [
                {
                  featureId: 10,
                  featureName: 'Test',
                  subFeatures: [{
                    featureId: 8,
                    featureName: '8888888888',
                    subFeatures: []
                  }]
                },
                {
                  featureId: 11,
                  featureName: 'New',
                  subFeatures: []
                },
              ]
            },
            {
              featureId: 4,
              featureName: 'Office of the CIO',
              subFeatures: []
            },
          ]
        },
        {
          featureId: 3,
          featureName: 'Planing',
          subFeatures: [
            {
              featureId: 4,
              featureName: 'Group Activity Solution',
              subFeatures: []
            },
            {
              featureId: 4,
              featureName: 'Office of the CIO',
              subFeatures: []
            },
          ]
        },
      ],
    },
  ];

  /**
   * A function that returns an observable instance which contains the
   * [child nodes](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-children)
   * for a given parent node.
   */
  public children = (dataitem: any): Observable<any[]> =>
    of(dataitem.features || dataitem.subFeatures);

  /**
   * A function that determines whether a given node
   * [has children](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-haschildren).
   */
  public hasChildren = (dataitem: any): boolean =>
    !!dataitem.features || !!dataitem.subFeatures;