or
1 answer
161 views
There is no visual indication of any sort to show which of the tabs you are currently viewing. This can be seen on your tabstrip demo page where it's not easy to tell when you click a city if that click actually worked or which city you are looking at when the page loads.
Getting Started - TabStrip - Kendo UI for Angular (telerik.com)
This is in contrast with the material design spec examples for tabs seen at the link below where the selected tab is underlined and has a distinct font color.
1 answer
2.0K+ views
Hi all,
I want horizontal scrolling for grids because my users can dynamically add columns and work with data before exporting to Excel for further analysis. This also gets me round the problem of wide grids on a small screen.
I DO NOT want vertical scrolling as my users scroll with the browser and grid scrolling has caused no end of confusion when I have installed it.
I therefore set up my grid as follows:
The grid header is now rendered with 16px padding which throws out the alignment of all columns with the header. It looks like the padding has been added by flex and I am unable to overwrite. I can manually modify right padding to 0px in the console and all is great.
I DO NOT want to set a height for my grid and force a scroll bar so the content lines up by having a scroll bar.
I have tried setting a maxHeight in the hope that if the max height was not met the grid would remove the padding because it was not applying the scroll bar. No luck. Setting a max height implements padding and throws column alignment out when it does not apply a scroll bar (go figure)...
I have tried various bits of CSS to remove the padding to no avail.
This would be a global setting as this is how I want all of my grids to behave.
The following global settings are defined in styles.css (I implement a grid wrapper and spinner across all grids).
How do I remove the padding to align my columns when I do not want vertical scrolling?
Cheers,
Bob
Martin Bechev
Telerik team
answered
on
18 Aug 2021
0 answers
135 views
Hi,
Im looking for a list control with
- Drag & Drop
- Selection (On selecting a list item, i should be able to perform some operations from common (menu) buttons)
- Inline-Edit
I was using ListView for AngularJS earlier (without inline edit) earlier. Now we have moved to Angular. As per documentation, Angular ListView does not have Drag & Drop, inline-edit(just by clicking on the item) & Selection (e.g. to perform delete). Am I right?
Then I looked into Sortable control. It has Drag & Drop, but not Selection & Inline Edit. Am I right or missing something?
The finally I narrowed down on TreeView which all the required functionalities, but have to prevent drag & drop of one node into another as my requirement is a list, not hierarchical structure.
Am I missing anything? Is TreeView the right choice for my requirement?
Thanks
0 answers
135 views
Hi
How subscribe event in Scheduler when date change from an other date compoment like permanent calendar or datePicker ?
Regards
1 answer
1.0K+ views
Hello. I want to scroll the grid horizontally by using the mouse wheel. I also want this to be enabled only when no vertical scroll is shown. Is there any way of achieving this by using grid settings?
If not, I am trying to handle this by manipulating the ".k-grid-content" element. But I am trying to access this element inside a directive with:
ngAfterViewInit(): void {
console.log(this.el.nativeElement.querySelectorAll('.k-grid-content'));
}Or with Renderer2:
this.renderer2.listen('.k-grid-content', 'wheel', (event) => {
console.log('WHEEL: ', event);
});But it is not working. Is it possible to access that element inside my directive?
Thank you.
Slavena
Telerik team
answered
on
16 Aug 2021
0 answers
469 views
Hello,
I'm using the Kendo Grid for Angular and it's showing some weird behavior. I have some hidden columns and a column menu for toggling the visibility. I have a situation where certain columns load hidden and I can't unhide them even with the column menu.
We are trying to cache the user's grid settings. We've enabled column reordering and toggling visibility. Whenever the user hides/shows or reorders a column, we cache the state of the columns in localStorage. And when the user revisits the page, we check for a cached version of the columns and restore it if it exists.
For some reason, when the cached columns are restored, I can't unhide the hidden columns. I go to the column menu, and it's unchecked (which means hidden), but when I check it and then hit apply, the column is still hidden. I look back in the menu and it's still checked. In the code, I look at the state of the column in grid.columns, and it shows that 'hidden' is set to true.
Here is my code:
Can anyone see why hidden columns won't show after loading them from the cache?
I'm using the Kendo Grid for Angular and it's showing some weird behavior. I have some hidden columns and a column menu for toggling the visibility. I have a situation where certain columns load hidden and I can't unhide them even with the column menu.
We are trying to cache the user's grid settings. We've enabled column reordering and toggling visibility. Whenever the user hides/shows or reorders a column, we cache the state of the columns in localStorage. And when the user revisits the page, we check for a cached version of the columns and restore it if it exists.
For some reason, when the cached columns are restored, I can't unhide the hidden columns. I go to the column menu, and it's unchecked (which means hidden), but when I check it and then hit apply, the column is still hidden. I look back in the menu and it's still checked. In the code, I look at the state of the column in grid.columns, and it shows that 'hidden' is set to true.
Here is my code:
ngAfterViewInit(): void {
// Reordering columns can fail if done before the current Angular digest cycle is complete,
// therefore, set timeout with 0 seconds so that it fires immediately after the digest cycle:
setTimeout(() => {
this.restoreColumnsFromCache(this.StorageName);
});
this.subscribeToColVisibilityChange();
}
public subscribeToColVisibilityChange(): void {
this._colVisibilityChangeSub = this.grid.columnVisibilityChange.subscribe(
($event: ColumnVisibilityChangeEvent) => {
this.cacheColumnsState(
{
changedColumns: $event.columns
},
this.StorageName
);
}
);
}
public restoreColumnsFromCache(storageName: string): void {
this._suppressReorderHandler = true;
const columns = localStorage.getItem(storageName);
if (columns) {
// Column reordering is buggy when hidden columns exist.
// Show all columns until we're done reordering:
this.grid.columns.forEach(c => c.hidden = false);
setTimeout(() => {
// Reorder columns:
const columnsParsed: ColumnInfo[] = JSON.parse(columns);
columnsParsed.forEach((ci: ColumnInfo, index: number) => {
const gridColumn = this.grid.columns.find((gridCol: any) => gridCol.title === ci.title);
if (gridColumn) {
this.grid.reorderColumn(gridColumn, index);
}
});
// Restore column hidden states:
this.grid.columns.forEach(c => {
const cachedColumn = columnsParsed.find(cachedCol => cachedCol.title === c.title);
c.hidden = cachedColumn ? !cachedColumn.isVisible : false;
});
this._suppressReorderHandler = false;
});
} else {
this._suppressReorderHandler = false;
}
}Can anyone see why hidden columns won't show after loading them from the cache?
1 answer
816 views
Hi Team,
I'm creating one module to apply the style dynamically.
In that I'm using form as reactive form.
I used Kendo Button Group to select font weight & style like bold, italic and underline.
For the same I used BIU as different button in button group.
But I'm not able to apply the formControlName.
How can I do that?
Svet
Telerik team
answered
on
13 Aug 2021
0 answers
164 views
Hi Team,
In kendo-grid kendo-grid-column already added but i have added more columns that is received from API now i have pass that dynamic data in child component but in my case its generating but issue is that component data not rendered in view.can anybody tell me how to do it?
<kendo-grid [reorderable]="true" [ngClass]="{gridloading:gridLoadingEnabled == true}"
[kendoGridBinding]="data" [loading]="gridLoadingEnabled"
[resizable]="true">
<kendo-grid-column field="TaxPercent" title="{{'CommonPercentage' | translate}}"></kendo-grid-column>
<kendo-grid-column field="TotalLC" title="{{'CommonTotal(LC)' | translate}}"></kendo-grid-column>
<!-- Dyamically added columns-->
<app-udf-item-details [udfItemDetailData]="columnList"></app-udf-item-details>
</kendo-grid>
<!-- Child component-->
<h3 class="sub-title" >Basic Details</h3>
<div class="form-group">
<div class="col-md-6" *ngFor="let column of columnList" style="padding:4px;">
<label for="{{column.id}}" class="col-md-4 control-label">{{column.name}}</label>
<div class="col-md-8">
<input type="text"
name="{{column.id}}" class="form-control" id="{{column.id}"
disabled>
</div>
</div>
</div>
1 answer
291 views
Hi,
Not able to install kendo theme bootstrap. What is wrong with me
Stoyan
Telerik team
answered
on
11 Aug 2021
1 answer
1.1K+ views
Hi,
When using Material theme with kendo grid, there's no border between columns. When doing column resizing, only column header has a resizer vertical line showing. Is it possible to also show a separation line between normal column cells when resizing columns? How to customize css to achieve this?
Thanks,
Randy
