Products

[Catdoken]

Any tips on the scroll bar. When I add enough rows that a scrollbar appears I get two issues:

• The vertical scrollbar consumes part of the last cell. Seems to me the width of the table must be fixed and the scrollbar is forced to eat part of the last cell so it will fit. I am overriding the width via –smart-grid-default-width: 100%;, otherwise the grid seems to ignore the cell widths I set. Might just be how I have the HTML/CSS set on my end.
• More importantly when I scroll up/down the grid seems to be having trouble moving to other rows. If I populate data for the first row, scrolling down always has me still seeing the first row at the top.
  • I opted to keep the scrolling at the default “physical”.
  • I opted to not make a custom dataSource as the tree will go ahead and make its own.
    • I use grid.addRow(…) to add an object that looks like this:
      • {
        ‘Option 1’: <value>,
        ‘Option 2’: <value>,
        etc….
        };

What might I be missing? Is having the tree create the data source not the way to go? Perhaps the custom cell templates are the problem.

Edit: I may see the problem now, it is the templates. Leaving the post here if you have any pointers. Performance seems slower then usual, but I suspect its the re-drawing of the cells. Redrawing seems to get called excessively. I can perhaps add logic to not do heavy lifting unless something actually changed. If I changed one cell of row 1 it seems to kick off a repaint of all cells in all rows.

[Catdoken]

I do see beginUpdate and endUpdate – does that work in conjunction with cell.setProperties preventing a refresh?

[Catdoken]

Ok, sounds good. With my setup the grid should be removed from the DOM when I close the entire UI then bring it back up. The part that handles the display of the grid is backed by an Angular ngIf.

I do have a new question – is there a way to bulk edit multiple cells without having the grid redraw per cell? Maybe its in the API and I missed it. I am looking for something similar to GridCell.setProperties which lets you change multiple properties that then trigger a redraw. I am looking to do the same, but edit multiple properties across multiple cells. If I use GridCell.setProperties for each cell it looks like the grid is kicking off a redraw per cell – makes sense.

[Catdoken]

I tracked this down to the isDirty boolean found on grid.layout. The first time it is false and everything works as expected. If I close the component that has the grid and then re-open isDirty is true. I’ll look in the source to see if I can learn more, but short story is setting isDirty to false in ngAfterViewInit (using bracket notation) works great, no more issues.

This is a workaround I’ll be using for now, but I am not 100% sold on it since isDirty is not something that is exposed in the API (using typescript here) so I interpret that as a property that is not meant to be changed manually.

I can try to create a stackblitz example, if so I’ll post here.

[Catdoken]

I have another question regarding row resizing.

I have the grid in an Angular application so it is created when the component it lives in is created. When I first bring up the component the row resizing works correctly. I set the height on the row via row.height = xxxx. I also tried grid.setRowProperty.

If I close the component then re-open it resizing on longer works. I can set row.height to anything, nothing sticks. Maybe there is some old data or references that were not cleaned up. I assume there is an ngOnDestroy method for any angular representation of a SmartHTML component. Is there anything I am not doing that I need to when destroying the table?

I have not set any properties on grid.layout (no auto height). My guess is it is getting re-created and kills any changes. The template/editors are re-drawn throughout the grids life. I was under the impression if I changed the rowHeight to xxx it would stick, but I must be misunderstanding nuances of how the properties are persisted.

Overall is dynamically changing the height of a row something that is supported? I am sure it is technically in that it is possible, but is it something that is considered “normal” for the Grid? I am asking in terms of just setting row.height several times after the grid has been initialized. I know there is layout.rowHeight, onRowInit, behavior of growAndShrink which I believe is you manually use the mouse to change the height.

My use case is I have a cell editor that is complex, needs more height. I don’t want to set the row height to a fixed value that is good for the editor because the template/renderer does not need to be that high. I’d like the row to use as little height as possible.

[Catdoken]

That is what I figured with the resize. No problem, I worked around it and have all cells opening via single click.

I’ll take a look at the CSS class. I am planning to change the styles problematically. In doing so it looks like I need to grab an instance of the HTMLElement that has a class of ‘smart-input’ in order to change the color.

Thanks.

[Catdoken]

Thanks, I found a path forward on this. Using beginCellEdit was what I needed.

A few other questions:

• Is there a way to know when a row is resized by the UI, not by a human. There is the onRowResize listener, but it does not get called as that must be when one manually changes height via dragging the edges. I don’t think this is built into the architecture but figured I’d ask. The use case is to know when a row has to repaint itself so I can reopen the edit cell. I am trying to keep everything single click. If I am editing a row and I click another row, that previous row should end its edit and the newly clicked cell enter edit mode. If there is a height difference between the template and the editor the row will repaint killing the edit of the clicked cell.
• Any pointers on changing the CSS of a smart component inside a grid cell, specifically the template? For example a smart-input inside a smart-grid cell. I think using the smart-input has made life harder since it is using its own CSS where if I just used a <div>{{value}}</div> raw HTML the grid CSS would take over. I did not opt to use the built in templates via the strings like ‘input’, ‘date’, etc. I wanted to roll my own.  I can change some things (see below), but color does not work at all. It is hard to follow sometimes given there are hundreds of CSS properties some of which are shared across many components.

if (!data.template) {
const input = document.createElement(‘smart-input’);

input.style.border = ‘none’;
input.style.marginLeft = ‘0.50px’;
input.style.width = ‘100%’;
// cant change background color

input.value = data.value;

data.template = input;
} else {
….
}

• This reply was modified 3 months, 1 week ago by Catdoken.
• This reply was modified 3 months, 1 week ago by Catdoken.

[Catdoken]

Thanks for the reply.

I will give that a shot, but will that make the cell readonly such that the user can’t double click and see the cursor?

The example given is for Table rather than Grid; in my original post I used table once to describe grid, my mistake. Grid has onBeginEdit and it looks the same. I am utilizing Anulgar so its an EventEmitter where event.preventDefault() is supposed to halt an edit.

 

Edit:

I got this to work. What I ended up doing was set the readonly property of the cell to true/false. I tried this last week and it did not work but that was because I was using addEventListener instead of using onBeginEdit EventEmitter.

Thanks!

• This reply was modified 3 months, 3 weeks ago by Catdoken.

[Catdoken]

Thanks, sounds good.

As a temporary workaround calling selectAll() on the editor after creating it seems to avoid the error.

[Catdoken]

As an update I am hijacking the paste event and inserting text into the editor manually. Was hoping to not have to do that, but its no problem. There are a few ways the editor can handle paste events and was not sure if there is a setting to use for this looking at the examples provided.

Thanks for your time.

[Catdoken]

Ivan,

A quick question if you have time – is it possible to paste text copied from a primitive editor, such as notepad, into the editor and have it retain its format instead of all one line?

For example:

FIRST LINE
SECOND LINE

I tried setting editmode to markdown which addresses the Enter key question earlier as well as handles the paste as we were hoping. It does handle styling differently which was expected. It may be it is not possible to have the best of both – styling ability + paste like markdown.

Thanks!

[Catdoken]

Hi Ivan,

Thanks for the response.

For keydown I did try stopping the event and instead sending a new one that was Shift+Enter via dispatchEvent, but that did not work. I got a response from the editor (onChanging) but with no actual change to the text when looking at oldValue/newValue. I did not try your implementation of creating the text node manually. I’ll give that a shot.

Thanks!

[Author]

Posts