Telerik Forums
Kendo UI for Angular Forum
1 answer
1.6K+ views

I am trying to export the contents of my grid out to excel.  One of the columns is a number but needs to be exported as a percentage (with a percent sign). 

 

My main complaint is that the ng-template formatting is not being picked up by the export so, while the grid shows 56.75% when i export it to excel it shows 56.75.

Then I discovered that I could use the cell options feature and format the number.  However, when I do this with the % it exports as 5675% not 56.75%.  I can not figure out how to divide that number by 100.

 

Here is the grid code.  I have been working on this for hours.  Please help :)

<kendo-grid
                                        #grid
                                        class="mt-1"
                                        [kendoGridBinding]="gridSelection ? (whoDoIOwns$ | async) : (whoOwnsMe$ | async)"
                                        reorderable="true"
                                        [sortable]="{ allowUnsort: true, mode: 'multiple' }"
                                        [sort]="[
                                            { field: 'glNumber', dir: 'desc' },
                                            { field: 'legalName', dir: 'asc' }
                                        ]"
                                        resizable="true"
                                    >
                                        <kendo-grid-column field="id" title="id" [hidden]="true" width="8%"></kendo-grid-column>
                                        <!-- <kendo-grid-column title="Entity ID" field="legalEntityID" width="8%"></kendo-grid-column> -->
                                        <kendo-grid-column
                                            *ngIf="userAllData && !gridSelection"
                                            title="FEIN"
                                            field="fein"
                                            width="10%"
                                        ></kendo-grid-column>
                                        <kendo-grid-column
                                            *ngIf="userAllData && gridSelection"
                                            title="FEIN"
                                            field="ownedFEIN"
                                            width="10%"
                                        ></kendo-grid-column>
                                        <kendo-grid-column
                                            *ngIf="!gridSelection"
                                            title="GL Number"
                                            field="glNumber"
                                            width="12%"
                                        ></kendo-grid-column>
                                        <kendo-grid-column
                                            *ngIf="gridSelection"
                                            title="GL Number"
                                            field="ownedGLNumber"
                                            width="12%"
                                        ></kendo-grid-column>
                                        <kendo-grid-column *ngIf="!gridSelection" title="Name" [field]="'legalName'" width="46%">
                                            <ng-template kendoGridCellTemplate let-dataItem>
                                                <a
                                                    [href]="'#/entities/' + dataItem.legalEntityID"
                                                    target="_blank"
                                                    style="color: blue; text-decoration: underline;"
                                                    >{{ dataItem.legalName }}</a
                                                >
                                            </ng-template>
                                        </kendo-grid-column>
                                        <kendo-grid-column *ngIf="gridSelection" title="Name" [field]="ownedLegalName" width="46%">
                                            <ng-template kendoGridCellTemplate let-dataItem>
                                                <a
                                                    [href]="'#/entities/' + dataItem.ownedLegalEntityID"
                                                    target="_blank"
                                                    style="color: blue; text-decoration: underline;"
                                                    >{{ dataItem.ownedLegalName }}</a
                                                >
                                            </ng-template>
                                        </kendo-grid-column>
                                        <kendo-grid-column title="Legal Role" field="ownershipLegalRole" width="12%"></kendo-grid-column>
                                        <kendo-grid-column title="Acct Type" field="accountingOwnershipType" width="8%"></kendo-grid-column>
                                        <kendo-grid-column title="Pct" field="ownershipPercentage" width="8%">
                                            <ng-template kendoGridCellTemplate let-dataItem>
                                                {{ dataItem.ownershipPercentage }}%
                                            </ng-template>
                                        </kendo-grid-column>
                                        <kendo-grid-excel [fileName]="(gridSelection ? 'i-own-' : 'owns-me-') + 'ownership.xlsx'">
                                            <kendo-excelexport-column
                                                *ngIf="userAllData && !gridSelection"
                                                field="fein"
                                                title="FEIN"
                                            ></kendo-excelexport-column>
                                            <kendo-excelexport-column
                                                *ngIf="userAllData && gridSelection"
                                                field="ownedFEIN"
                                                title="FEIN"
                                            ></kendo-excelexport-column>
                                            <kendo-excelexport-column
                                                *ngIf="!gridSelection"
                                                title="GL Number"
                                                field="glNumber"
                                            ></kendo-excelexport-column>
                                            <kendo-excelexport-column
                                                *ngIf="gridSelection"
                                                title="GL Number"
                                                field="ownedGLNumber"
                                            ></kendo-excelexport-column>
                                            <kendo-excelexport-column
                                                *ngIf="!gridSelection"
                                                title="Name"
                                                field="legalName"
                                            ></kendo-excelexport-column>
                                            <kendo-excelexport-column
                                                *ngIf="gridSelection"
                                                title="Name"
                                                field="ownedLegalName"
                                            ></kendo-excelexport-column>
                                            <kendo-excelexport-column
                                                title="Legal Role"
                                                field="ownershipLegalRole"
                                            ></kendo-excelexport-column>
                                            <kendo-excelexport-column
                                                title="Acct Type"
                                                field="accountingOwnershipType"
                                            ></kendo-excelexport-column>
                                            <kendo-excelexport-column
                                                title="Pct"
                                                field="ownershipPercentage"
                                                [cellOptions]="{ format: '#.##%' }"
                                            >
                                                <ng-template kendoGridExcelTemplate let-dataItem>
                                                    {{ dataItem.ownershipPercentage }}%
                                                </ng-template>
                                            </kendo-excelexport-column>
                                        </kendo-grid-excel>
                                    </kendo-grid>

 

Martin Bechev
Telerik team
 answered on 15 May 2020
1 answer
294 views

Hello,

We are using the MultiSelect control to show a list of options that users frequently need to select more than one of.  To do this, they have to click the control, scroll and select a value from the dropdown, then click the control again, scroll and select the second value, repeat until all options have been selected.

I'm looking for an option to let them select multiple options in the MultiSelect control at the same time without having to reclick and rescroll the options every time.  Is there a way to either keep the dropdown open when a selection has been made or allow a key press of say the CTRL key to allow multiple items to be selected at the same time?

I've attached a screenshot of the example MultiSelect that I am trying to pull this off on, I can include the code as well if that is needed.

Thanks,

Bryan

Martin Bechev
Telerik team
 answered on 15 May 2020
2 answers
136 views

How do I control the animation duration in this case. What's the k-option? 

<div kendo-progress-bar="progressBar" k-options="options" ng-model="progress"                      style="width: 100%;">                                     </div>

 

mudi
Top achievements
Rank 1
Veteran
 answered on 15 May 2020
3 answers
2.8K+ views
Our team has several Kendo UI licenses.  We have been using Kendo UI for jQuery withour .NET web applications but are now looking at Angular. In the "Getting started" section for UI for Angular, I don't see anything that mentions including a license file etc.  So anyone can download and install the components via npm, its support that is the benefit of licensing?
Martin Bechev
Telerik team
 answered on 15 May 2020
4 answers
1.3K+ views

I want to Append month to year (2020) in Kendo Datepicker on left navigation pane. So the final output should be Jan-2020.

 

 

Bharat
Top achievements
Rank 1
Veteran
 answered on 14 May 2020
1 answer
175 views

The editor Toolbar color popup/palette does not allow selecting the same color twice in a row for a different word. This happens when you select from the pop-up color palette.

Use example from website https://www.telerik.com/kendo-angular-ui-develop/components/editor/tools/

Select a word, select a color, select another word, select same color (from the popup palette). Color for 2nd word never changes.

This works correctly in the AngularJS version of the Kendo editor, but not for the Angular version of the Kendo editor.

Petar
Telerik team
 answered on 12 May 2020
1 answer
449 views

Hello,

If you look at this example: https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/#toc-events, you will noticed that when someone click the clear all button (x) the blur event is raised.

It's possible to cancel this blur event?

It's possible to have somehow the same behavior like in the combobox case : https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/#toc-events ?

 

Thanks,
Alex

Svet
Telerik team
 answered on 12 May 2020
1 answer
98 views

Link and meta tags pasted from MS Word are missing the backslash when copy and pasted from MS Word.

Copy a link from MS Word and paste into editor, the link and meta closing tags are missing the backslash. '>'

Paste the same link into the AngularJS version and the link and meta closing tags are correct. '/>'

Petar
Telerik team
 answered on 12 May 2020
1 answer
815 views

Hello,

I am attempting to bind the ComboBox to an array of complex objects. For this, the "keyField" and "valueField" properties are required (valuePrimitive is set to true, in case that is relevant).

This works if I do not try to bind to those properties:

<kendo-combobox valueField="myField" textField="myTextField" ... ></kendo-combobox>

However, if I try to use one-way binding:

<kendo-combobox [valueField]="myFieldBinding" [textField]="myTextBinding" ...></kendo-combobox>

I get the following error:

"Expected textField and valueField options to be set. See http://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/#toc-bind-to-arrays-of-complex-data"

I am 100% sure that actual string values are being provided for "myFieldBinding" and "myTextBinding". Further, I tested it as follows as well:

<kendo-combobox [valueField]="'hardcodedStringValueField'" [textField]="'hardcodedStringTextField'" ...></kendo-combobox>

And I get the same error.

Dimiter Topalov
Telerik team
 answered on 12 May 2020
1 answer
1.0K+ views

Hi,

We have an application that has to be read in both Arabic and English which has a toggle that changes the localization between the two languages.

When the language is set to Arabic the date format changes from Gregorian to Hijri but we need the date format to always be Gregorian even when in Arabic.

Is there a way to intercept this in the localization and/or set a Gregorian format on the date tag that won't be overridden when the language changes?
Example of the date input field being used:

<input type="text" kendoTextBox class="form-control" value="{{currentContact?.dateOfBirth | date :'shortDate' }}" readonly="readonly">

Svet
Telerik team
 answered on 11 May 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?