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

app.component.ts:

import { Component } from '@angular/core';
import { process } from '@progress/kendo-data-query';
import { ExcelExportData } from '@progress/kendo-angular-excel-export';
import { products } from './products';
 
@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [kendoGridBinding]="products" [height]="400" [pageable]="true" [pageSize]="10">
            <ng-template kendoGridToolbarTemplate>
                <button type="button" kendoGridExcelCommand icon="file-excel">Export to Excel</button>
            </ng-template>
            <kendo-grid-column field="ProductID" title="Product ID" [width]="200">
            </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Product Name">
            </kendo-grid-column>
            <kendo-grid-column field="Category.CategoryName" title="Category">
            </kendo-grid-column>
        <kendo-grid-excel fileName="Products.xlsx" [fetchData]="allData"></kendo-grid-excel>
      </kendo-grid>
    `
})
export class AppComponent {
    public products: any[] = products;
 
    public group: any[] = [{
        field: 'Category.CategoryName'
    }];
 
    // Bind 'this' explicitly to capture the execution context of the component.
    constructor() {
        this.allData = this.allData.bind(this);
    }
 
    public allData(): ExcelExportData {
        const result: ExcelExportData =  {
            data: process(products, { group: this.group, sort: [{ field: 'ProductID', dir: 'asc' }] }).data,
            group: this.group
        };
 
        return result;
    }
}

 

Given the code above, how can I remove a column (Product ID, Product Name or Category) upon exporting it to excel?

Dimiter Topalov
Telerik team
 answered on 28 May 2020
2 answers
698 views

Hello

I thought I would share my github project that I put together help implement grid state consistently in my applications.

The project consists of an Angular Library and example of the implementation. The library can also be installed via NpmJS.

Hopefully you can find this useful?

Github: https://github.com/lucasheight/angular-kendo-grid-state

NpmJs: https://www.npmjs.com/package/@lucasheight/kendo-grid-state

StackBlitz: https://stackblitz.com/edit/angular-kendo-grid-state

 

kind regards

Lynden

Lynden
Top achievements
Rank 1
 answered on 27 May 2020
4 answers
3.6K+ views

There is no insertHTML command for Angular Kendo Editor.

 I tried InsertText, however, it will show all html tag in editor. How to resolve this issue?

 

Please see code below:

   var strResult =  "<p></p>" 
    +"<span style='font-weight:bold'>CBC, Manual Diff if Indicated (2020-03-17 13:30:00.000)</span>"
   +"<p></p>"
    +"      [MCH]"
     +" 27.1 N 27.0-32.0 "
    +"<p></p>" 
    +"      ["
    +"Platelet Count"
    +"]"
     +"  290 N 150-450";

    editor.exec('insertText', { text: strResult});

Ming
Top achievements
Rank 1
 answered on 27 May 2020
2 answers
8.7K+ views

Hi,

 

I am trying to get currently selected rows from a kendo angular grid and perform some operations for selected rows (such as call an external API using information from selected rows).

- user can select one row

- user can select multiple rows using `shift`

- user can select multiple sections using combination of `shift` and `ctrl`

 

I tried to use `selectionChange` which knows only the current selected rows and not previously selected.Tried to follow this: https://www.telerik.com/forums/how-to-get-the-selected-row-data-item which did not work either.

 

Please provide a sample get list of selected rows at will from the grid. It is fine even if I can get `id` column for selected rows as I can filter through the original data and get other columns for selected ids.

Amit
Top achievements
Rank 1
 answered on 27 May 2020
1 answer
194 views
hi, i want to add table in editor. but i cannot edit width and height. how to display table wizzard like jquery have ?
Petar
Telerik team
 answered on 27 May 2020
1 answer
174 views

I would like to customise the Template using the technique described in the API reference, and similar to one of the other threads in this forum. I have used this example posted by an admin to another thread: https://stackblitz.com/edit/angular-gmuolt-jxzifm?file=app/upload.component.ts

However, I find that when you add an ng-template, all of the default template, including default nice UX is removed.

Is it possible to instead customise the existing Template, for example by adding a second"row" or "li".

If not, how would I go about recreating the UX elements from the default template to use in my custom template?

Thanks.

Dimiter Topalov
Telerik team
 answered on 27 May 2020
3 answers
643 views
Based on the article here, it says we can customize the Pager template:
https://www.telerik.com/kendo-angular-ui/components/grid/paging/#toc-pager-template

Is there a way i can change the ICONs of the <kendo-pager-prev-buttons> or <kendo-pager-next-buttons> ?
Preslava
Telerik team
 answered on 27 May 2020
1 answer
380 views
When will we get support for uploading folder as per the JQuery version?
Dimiter Topalov
Telerik team
 answered on 26 May 2020
1 answer
116 views

Hi Team,

I want to know whether the Kendo UI Window for Angular is free or paid. I just want to use window widget.

Thanks and Regards,

Akhil Bahl

Dimiter Topalov
Telerik team
 answered on 26 May 2020
4 answers
607 views

Hi there,

 

We are having hard times to get our notifications right. Here is how our application works.

We have created a custom NotifcationService that abstracts notification for both desktops (Kendo UI) and mobiles (Ionic). Application components can trigger our NotificationService whenever needed. For instance, for the login page, we display a notification on error or success. Our notifications always have a title / header and a content message.

 

Kendo UI notification for Angular provides three different ways: string (doesn't allow html tags), TemplateRef and Component.

  • The first option would have been perfect if we would have been able to put some tags to format the output.
  • The second option has not been considered given our abstraction logic.
  • We gave a try to the third option but without success for the time being. We created a custom NoticationComponent with two inputs: title (string) and message (string). We used ComponentFactoryResolver to get an instance of our Component and send it our variables. But when we try to use its instancefor NotificationSettings.content it fails:
Type 'NotificationComponent' is not assignable to type 'string | Function | TemplateRef<any>'

whereas passing NotificationComponent directly to NotificationSettings.content works well (but it is then not possible to pass input variables).

 

Are we missing something here? What would have been nice is either to:

  1. Allow tags in content string
  2. Manage an alternative object such as title, message
  3. Allow input parameters for Component rendering case

Thanks

C.

Cyril
Top achievements
Rank 1
 answered on 26 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?