New Editor Tree Grid Extension based on Ext.ux.tree.TreeGrid

[nordine]

Hi Darkwolfe,

Thank you very much for your help.

1)

You can disable the toggle by adding a beforedblclick event listener and returning false. Since the editing events are tied to the tree body and not the panel body, this will not affect editing or events associated with editing.

Works, but I noticed another problem after that, when I edit a branch, after validating, it steps directly to the next branch (in edit mode) and not to the node (leaf in my case, see pictures below) just below.
Can I fix that, or at least can I prevent the fact that it goes to the next branch in editing mode.
In other words : I want only to edit the cell that I want and after editing I don't want that to step into another cells.

2)

The editor is positioned at the top left of the cell. When I created this i didn't take into account form elements like checkboxes so it handles all them the same in terms of editor position. I'll need to add some code to check for form element type before positioning the editor. I'll put this into the next update.

Wait for your answer thank you very much.
May be, meanwhile, could you tell me in which line of the code this is managed.

3)

I haven't noticed this. Can you provide a screenshot so i know what to look for?

Sure, have a look to the two pictures joined.

4)

I don't know how a checkcolumn model could be added. Ext was a little misleading calling the TreeGrid a grid, when it is more like a TreeListView. The columns are borrowed from the ListView, which in turn is loosely borrowed from the Grid, however, with a ListView, and consequently with the TreeGrid, no column model is actually used, so i'm not sure how you could get that in there. I'll take a look at it when i can, i should be able to mimic that functionality.

Thank you, it was just for information, don't bother.
I think that the boolean column will satisfy me need.

5) Another point that I forgot to mentionned, as you will see in the pictures, when I have a null value, this "null" value is displayed as "null", and before that I used a classic grid, and the "null" value was not displayed but it was empty.
How can I manage to avoid the displaying of "null" ?

[darkwolfe]

Thank you very much for your help.

No problem, i hope you find my answers useful.

Works, but I noticed another problem after that, when I edit a branch, after validating, it steps directly to the next branch (in edit mode) and not to the node (leaf in my case, see pictures below) just below.
Can I fix that, or at least can I prevent the fact that it goes to the next branch in editing mode.
In other words : I want only to edit the cell that I want and after editing I don't want that to step into another cells.

This function is by design. The editor will move to the nextSibling on enter. If you would like to change this behavior, look at the onEditorKey function that begins on line 811. The line you want to alter will be line 831.

Wait for your answer thank you very much.
May be, meanwhile, could you tell me in which line of the code this is managed.

You'll want to look at the getCellEditor function that starts on line 617. This creates an instance of Ext.grid.GridEditor, which is an extension of the Ext.Editor class. Look in the ext api for config options, but I would start with the alignment config option. Without any testing, i am about 90% sure that'll do the trick.

Sure, have a look to the two pictures joined.

I see your screenshot, but i'm still not quite sure what you mean. To me, it looks like a normal column. What am i missing? I didn't alter any code relating to the headers, so this must be present on the Ext.tree.TreeGrid. I'll see if I can fix it, and create an override for the standard tree grid if necessary, once I'm more clear of the problem. If it's obvious, sorry i'm being so thick.

Thank you, it was just for information, don't bother.
I think that the boolean column will satisfy me need.

Well, i'm glad you can get around it, but i like the idea, so i'll still keep it in mind.

5) Another point that I forgot to mentionned, as you will see in the pictures, when I have a null value, this "null" value is displayed as "null", and before that I used a classic grid, and the "null" value was not displayed but it was empty. How can I manage to avoid the displaying of "null" ?

I made no alterations of the code that displays the values in the tree, so i'm not 100% on this one. I would start by looking at the Ext.ux.tree.TreeGridNodeUI class and overriding the renderElements functions. I would guess that the first for loop that sets up the column/node html element is the place to look. If you haven't figured it out by the time i can get to this, i'll take a look. i agree, though, "null", null, and possibly undefined should be parsed out.

[nordine]

Hi Darkwolfe,

First of all, again, thank you for your help, your answers are very useful.

1)

This function is by design. The editor will move to the nextSibling on enter. If you would like to change this behavior, look at the onEditorKey function that begins on line 811. The line you want to alter will be line 831.

I will have a look and try to modify the code in order to fit it with my needs.

2)

You'll want to look at the getCellEditor function that starts on line 617. This creates an instance of Ext.grid.GridEditor, which is an extension of the Ext.Editor class. Look in the ext api for config options, but I would start with the alignment config option. Without any testing, i am about 90% sure that'll do the trick.

I will try too, I will let you now the results.

3)

I see your screenshot, but i'm still not quite sure what you mean. To me, it looks like a normal column. What am i missing? I didn't alter any code relating to the headers, so this must be present on the Ext.tree.TreeGrid. I'll see if I can fix it, and create an override for the standard tree grid if necessary, once I'm more clear of the problem. If it's obvious, sorry i'm being so thick.

May be you missed the point.
If you have a look to the column header that I encircled in red, you will see that the background is not not properly displayed (in grey like the others header columns on the left).
And the problem occurs when these columns were masked at the beginning of the rendering, but when you scroll (horizontal scrollbar at the bottom of the grid), to display these columns, you will get the problems.
After you answer, I made the test with a simple grid, and we don't have this problem.

4)
I made no alterations of the code that displays the values in the tree, so i'm not 100% on this one. I would start by looking at the Ext.ux.tree.TreeGridNodeUI class and overriding the renderElements functions. I would guess that the first for loop that sets up the column/node html element is the place to look. If you haven't figured it out by the time i can get to this, i'll take a look. i agree, though, "null", null, and possibly undefined should be parsed out.[/QUOTE]
Thanks, by my side, meanwhile I will try to solve the problem at the source (server side) to avoid these "null" values.

[nordine]

Hi Darkwolfe,

I noticed another point : When I edit a cell, and I scroll horizontaly (a treegrid with a horizontal scrolbar), the edit cell doesn't follow the column.
It stays on place as if it was positionned in a absolute way.

[darkwolfe]

May be you missed the point. If you have a look to the column header that I encircled in red, you will see that the background is not not properly displayed (in grey like the others header columns on the left).
And the problem occurs when these columns were masked at the beginning of the rendering, but when you scroll (horizontal scrollbar at the bottom of the grid), to display these columns, you will get the problems. After you answer, I made the test with a simple grid, and we don't have this problem.

Ok, now i know what to look for, but since this isn't critical at the moment it may take me a few days to get to it.

[darkwolfe]

Hi Darkwolfe,

I noticed another point : When I edit a cell, and I scroll horizontaly (a treegrid with a horizontal scrolbar), the edit cell doesn't follow the column.
It stays on place as if it was positionned in a absolute way.

Yeah, i noticed this too. In the newest update (v1.0.6), the editor will cancel when scrolling occurs.

[nordine]

Thanks,

Yeah, i noticed this too. In the newest update (v1.0.6), the editor will cancel when scrolling occurs.

Great ! When do you think it will be available/released ?

And what about not cancelling the editor if scrolling occurs ? Is it possible to manage the editor with the scrolling (following the scrolling) ?

[darkwolfe]

Thanks,

Great ! When do you think it will be available/released ?

And what about not cancelling the editor if scrolling occurs ? Is it possible to manage the editor with the scrolling (following the scrolling) ?

Well, before i updated it to cancel the editing when scrolling, the editor, in my browser at least, was following the scroll. It didn't think it looked good to do that, so i made it cancel the editing on scroll.

Also, don't forget to grab the latest copy from the main post (v1.0.7), there is a major bug fix that prevented editing in IE.

[soungalo]

hi,
First, thank you for this amazing work!
i have the same issus, like nordine.

Originally Posted by nordine
3) I noticed that if some columns are not displayed because of the width of the container, and if I scroll to the right, then the header of these columns are not well displayed.

please take a look at the screenshots.
i think this is a problem of the grid container.
thank you by adcance.

[soungalo]

hi darkwolfe
i see that if a vertical scroller apear, the horizontal one apears too (even if there is no node in the treegrid). i think it's because when the vertical scroller apears, we don't subtract it's height to the height of the treegrid's innerBody. i resolved the issu by overriting the onResize methode.

 bd.style.height = this.body.getHeight(true) - hd.offsetHeight-Ext.getScrollBarWidth()+ 'px'; 

i don't know if this is the better way to do that. so say me what do you think about it!
thanks