Products

[aconley]

I’ve confirmed that the funny typing problem, as well as #2 above, have been resolved in smart-webcomponents-angular v10.0.41. Thanks!
I’m still trying to figure out #1 (staying in edit mode while tabbing through fields), so I’ll post here when I have an update.

[aconley]

I’ve confirmed that this is fixed in smart-webcomponents-angular v10.0.41. Thanks!

[aconley]

Hopefully that was just a mistake, because it doesn’t answer the question at all. Not Angular, no custom cell editor, no component.
But bonus points for the nearly unreadable formatting!

[aconley]

Hi Yavor,
On #1, I’ll have to get back to that, because I don’t think what you suggested actually works. I may have a work around, though.
On #2, thank you. Any idea if that will be included in the next release?
On the extra thing about the typings, I might not have made it clear. I agree, the typing allows the incorrect value “dblClick”, but the code is expecting ‘doubleClick’.
If you have a look at this Stackblitz, you’ll see that I set the editing.action to ‘dblClick’. However, the cell is editable only with a single click, so that value doesn’t really work, and if you look in the console, you’ll see this message:

Invalid 'editing_action' property value! Actual value: ''dblClick'', Expected value: ''none', 'click','doubleClick''!

If you change that editing.action value to ‘doubleClick’, you’ll see the editor doesn’t like it (red squiggly line under it), but now you can only edit the cell with a double click. I’m just saying the typing doesn’t match the actual code. And just to make it more confusing, if you enable cell selection, the editing.action is completely ignored and editing is only triggered with a double click.

[aconley]

We moved to using Angular instead of Blazor, but maybe call .Refresh() instead of .StateHasChanged()?

[aconley]

I’ve been playing with this more, and I think I found a solution. A combination of CSS to wrap text and center the column header vertically, and handling the onColumnResize event to set the header row height. I updated the Stackblitz, but the important parts are below. I was able to get the headers to resize when the grid first loads with that onReady handler, but for some reason it doesn’t work in the Stackblitz.
CSS

smart-grid-column {
  height: 100% !important;
  line-height: normal !important;
}
smart-grid-column .smart-label {
  white-space: normal !important;
  word-break: break-word;
  display:inline-flex !important;
  align-items: center;
}
smart-grid-column .smart-label.align-right {
  flex-direction: row-reverse;
}

Typescript

ngAfterViewInit(): void {
  ...other stuff here...
  this.subscriptions.push(this.grid.onColumnResize.subscribe(() => this.resizeColumnHeaders()));
  this.subscriptions.push(this.grid.onReady.subscribe(() => this.resizeColumnHeaders()));
}
private resizeColumnHeaders() {
  const header = this.grid.nativeElement.querySelector('.smart-grid-column-header') as HTMLElement;
  if (header) {
    // Since column header cells are centered vertically, the 8 here just gives some padding
    header.style.height = (this.getMaxHeaderHeight() + 8) + 'px';
  }
}
private getMaxHeaderHeight(): number {
  const headerNodes = this.grid.nativeElement.querySelectorAll('smart-grid-column .smart-label span');
  const heights: number[] = [];
  headerNodes.forEach(headerNode => heights.push(headerNode.clientHeight));
  return Math.max(...heights);
}

[aconley]

Hi Yavor,
I tried what you suggested but that only gets the header to wrap. The header row still doesn’t resize to show the full column name. Here is a Stackblitz showing what I’m seeing, based on the basic example in the docs (I upgraded the @smart-webcomponents-angular/grid dependency to the latest version):
https://stackblitz.com/edit/github-2bkwnw
I made the Product name column label long (Product Name and Stuff), and set that column’s width to something small. I applied your CSS to the assets/styles.css. The header text wraps now, but the header row isn’t tall enough to show the full text.
I’m looking for a fix, in CSS and/or script, that will allow the height of the column header to automatically resize to fit the content, especially when the user changes the width of the column. I did a little more digging, and found the onColumnResize event. In that event I could detect the height of the tallest header, but is there a way in script to set the height of the header row?
Thanks for the help!

[aconley]

Peter,
I don’t get the errors when building for development, but when ng build runs against the production configuration, it finds those errors in the stylesheets.
All I have to look at is the NPM package. For example, if I open node_module/smart-webcomponents-angular/source/styles/components/smart.fileupload.css, I can see that the @-webkit-keyframes error styles only have 5 characters in their background-color definitions, which is invalid. Looking at the corresponding source/styles/default/scss/smart.fileupload.scss file, the colors are defined in RGBA format, but whatever processor you use to build the CSS file is converting the RGBA format (#ff000015) to some sort of short hex notation for the first 6 characters (#f00) with the alpha added to the end (#f0015).
You can pretty easily reproduce this:
ng new smarttest
cd smarttest
ng add smart-webcomponents-angular
ng build
You’ll have to increase the budget size in angular.json from 1mb to something like 3mb because the smart.default.css file is so big. If you build again after fixing the budget, you should see something like the following error:
× Index html generation failed.
undefined:1:727615: missing '{'
In my case, that location was the progressbar keyframes problem. I manually fixed that, then built again, found the next problem.

[aconley]

First, thanks for the quick response.
I’m sure you’ve probably had to answer this in other threads, but since this forum doesn’t allow searching (which is ridiculous, just saying), can you tell me when you expect the new release to be available?
Also, as a workaround, I was expecting to be able to set that property on both the appearance and the behavior settings, but when I did that, nothing changed, double-click still didn’t work to auto-size the column.

[aconley]

Yavor,
I appreciate the quick reply, and that you did not explicitly just come out and call me an idiot. That small change made everything work, so I’m on my way now.
I’m glad it was something simple.
Thanks again!

[Author]

Posts