I have two pages one page has kendo grid in it and grid column width is applied without an issue.

This code works:

<div class="row">
  <div class="col-lg-12 pv-lg col align-self-center">
    <kendo-grid [kendoGridBinding]="gridData" [pageSize]="pageSize" [pageable]="gridData.length > 9 && pageSize > 0"
          [sortable]="false"
          [filterable]="false"
          [groupable]="false">
       <ng-template kendoGridToolbarTemplate>
         <button type="button" kendoGridExcelCommand ><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
       </ng-template>
     <kendo-grid-column
          *ngFor="let column of columnNames; let i = index;" field="{{column}}" [width]="calculateColumnLength(i)"></kendo-grid-column>
     <kendo-grid-excel fileName="{{ cardTitle }}.xlsx" [fetchData]="allData"></kendo-grid-excel>
   </kendo-grid>
  </div>
</div>

However when I build tab strips with grid in it. The grid column width is not applied. 

This code doesn't work:

<kendo-tabstrip (tabSelect)="handleTabSelected($event)">
  <kendo-tabstrip-tab *ngFor="let tab of tabsInfo; let i = index" [title]="tab.tabName" [selected]="i == 0">
    <ng-template kendoTabContent>
      <kendo-grid [kendoGridBinding]="tab.gridData">
         <ng-template kendoGridToolbarTemplate>
           <button type="button" kendoGridExcelCommand ><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
         </ng-template>
         <kendo-grid-column *ngFor="let column of tab.columnNames; let j = index;" field="{{column}}" width="230"></kendo-grid-column>
         <kendo-grid-excel fileName="{{tab.tabName}}.xlsx" [fetchData]="allData"></kendo-grid-excel>
      </kendo-grid>
    </ng-template>
  </kendo-tabstrip-tab>
</kendo-tabstrip>

I been on this issue for the past two days, could some one please point out what am I doing wrong.

Regards,

Alex

Hi,

     May I know kendo has Save As file dialog for angular ?

Thanks

I might be overlooking something, but I'm looking for a way to send the file itself (rawFile in the FileInfo) with the post. I'm getting all the File information and my additional values in the body, but can't seem to send the contents along with it. We are storing our documents in the DB.

--Angular with Node API.

Thanks for your time!

Hi all

I have an issue with the alignment of the header and content columns. Chrome displays the grid correctly but in Firefox the header columns aren't aligned with the content columns (see attachments). It seems that as soon as the scrollbar is visible, Firefox doesn't take into account the width of the scrollbar for the header columns. Is there a way to get around that issue?

Best regards,
Sandro

Hello,

There is a way (declarative or programming) to create custom view, beside the built-in views?

I can't see any documentation about it...

Regards

Can u share an example for the grid which uses aggregate, is page able and has export excel feature. 
In examples provided u guys use 

.get(`${this.BASE_URL}${tableName}?${queryStr}`)  

but usually for aggregates I am using something like 

return this.http.get<Array<CollectorGoalSummaryModel>>('/api/report')
.subscribe((data)=>{
let aggregates: any[] = [

{field: 'totalCash', aggregate: 'sum'}

  ];
this.store.collectorGoalSummary = data;
this.store.totals = aggregateBy(data, aggregates)

this.store.currentPageStats = {
data: this.store.collectorGoalSummary.slice(skip, skip + pageSize),
total: this.store.collectorGoalSummary.length
}
})

Having a hard time trying to put the Export grid with aggregates in it

Hello.

I want to be able to stack notifications in a div.

The result I am looking for is the one created in the jQuery version of Notification, when I click 'Static in the panel bellow' from this example: https://demos.telerik.com/kendo-ui/notification/index

Is it possible to have a similar end result in Angular Notifications?

Thank you.

This is the footprint of my web api

public DataSourceResult GetItems([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)

Fiddler shows data being returned from the api as expected.

In my Angular service I have

return this.http
  .get<GridDataResult>(`${this.url}?${queryStr}`)
  .map(({data, total}: GridDataResult) =>
    (<GridDataResult>{
      data: data,
      total: total,
    })
);

In this case, my grid displays no records.  If I change "data" to "Data" and "total" to "Total", my IDE complains

error TS2551: Property 'Data' does not exist on type 'GridDataResult'. Did you mean 'data'?
error TS2551: Property 'Total' does not exist on type 'GridDataResult'. Did you mean 'total'?

but.. with the "D" and the "T" I get data bound to the grid in spite of the compiler error (sometimes Node throws a message that there are compiler errors but usually the page displays data).  Fiddler shows the api returning "Data" where the console in the browser shows "data".

I've deleted everything and installed from scratch.  I updated all of my packages to latest including the Kendo packages.

I was suspicious of my install as in HTML files I receive an error on the Kendo tab, kendo-grid-column generates an error that it is not in the current scope.  This is an IDE error and when I run, the gird looks fine. 

I was using v2 of the default theme and have upgraded to the latest kendo-theme-default (3.7.0) scss (material and bootstrap as well for testing) and when I am creating a kendoGridDetailTemplate inside of my grid, if no data is returned, it is cutting off the "no data available" as seen in the picture. Is this a bug or am I missing something?  Does the same in default, material, and bootstrap scss themes.

If I change it to "kendoGridDetailTemplate" instead of "*kendoGridDetailTemplate" it displays the whole title. HOWEVER, it will not show the + or - button.

my grid setup

<kendo-grid [data]="view | async">
      <kendo-grid-column field="customerName" title="Customer Name"></kendo-grid-column>
            <div *kendoGridDetailTemplate="let dataItem">
                  <ifp-proposal (dialogOpen)="openIFPDialog($event)" [searchOptions]="searchOptions" [Customer]="dataItem"></ifp-proposal>
            </div>
</kendo-grid>

scss i'm using:

@import '~bootstrap/scss/bootstrap';
@import "~@progress/kendo-theme-default/scss/panelbar";
@import "~@progress/kendo-theme-default/scss/grid";
@import "~@progress/kendo-theme-default/scss/multiselect";
@import "~@progress/kendo-theme-default/scss/switch";
@import "~@progress/kendo-theme-default/scss/datetime";