[CLOSED] TreePanel: cancel node selection change event

[coleg123]

Hello,

Could you help us to figure out proper way to cancel node selection change event for TreePanel. In the code below it works if using <BeforeSelect Handler="return false;" />, but we need to show alert and capture user input that is best done in separate js function. So, the next line <BeforeSelect Handler="checkEntityPropertiesFormIsDirty()" /> doesn't cancel this event even though I simplified it to just return false to make the point. It returns false - confirmed through debugger, but SelectionChange event is still fired.
What I'm missing here?

                            <ext:TreePanel>
                                ....                                
                                <SelectionModel>
                                    <ext:DefaultSelectionModel>
                                        <Listeners>
                                            <%--<BeforeSelect Handler="return false;"  /> this cancels selection fine --%>
                                            <BeforeSelect Handler="checkEntityPropertiesFormIsDirty()"  />
                                            <SelectionChange Handler="updatePanels(this.selNode)"  />
                                        </Listeners>
                                    </ext:DefaultSelectionModel> 
                                </SelectionModel>
                            </ext:TreePanel>

var checkEntityPropertiesFormIsDirty = function () {
            return false;
}

We are using version v2.0.50727 of Ext.Net. Let me know if I need to create fully working simplified example.
Thanks!

[Daniil]

Hi,

Wellm this Handler

<BeforeSelect Handler="checkEntityPropertiesFormIsDirty();"  />

is rendered to a client this way

function () {
    checkEntityPropertiesFormIsDirty();
}

You can see it returns nothing.

There is two possible solutions:

1. Native JS confirm, because it stops JS execution.

or

2. Returning false from a BeforeSelect, showing a confirmation dialog and select a node manually if a user tells that a node must be selected.

[coleg123]

Hi Daniil,

Using your tip I managed to make it working by combining two things:
1. Using Fn instead of Handler in BeforeSelect event
2. Using confirm js function as opposite to Ext.Msg.confirm.

So when user edited old node's properties and moves to the new node he will be warned about unsaved data on old node with option to cancel navigation. Below are working code snipets.
I'm wandering, do you have a link to thread or documentation that talks about differences between Fn vs Handler and when is best to use each of them.

.......................................
                                <SelectionModel>
                                    <ext:DefaultSelectionModel>
                                        <Listeners>
                                            <BeforeSelect Fn="checkEntityPropertiesFormIsDirty"  /> <%--function works fine --%>
                                            <%--<BeforeSelect Handler="checkEntityPropertiesFormIsDirty;"  />--%> <%--handler doesn't work--%>
                                            <SelectionChange Handler="updatePanels(this.selNode)"  />
                                        </Listeners>
                                    </ext:DefaultSelectionModel> 
                                </SelectionModel>
                            </ext:TreePanel>

//        var checkEntityPropertiesFormIsDirty = function (el, newNode, oldNode) { //handler doesn't work
        function checkEntityPropertiesFormIsDirty(el, newNode, oldNode) {          //function works fine 
            if (Ext.getCmp("MainContent_ucEditEntity_fpEditControl") && MainContent_ucEditEntity_fpEditControl.isDirty() && oldNode != null) {
                var msg = "The '" + oldNode.text + "' has unsaved data. Do you want to discard them and move to the '" + newNode.text + "'?";
//                Ext.Msg.confirm('Unsaved data.', msg, function (btn, text) {
//                    if (btn != 'yes') {
                    var answer = confirm (msg)
                    if (!answer){
                        return false;
                    } else {
                        return true;
                    }
//                });
            } else
                return true;
        }

Thanks!

[Daniil]

Please see:
http://forums.ext.net/showthread.php?13118