Telerik Forums
Kendo UI for Angular Forum
1 answer
369 views

Hi,

I have searched for an answer about this but the only thing I have found isn't working for me.  The post I found suggests this:

Posted 24 Nov 2015Link to this post
The easiest way for hiding the header of the grid will be with the following CSS:
<style>
    .k-grid-header{
      display: none;
    }
</style>

I tried this and still no luck.  This also happened when I tried to change a style in the panelbar.  The solution always seems to say to control it through the class in the css.  The problem is that I am using the bootstrap theme so anything I do in the css is being overwritten by this theme.  Should I not use this theme?  Or is there a way to do both?  I have also tried the !important but that doesn't work either.

Everytime I save the css or the template the display gets set back to flex.

div.k-grid-footer, div.k-grid-header {
display: flex;
flex-direction: row;
align-items: stretch;
}

Thank you,

Cynthia

 

Cynthia
Top achievements
Rank 1
 answered on 10 Oct 2018
2 answers
189 views

I have two cases where I need to be able to put a column in "edit mode". Is there any way to do this? 

1. I have a grid with an edit button in the column header template. Clicking the button puts the whole column in edit mode. Save and cancel buttons appear when the column is in edit mode.

So far I have been able to do this by putting conditional fields in the column cell template. I can show them based on the column index when the edit button for that column is clicked, but I can't assign them to a form group if they aren't in the "kendoGridEditTemplate".

2. I have a grid where the user needs to edit on cell click, but this should put the whole column in edit mode and not just the cell that was clicked. I am able to get the column index from the click event and hoped to use this to put the rest of the cells in edit mode, but I get stuck when trying to use the editCell method. I tried doing a foreach on my data and passing the index of each object into editCell in place of rowIndex, but all I got was a single field displaying in the last row for some reason.

Any ideas/assistance would be much appreciated. 

Rebekah
Top achievements
Rank 1
 answered on 09 Oct 2018
2 answers
3.2K+ views

Hi,

I am trying to override a Kendo CSS class like in this example, only for a single angular component, but it doesnt work. 

https://stackblitz.com/edit/angular-6mrvks?file=app/upload.component.ts

styles: [`
kendo-upload .k-dropzone-hint {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
`],

Only when I override the classes in a general CSS file in my project, it works.

Any idea what can be the problem?

 

Thanks in advance

Hadas
Top achievements
Rank 1
 answered on 09 Oct 2018
2 answers
274 views
Is it possible to display the popup component of the timepicker inline? I'd like to add the timepicker into the body of a dialog view (better for mobile experience).
Ryan
Top achievements
Rank 1
 answered on 07 Oct 2018
4 answers
904 views

Hi,

we have a requirement to export all the response data to PDF. currently when we export the PDF, its exporting only the current visible Grid data (exporting 10 records instead of 25 records). we are using virtual scrolling just fyi.

We noticed that in Kendo export excel (https://www.telerik.com/kendo-angular-ui/components/grid/export/excel-export/#toc-exporting-specific-data) there is a similar property which we had effectively used and achieved the requirement (exporting all the 25 records instead of current visible 10 records in Grid)  whereas when we want to do it with PDF, we couldn't achieve it. Can you help us regarding it.

Dimiter Topalov
Telerik team
 answered on 05 Oct 2018
3 answers
1.0K+ views

I use the Kendo Angular Upload component to send files to the server where they are stored in the database. After a successful upload, the Upload Component automatically adds the uploaded file to the list on the screen. In the FileInfo for the newly uploaded file the property 'uid' is set to a randomly generated ID.

How can use the (primary key) ID used by the server as the uid of the newly uploaded file? I can send the server generated uid in the response of the upload request, but how can I get the Upload Component to use it?

Dimiter Madjarov
Telerik team
 answered on 05 Oct 2018
2 answers
350 views

Hi guys!

I encountered a very strange behavior by the DatePickerComponent because as I discovered, the component's min field isn't resetting properly upon the OnDestroy lifecycle.

Reproduction code: https://stackblitz.com/edit/angular-22wree

Reproduction steps:

  1. Set the first date to 2018.10.10.
  2. Set the second date to 2018.10.10.
  3. Set the first date to 2018.10.15.
  4. Modify the second date (to trigger the minError validation) to 2018.10.14.
  5. Now press the Reset button twice.

And here comes the bug. If you set the first date to 2018.10.05 and the second date to 2018.10.06, the second date triggers the minError validation error with the first min date and not with the actual date.

These dates are just examples for a fast reproduction but in short you need to trigger the minError validation twice on the second date field: First just normally, and the second must occur after the show/hide mechanism.

I didn't test this for the max field.

Dimiter Topalov
Telerik team
 answered on 05 Oct 2018
4 answers
618 views

I am using the bootstrap theme and the Dialog component is not displaying correctly.  After further investigation I found that the bootstrap theme CSS file is missing many of the .k-dialog styles.  For comparison, the default theme has 22 .k-dialog styles and the bootstrap theme only has 15.  The noticeable exclusions are the styles for the button groups and the title bar.  I am currently using the latest version of the BS Theme (2.14.0).  I attached an image of what I see.

 

I am going to just copy over the missing styles from the default theme but this is definitely not ideal as the color schemes are different so I'll have to figure that out as I go.

Dimiter Topalov
Telerik team
 answered on 04 Oct 2018
2 answers
234 views

In the tooltip template documentation the only input seems to be the value object which has an x and y value.  However, our original data additional metadata that we'd like to show in the tooltip.

To be more specific, each data point has a date for the x value, a dollar amount for the y value and then there is an additional field that shows the username responsible for that datapoint. I'd like to be able to include that username in the tooltip for the point in the chart.  Is that possible?

data = [{forecastDate: new Date(2018, 8, 15), forecastAmount: 3500.35, userName: 'John Doe'}, ..... more of those .... ];

 

if i'm using forecastDate for the X-Axis and forecastAmount for the Y-Axis, is it possible to use the userName field in the tooltip for each point?

 

Daniel
Telerik team
 answered on 04 Oct 2018
1 answer
146 views

Hello,

  I have 2 grids both of them have the same columns expect one grid has few additional columns. When I try to sort any column it reflects back on the second grid as well. 

I do have different functions for the grid like:

  public groupChangeGrid1(groups: GroupDescriptor[]): void {
    this.groupGrid1 = groups;
    this.loadDataGrid1();
  }

  public groupChangeGrid2(groups: GroupDescriptor[]): void {
    this.groupGrid2 = groups;
    this.loadDataGrid2();
  }

  private loadDataGrid1(): void {
    this.gridView1 = process(this.summary_data, { group: this.groupGrid1, sort: this.sortGrid1 });
  }

  private loadDataGrid2(): void {
    this.gridView1 = process(this.detail_data, { group: this.groupGrid2, sort: this.sortGrid2 });
  }

  public sortChangeGrid1(sort: SortDescriptor[]): void {
    this.sortGrid1 = sort;
    this.loadDataGrid1();
  }

  public sortChangeGrid2(sort: SortDescriptor[]): void {
    this.sortGrid2 = sort;
    this.loadDataGrid2();
  }

And my grid settings look something like 

<kendo-grid [kendoGridBinding]="detail_data" [pageable]="true" [pageSize]="10" [groupable]="true" [scrollable]="true" [data]="gridView2"
            [group]="groupGrid2" (groupChange)="groupChangeGrid2($event)" [sortable]="{
            mode: 'single'
            }" [sort1]="sortGrid2" (sortChange)="sortChangeGrid2($event)">

 

<kendo-grid [kendoGridBinding]="summary_data" [pageable]="true" [pageSize]="10" [groupable]="true" [scrollable]="true" [data]="gridView1"
            [group]="groupGrid1" (groupChange)="groupChangeGrid1($event)" [sortable]="{
            mode: 'single'
            }" [sort]="sortGrid1" (sortChange)="sortChangeGrid1($event)">

 

Would be nice to have an example provided as a reference if possible. 

bhavin
Top achievements
Rank 1
 answered on 03 Oct 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?