Questions on Kendo UI for Angular Forum

1 answer

23 views

Export to Excel from angular TreeList in a grid style instead of hierarchical style

Hey guys,

I have an angular form that contains two tree lists: the first one is hierarchal and the 2nd is flat. Both are populated using [kendoTreeListFlagBinding] and both render correctly. The first tree list is hierarchal and the second is flat. Yay Kendo!!

The issue is when I go to export from the flat treelist, it exports hierarchal and not flat.

First Treelist

 <kendo-treelist
            *ngIf="!this.isFlatList"
            [kendoTreeListFlatBinding]="ssAllowances"
            filterable="menu"
            [filter]="filter"
            (filterChange)="this.setFilter($event)"
            [sortable]="{ mode: 'multiple' }"
            [sort]="sort"
            kendoTreeListExpandable
            idField = 'currentGUID'  
            parentIdField='parentGUID'
            >
            <ng-template kendoTreeListToolbarTemplate>
              <button look="flat" type="button" class="btn"
                      title="Export to Excel" kendoTreeListExcelCommand>
                <i class="fa fa-lg fa-file-excel-o"></i>
              </button>
            </ng-template>

code for the column defs etc

second Treelist

 <kendo-treelist-column
              *ngIf="this.canDeleteAllowance()"
              width="25">
              <ng-template kendoTreeListCellTemplate let-dataItem #deleteButtonTemplate>
                <a *ngIf="dataItem.canDelete && dataItem.allowanceId !== 0" 
                (click)="deleteAllowance(dataItem)" 
                title="CLick to Delete">
                <i class="fa fa-trash"></i></a>
              </ng-template>
            </kendo-treelist-column>
            <kendo-treelist-excel fileName="ShipsetAllowances.xlsx"></kendo-treelist-excel>
          </kendo-treelist>

code for the column defs etc

What I need is the "directive" to tell excel to export the data as a flat list.

What am I missing from the doc

Thanx Kyle

Excel Export

Spreadsheet

TreeList

answered on 05 Mar 2024

1 answer

32 views

Date format exported to Excel

Hi

I'd like to fix an issue we have about the columns using dates, we have a dashboard and when user export the dash to Excel.

seems like there's no problem or something, however when we proceed to open the Excel file.

if we take a look to those columns displaying dates, then we select any of these cells, right click, "format cell"

Catogory is displayed as "General", instead of date and any of the possible types-formats

so when user is trying to apply filter in excel, values for date columns are not recognized as dates.

I have been trying to modify the date format like these

//attempt3

//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("dd MMM yyyy HH:mm:ss zzz").format(requestHeaderView.pcagatecurrentdate) : null
//attempt4
//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yy HH:mm:ss zzz").format(requestHeaderView.pcagatecurrentdate) : null
//attempt5
//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yy 07:00:00").format(requestHeaderView.pcagatecurrentdate) : null
//attempt6
//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yy 19:00:00").format(requestHeaderView.pcagatecurrentdate) : null
//attempt7
//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yy'T'HH:mm:ss.SSSZ").format(requestHeaderView.pcagatecurrentdate) : null
//attempt8
//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSZ").format(requestHeaderView.pcagatecurrentdate) : null
//attempt9
//pcagatecurrentdate requestHeaderView.pcagatecurrentdate ? new SimpleDateFormat("MM-dd-yyyy'T'HH:mm:ss.SSSZ").format(requestHeaderView.pcagatecurrentdate) : null

this is how it looks like in the front end,

<kendo-grid-column
    field="pcagatecurrentdate"
    [columnMenu]="true"
    title="{{ getTitle('pcagatecurrentdate') }}"
    tooltip=""
    [locked]="false"
    width="110"
>
    <ng-template
        kendoGridFilterMenuTemplate
        let-filter
        let-column="column"
        let-filterService="filterService"
    >
        <app-date-range-filter
            [field]="column.field"
            [filter]="filter"
            [filterService]="filterService"
        >
        </app-date-range-filter>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem>
                    <span
                        [ngClass]="{
                            okProjectStatus:
                                dataItem.projectConceptApprovedStatus ==
                                'ok',
                            warningProjectStatus:
                                dataItem.projectConceptApprovedStatus ==
                                'warning',
                            dangerProjectStatus:
                                dataItem.projectConceptApprovedStatus ==
                                'danger'
                        }"
                    >
                        {{
                        dataItem.pcagatecurrentdate != null
                            ? (dataItem.pcagatecurrentdate
                                | date : 'dd-MMM-yyyy')
                            : ''
                        }}
                    </span>
    </ng-template>
</kendo-grid-column>

but at the end all the dates still displayed as "General"

and this is the target I would like to reach

I appreciate any suggestions you may have

Thanks

Victor M.

Excel Export

Grid

answered on 15 Jan 2024

1 answer

130 views

How to use dropdown button for export to excel and pdf from grid?

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.

updated answer on 17 Oct 2023

1 answer

277 views

How to get filtered Data into Excel with Java poi?

I have a kendo grid that contains data that comes from a DB call.
Currently the export excel button extracts all the data equal to the datasource.
It is mapped into java.
I would like that when compiling the filters of the kendo grid when I click on the button it extracts only the filtered data

 <kendo-grid
                            [data]="gridData"
                            [pageSize]="state.take"
                            [skip]="state.skip"
                            [sort]="state.sort"
                            [filter]="state.filter"
                            [sortable]="true"
                            [pageable]="true"
                            [filterable]="true"
                            [selectable]="true"
                            [style.minHeight.px]="minMaxHeight"
                            [style.maxHeight.px]="minMaxHeight"
                            (dataStateChange)="dataStateChange($event)">
                            <kendo-grid-column field="name" title="{{'name' | translate}}"></kendo-grid-column>
                            <kendo-grid-column field="month" title="{{'month' | translate}}"></kendo-grid-column>
</kendo-grid>

Excel Export

Filter

Grid

answered on 09 May 2023

0 answers

65 views

Kendo Angular: Export multiple Tree Lists to one Excel sheet

Hi,

I am trying to export multiple treelists which has same columns and treelists are generated by *ngFor (from an external button request) into one Excel sheet. I cannot get it quite right, and cannot find any example that can help me.

Any examples or assistance would be greatly appreciated.

Thank you,

Mahidhar.

Excel Export

TreeList

updated question on 28 Apr 2023

0 answers

56 views

Export All or Export current page records to excel

Hello

I want to add a dropdown button with both options i.e. a) Export Current page, b) Export All pages

Is this possible , as I could see only the two excel buttons Export to Excel and Export to PDF to appear

Regards

Hay

Excel Export

Grid

asked on 28 Mar 2023

0 answers

68 views

How can I copy Excel data to clipboard instead of saving to file?

We're trying to export the data from the Chart component into excel format as a copy/pastable (the data, not the chart). The Chart supports exporting the chart itself as an image, but what I'm trying to get after is to use the ExcelExportComponent to take the data I am feeding to the chart, format as an excel document, and then copy it to the clipboard so the user can paste it into excel themselves, similar to what can be achieved with the Grid component. I understand the ExcelExportComponent is set up for saving data as an excel file, but can I access it somehow to get that data copied?

Excel Export

asked on 26 Jan 2023

0 answers

45 views

kendo treelist excel arraylist, fild does not receive array?

I have the following situation, a component with treelist where the column receives an array by ngTemplate referencing the field.

 <kendo-treelist-column
    *ngIf="!isHidden('progress')"
    field="progress"
    title="Progress"
    [width]="320">
    <ng-template kendoTreeListCellTemplate let-dataItem let-group="cellContext">
      <app-okrprogress-bar
        [showButtonOk]="true"
        [value]="dataItem.progress.slice(-1)[0].value"
        [valuePercentagel]="dataItem.progress.slice(-1)[0].value"
        [showSlider]="!dataItem.contents ? true : false"
        [showValue]="dataItem.typeProgress == 'Values' ? true : false"
        [showChecbox]="dataItem.typeProgress == 'Boolean' ? true : false"
        [stepSlider]="dataItem.typeProgress"
        [viewValue]="dataItem?.values"
        (newPercentageActive)="
          changePercentage($event, group.viewItem.parent.data, dataItem)
        "></app-okrprogress-bar>
    </ng-template>
  </kendo-treelist-column>

Now I have to export this column in excel, but the field only waits for a simple variable or objects.

  <kendo-treelist-excel>
    <kendo-excelexport-column fild="keyName" title="Objective"></kendo-excelexport-column>
    <kendo-excelexport-column fild="progress.slice(-1)[0].value" title="Progress"></kendo-excelexport-column>
    <kendo-excelexport-column fild="status.status" title="Status"></kendo-excelexport-column>
  </kendo-treelist-excel>

I did some tests of different calling modes but none of the results were effective.

This is the interface:

interface ObjectiveResult {
  keyName: string;
  progress: Progress[];
  status?: Status;
}

interface Progress {
  value: number;
  date: Date;
}

interface Status {
  name: string;
  color: string;
}

Current results:

Excel Export

Grid

TreeList

asked on 12 Jan 2023

0 answers

40 views

Grid Can't Edit But Export Excel Enough Data

Hi,
I'm using kendo but have an issue as follows:

Case 1: The old source can be edited, but the excel is missing data
https://stackblitz.com/edit/angular-v6xzlw-cs7bsp?file=src%2Fapp%2Fapp.component.ts

Case 2: New source can't edit but export excel enough data
https://stackblitz.com/edit/angular-v6xzlw-fpo6xw?file=src%2Fapp%2Fapp.component.ts

Expect: Both can be edited and exported

Anyone who has encountered this case, please support me.

Thanks, all.

May be an image of text that says 'x Export Excel Name Name 1 Number AB 001255* AV= 66000000 Case2 Base Revenue 100001 Ratio Name3 100002 196507 90740000005 AB 10000000 Name Base Revenue 100003 0.27390444 Ratio Name 100004 180776.93040000004 BaseRevenue Base 191478.3618 Name6 0.15730977 100005 0.29011873 Name7 15730.977 191478 3618 100006 0.17790082 Name 100007 31639 31799999998 19999999 Name 100008 0.04793823 22.7336 Name 10 100009 31639.231799999998 0.00018596 245.4672 Name 11 100010 122.7336 0.000371 Name 12 4672 100011 135728. 67 Total 100012 0.2056495 135728.67 2593. 6086 0 0.00392971 2593.6086 6086'

May be an image of text that says '区 Exportto Excel Name Name Number AB 001255* Case1 AV= 66000000 Base Revenue 100001 Name Ratio 100002 196507 90740000005 AB 008001 10000000 Base Revenue Name4 100003 Ratio Name 180776 6.93040000004 100004 Base Revenue 191478.3618 3618 Name6 0.15730977 100005 0 0.29011873 117414.54119999999 15730. 977 Name7 100006 191478.3618 0.17790082 Name 100007 17414.54119999999 31799999998 Name 100008 0 0.04793823 22.7336 Name 10 100009 31639.231799999998 0.00018596 245.4672 Name 7336 100010 0.00037192 Name 12 100011 45.4672 135728. 67 Total 100012 0.2056495 135728. 2593. 6086 0.00392971 2593 6086'

asked on 28 Dec 2022

1 answer

52 views

Excel Export lacks data kendo grid column group

Hi,

I am facing a case like this:
Source: https://stackblitz.com/edit/angular-v6xzlw-vrqmxj
I am using kendo grid.
The data displayed on the grid is ok but when exporting excel, the data is missing.
I've been trying to find a way for a few days but still can't solve it.
Please support.

Thanks!