Dynamic resize of a row due to complex cell editor

[Catdoken]

I have a few questions. I created a complex cell editor that has a spinner, a textfield, and the ability to add new HTMLElement objects (a div with a span) based on user input of the spinner/textfield. In doing so the cell needs to be resized and therefore the entire row as new divs are added.

It makes sense the Grid will have to re-render the row if I change the height property, but in doing so it kicks me out of editing that cell. I was not surprised about this but want to check if its possible to remain in edit mode. I have some ideas on how to possibly do this, but none of it is elegant.

For reference I am using the onRender, getValue, onInit methods of generating a cell editor.

As an alternative it is possible to show a pop-up via double clicking a cell? Maybe Smart.Window? I’ve seen examples out there, but it did not look specific to what I am trying to do (https://www.htmlelements.com/angular/demos/grid/nested-grids-dialog/).

Thanks!

• This topic was modified 9 months, 4 weeks ago by Catdoken.

[admin]

Hi Catdoken,

You can use the rowClick event which occurs when a row is clicked and open a Smart.Window for custom editing purposes. As for the resize, you are right, when a row is resized, it needs to be re-rendered. With methods such as beginCellEdit and beginRowEdit, you can restart the editing process, too.

Regards,
Peter

Smart UI Team
https://www.htmlelements.com/

[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 9 months, 3 weeks ago by Catdoken.
• This reply was modified 9 months, 3 weeks ago by Catdoken.

[Markov]

Hi,

1. The rowResize event is called only when the row size is updated by the user via drag and resize of a row header. It is not called when you manually set row height by using the row’s height property.

2. The .smart-grid-cell-editor CSS class is applied to cell editors and you can use it for styling purposes.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[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]

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.

[Markov]

Hi Catdoken,

I would request a stackblitz sample in order to test the specific use case.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[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.

[Markov]

Hi Catdoken,

I suppose the Grid is removed from the DOM and re-attached to it in your use-case and that may be the reason of internal set of this flag and re-calc of the row height. We will try to reproduce this scenario locally and update the component’s behavior.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[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 do see beginUpdate and endUpdate – does that work in conjunction with cell.setProperties preventing a refresh?

[ivanpeevski]

Hi Catdoken,

Yes, beginUpdate and endUpdate also work with setProperties. To use them, you should call them in this order:

grid.beginUpdate();

//make updates

grid.endUpdate();

 

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[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.

[Author]

Posts