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
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.
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
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.
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?
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:
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.
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.
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?
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.