1. #1
    Sencha User
    Join Date
    Nov 2012
    Location
    Germany
    Posts
    13
    Vote Rating
    0
    Stetograph is on a distinguished road

      0  

    Default Unanswered: TreeGrid: Row specific styling of the joint opened/closed icon

    Unanswered: TreeGrid: Row specific styling of the joint opened/closed icon


    Hello together,


    currently I am working on a TreeGrid showing some hierarchical data.
    What I need is a customized TreeGrid. It should have customized styles and customized nodeOpen/nodeClosed Icons as well as customized jointOpened/jointClosed-Icons.
    Customizing the style and the nodeOpen/nodeClosed icons was done easily, through changing some resources and overwriting the calculateIconStyle-method of TreeGrid.

    However customizing the joint-image (the image with the arrow, which expands the nodes on click) style is soooo frustating!

    My goal is to set these images invisible in every row. On mouse over the row, it should be set visible. When I am thinking about doing this with plain HTML and Javascript this is really easy. However doing this in GXT kills me.

    My current, none-working approach is the following:

    Code:
            while (treeNodeIterator.hasNext()) {
                Element jointElement = testTreeGridView.getJointElement(treeNodeIterator.next());
                jointElement.getStyle().setVisibility(Style.Visibility.HIDDEN);
            }
    This is called on TreeGrid initialisation.
    The problem:
    The TreeNode-List on which the iterator is called is EMPTY, in spite of the fact that data are populated inside the TreeGrid.
    Does anybody know, why the TreeNodes are empty after data insertion?

    Does anybody have any idea of how the problem of changing the joint-icons' style per row can be accomplished in a nice way?

    Any idea is really appreciated, as I do not have one to solve the problem.



    Kind regards,
    Stefan

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Answers
    109
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    First, a short answer:

    This is called on TreeGrid initialisation.
    The problem:
    The TreeNode-List on which the iterator is called is EMPTY, in spite of the fact that data are populated inside the TreeGrid.
    Does anybody know, why the TreeNodes are empty after data insertion?
    The TreeGrid may have data on initialization, but by default it isnt rendered until a moment or two later (using the Scheduler's deferredCommand), as this is more efficient for most browsers - this is why your code isn't working. Instead, listen for the ViewReadyEvent, and perform your changes then. You may or may not need to also run these changes again on the ExpandEvent and CollapseEvent.

    Are you sure you want to set visibility to hidden? This will preserve the space the element uses, while making it invisible. Consider also setting it's Display property to None.

    Any one more short answer in case you don't read the whole long answer below: Consider not extending Tree/TreeGrid to replace the calculateIconStyle method: set a specialize IconProvider instance instead.



    Okay, a more complete answer about why this isn't easy (the image is part of the theme, not presently meant to be replacable), and how to generally think about solving this in GXT 3:

    For some widgets in GXT, you can configure the widget to change behavior - this is the case when building your own Cell<T> (change how a Tree/ListView item or Grid/TreeGrid cell is drawn) or when providing a IconProvider<T> (change how the Tree/TreeGrid draws icons - please consider this instead of overriding TreeGrid.calculateIconStyle). In both cases, the way to render is dependent on the model object being drawn. In other cases, the images or styles are a more fundamental part of the widget, and don't vary based on the data itself, but on the state of the widget - these include ComboBox/DateField/etc trigger icons, the headers in the Grid/TreeGrid, and the expand/collapse icon, among others. In these cases, to provide this functionality, we use make use of an appearance class.

    All appearances have a default, usually defined in the theme itself (see the Blue.gwt.xml and Gray.gwt.xml files), and when you make your own, you can either pass it into the constructor (see the TreeGrid(TreeStore<M>, ColumnModel<M>, ColumnConfig<M, ?>, GridAppearance, TreeAppearance) constructor), or make your own <replace-with> rule in your .gwt.xml file to be the new default. In this case, you want to alter the behavior of the com.sencha.gxt.widget.core.client.tree.Tree.TreeAppearance.renderNode(SafeHtmlBuilder, String, SafeHtml, TreeStyle, ImageResource, boolean, CheckState, Joint, int, TreeViewRenderMode) and com.sencha.gxt.widget.core.client.tree.Tree.TreeAppearance.onJointChange(XElement, XElement, Joint, TreeStyle) methods, which are tasked with drawing and updating joint elements. In the default implementation, com.sencha.gxt.theme.base.client.tree.TreeBaseAppearance does both Blue or Gray wiring.

    Both read from the com.sencha.gxt.theme.base.client.tree.TreeBaseAppearance.TreeResources implementation, which is specified in the BlueTreeAppearance and GrayTreeAppearance to set theme-specific details.

    The usual approach to change this would be to subclass from the theme you are using, extend the ClientBundle, and point it at a new image. Since you want to completely *remove* the image, not just hide it, you may find this to be a little trickier - you might want to consider a totally custom implementation to make sure any other details you are after are followed as well.

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Location
    Germany
    Posts
    13
    Vote Rating
    0
    Stetograph is on a distinguished road

      0  

    Default


    Hello,

    @Colin Alworth:

    I have followed your advices.
    Implementing an IconProvider in order to provide specific icons instead of overriden the calculateIconStyle()-Method. This works very nice.

    Also the renderNode method was overriden to remove the joint icon.
    My objective is to let a row show the joint icon when this row is clicked.
    So I added a RowClickHandler to the TreeGrid. On such a click event, the node's element's inner HTML is set to show the image. On leaving the row, this inner HTML is reset to show the node without the image.

    Here is a code snippet of the code setting the inner html stuff:

    Code:
                Element jointIconElement = AbstractImagePrototype
                        .create(treeGridForHandler.getStyle().getJointCloseIcon()).createElement();
    jointIconElement.addClassName(((CustomTreeAppearance) treeGridForHandler.getTreeAppearance()).getTreeStyle().joint());
                    nodeHtmlElement.setInnerHTML("<div>" + jointIconElement.getString() + "<span> " + currentlyClickedTaskID + "</span></div>");
    The above code is called, when the user clicks a row.

    Code:
                            Element toRemoveHtmlElement = rowNodeToRemoveIcon.getElement();
                            toRemoveHtmlElement.setInnerHTML("<div><span>" + taskIDToRemove + "</span></div>");
    The above code is called, when the row is leaved.


    The problem is the following:
    When I click on a row, the icon is shown. Clicking on the icon expands the tree node. So far everything's fine.
    Though, when I leave this row and click on it a second time, then nothing happens. I.e. the node is not expanded. Clicking on it the second time means, that the inner html of the node element is set again.
    For me it looks like the joint icon looses its clickhandler if it is rendered via setInnerHtml(...) the second time. I cannot explain this in another way.

    Does anybode had a similar problem or can give me a hint or an idea what causes this problem and how to solve this??


    Kind regards
    Stefan

Thread Participants: 1