[CLOSED] Listeners for Tree Panel (Razor Views)

[machinableed]

I'm trying to recreate something similar to the tree panel example here: https://examples2.ext.net/#/Form/Dro...ield/Overview/ in razor views but it appears that there is no Listeners collection available on the TreePanel. I've tried using the AddListener attribute using something like .AddListener("CheckChange", "this.dropDownField.setValue(getTasks(this), false);") but I'm having no luck with that either... what is the correct way to achieve this in razor views?

thanks

[Vladimir]

Hi,

Please update from SVN, now TreePanel's Listeners and DirectEvents are available under Razor engine

[machinableed]

thanks - this is working now

[machinableed]

In relation to this - I can push the selected nodes text into the drop down list text without too much trouble using a similar javascript function as that in the examples but is there a way that I can push the node Id into the value attribute of the drop down? i.e. I want to display the selected node Text in the Drop Down text, but in the controller I want to access the nodeid's (not the node text) when I retrieve the form values with Request.Form["DDLId"]... Is the possible at all?

[Daniil]

Hi,

Please investigate:
https://examples2.ext.net/#/Form/Dro...alueText_Mode/

You also might need to set up

SubmitValue="false"

and

<CustomConfig>
    <ext:ConfigItem 
        Name="getHiddenStateName"
        Value="function () {
                    return this.getName();
                }" 
        Mode="Raw" />
</CustomConfig>

to get the behavior where a DropDownField value (nodes ids) will be sent to a server with DropDownField Name (equals its id by default).

[machinableed]

Trying to implement the Syncvalue as shown in the example and I get the error "Non-invocable member 'Ext.Net.JFunction.Fn' cannot be used like a method." The code I'm using is: .SyncValue(syncValue => syncValue.Fn("syncValue"))

what is the correct way to do this in razor syntax?

[Daniil]

Example

@(Html.X().DropDownField()
    .SyncValue(f =>
        f.Fn = "mySyncValue"
    )
)

[machinableed]

I'm still having some trouble with this. The dropdown/tree panel code I'm using is:

fields.Add(Html.X().DropDownField()
                                        .FieldLabel("Product/Service Type")
                                        .ID("ddtServiceType")
                                        .Margins("0 0 0 0")
                                        .LabelWidth(200)
                                        .Width(400)
                                        //.SubmitValue(false)
                                        .Note("Check multiple products/services as required")
                                        .EmptyText("--- Please Select ---")
                                        .Cls("form-label")
                                        .Mode(DropDownMode.ValueText)
                                        .SyncValue(syncValue => syncValue.Fn = "syncValue")
                                        .CustomConfig(customConfig => customConfig.Add(new ConfigItem("getHiddenStateName", "function () {return this.getValue();}", ParameterMode.Raw)))                                      
                                        .Listeners(listeners =>
                                            {
                                                listeners.Expand.Handler = "this.component.getRootNode().expand(true);";
                                                listeners.Expand.Single = true;
                                                listeners.Expand.Delay = 10;
                                                
                                            })
                                        .Component(treePanel => treePanel.Add(Html.X().TreePanel()
                                            .Height(300)
                                            .Width(500)
                                            .MinWidth(500)
                                            .RootVisible(false)
                                            .SelectionModel(selectionmodel => selectionmodel.Add(Html.X().TreeSelectionModel().Mode(SelectionMode.Multi)))
                                            .Listeners(listeners =>
                                            {
                                                listeners.CheckChange.Handler = "this.dropDownField.setValue(getValues(this), getText(this), false);";
                                            })
                                            .Root(root =>
                                            {
                                                #region VPLS

                                                root.Add(new Node { Text = "Root" });
                                                root[0].Children.Add(new Node()
                                                {
                                                    Text = "VPLS",
                                                    NodeID = "ndPrdVPLS",
                                                    Leaf = false
                                                });

                                                root[0].Children[0].Children.Add(new Node()
                                                {
                                                    Text = "VPLS Access Service",
                                                    NodeID = "ndSvcVPLSAccessService",
                                                    Leaf = true,
                                                    Checked = false
                                                });
                                                root[0].Children[0].Children.Add(new Node()
                                                {
                                                    Text = "VPLS Service Delivery Point",
                                                    NodeID = "ndSvcVPLSSDP",
                                                    Leaf = true,
                                                    Checked = false
                                                });
                                                #endregion

                                                #region SDH
                                                root[0].Children.Add(new Node()
                                                {
                                                    Text = "SDH",
                                                    NodeID = "ndPrdSDH",
                                                    Leaf = false
                                                });

                                                root[0].Children[1].Children.Add(new Node()
                                                {
                                                    Text = "SDH Access Service",
                                                    NodeID = "ndSvcSDHAccessService",
                                                    Leaf = true,
                                                    Checked = false
                                                });
                                                root[0].Children[1].Children.Add(new Node()
                                                {
                                                    Text = "SDH Interface",
                                                    NodeID = "ndSvcSDHInterface",
                                                    Leaf = true,
                                                    Checked = false
                                                });
                                                #endregion

                                                #region EoSDH

                                                root[0].Children.Add(new Node()
                                                {
                                                    Text = "EoSDH",
                                                    NodeID = "ndPrdEoSDH",
                                                    Leaf = false
                                                });

                                                root[0].Children[2].Children.Add(new Node()
                                                {
                                                    Text = "EoSDH Access Service",
                                                    NodeID = "ndSvcEoSDHAccessService",
                                                    Leaf = true,
                                                    Checked = false
                                                });

                                                root[0].Children[2].Children.Add(new Node()
                                                {
                                                    Text = "EoSDH Interface",
                                                    NodeID = "ndSvcEoSDHInterface",
                                                    Leaf = true,
                                                    Checked = false
                                                });
                                                #endregion


                                                //root[0].Children.Add(new Node()
                                                //{
                                                //    Text = "Data Centre Connect",
                                                //    NodeID = "ndPrdDCC",
                                                //    Leaf = false
                                                //});

                                                //root[0].Children[5].Children.Add(new Node()
                                                //{
                                                //    Text = "Access Service",
                                                //    NodeID = "ndSvcDCCAccessService",
                                                //    Leaf = true,
                                                //    Checked = false
                                                //});

                                                //root[0].Children[5].Children.Add(new Node()
                                                //{
                                                //    Text = "Interface",
                                                //    NodeID = "ndSvcDCCInterface",
                                                //    Leaf = true,
                                                //    Checked = false
                                                //});

                                                root[0].Children.Add(new Node()
                                                {
                                                    Text = "HDDC",
                                                    NodeID = "ndPrdHDDC",
                                                    Leaf = false
                                                });

                                                root[0].Children[3].Children.Add(new Node()
                                                {
                                                    Text = "Cabinet Product",
                                                    NodeID = "ndPrdHDDCCabinet",
                                                    Leaf = false
                                                });

                                                root[0].Children[3].Children[0].Children.Add(new Node()
                                                    {
                                                        Text = "Floor Space Reservation Service",
                                                        NodeID = "CF_HDDC_FloorSpaceReservationService",
                                                        Leaf = true,
                                                        Checked = false
                                                    });

                                                root[0].Children[3].Children[0].Children.Add(new Node()
                                                {
                                                    Text = "Cabinet Service",
                                                    NodeID = "CF_HDDC_CabinetService",
                                                    Leaf = true,
                                                    Checked = false
                                                });

                                                root[0].Children[3].Children[0].Children.Add(new Node()
                                                {
                                                    Text = "Customer Supplied Cabinet Service",
                                                    NodeID = "CF_HDDC_CustomerSuppliedCabinetService",
                                                    Leaf = true,
                                                    Checked = false
                                                });
                                                root[0].Children[3].Children[0].Children.Add(new Node()
                                                {
                                                    Text = "Power Service",
                                                    NodeID = "CF_HDDC_CabinetPowerService",
                                                    Leaf = true,
                                                    Checked = false
                                                });
                                                root[0].Children[3].Children[0].Children.Add(new Node()
                                                {
                                                    Text = "Portal Service",
                                                    NodeID = "CF_HDDC_PortalService",
                                                    Leaf = true,
                                                    Checked = false
                                                });

                                                root[0].Children[3].Children[0].Children.Add(new Node()
                                                {
                                                    Text = "Access Key Service",
                                                    NodeID = "CF_HDDC_AccessKeyService",
                                                    Leaf = true,
                                                    Checked = false
                                                });



                                                root[0].Children[3].Children.Add(new Node()
                                                {
                                                    Text = "Access Product",
                                                    NodeID = "ndPrdHDDCAccess",
                                                    Leaf = false
                                                });

                                                root[0].Children[3].Children[1].Children.Add(new Node()
                                                {
                                                    Text = "Access Card Service",
                                                    NodeID = "CF_HDDC_AccessCardService",
                                                    Leaf = true,
                                                    Checked = false
                                                });


                                                root[0].Children[3].Children.Add(new Node()
                                                {
                                                    Text = "Maintenance Product",
                                                    NodeID = "ndPrdHDDCMaintenance",
                                                    Leaf = false
                                                });

                                                root[0].Children[3].Children[2].Children.Add(new Node()
                                                {
                                                    Text = "Cleaning Service",
                                                    NodeID = "CF_HDDC_Maintenance_CleaningService",
                                                    Leaf = true,
                                                    Checked = false
                                                });

                                                root[0].Children[3].Children[2].Children.Add(new Node()
                                                {
                                                    Text = "Waste Removal Service",
                                                    NodeID = "CF_HDDC_Maintenance_WasteRemovalService",
                                                    Leaf = true,
                                                    Checked = false
                                                });

                                                root[0].Children[3].Children[2].Children.Add(new Node()
                                                {
                                                    Text = "Afterhour Service",
                                                    NodeID = "CF_HDDC_Maintenance_AfterhoursService",
                                                    Leaf = true,
                                                    Checked = false
                                                });

                                                root[0].Children[3].Children[2].Children.Add(new Node()
                                                {
                                                    Text = "Penalty Service",
                                                    NodeID = "CF_HDDC_Maintenance_PenaltyService",
                                                    Leaf = true,
                                                    Checked = false
                                                });

                                                root[0].Children[3].Children[2].Children.Add(new Node()
                                                {
                                                    Text = "Miscellaneous Service",
                                                    NodeID = "CF_HDDC_Maintenance_MiscellaneousService",
                                                    Leaf = true,
                                                    Checked = false
                                                });


                                                root[0].Children[3].Children.Add(new Node()
                                                {
                                                    Text = "Cross Connect Product",
                                                    NodeID = "ndPrdHDDCCrossConnect",
                                                    Leaf = false
                                                });

                                                root[0].Children[3].Children[3].Children.Add(new Node()
                                                {
                                                    Text = "Cross Connect Service",
                                                    NodeID = "CF_HDDC_CrossConnectService",
                                                    Leaf = true,
                                                    Checked = false
                                                });



                                                root[0].Children.Add(new Node()
                                                {
                                                    Text = "P2P Switched Ethernet",
                                                    NodeID = "ndPrdSwitchedEthernet",
                                                    Leaf = false
                                                });

                                                root[0].Children[4].Children.Add(new Node()
                                                {
                                                    Text = "Access Service",
                                                    NodeID = "ndSvcSwitchedEthernetAccessService",
                                                    Leaf = true,
                                                    Checked = false
                                                });

                                                root[0].Children[4].Children.Add(new Node()
                                                {
                                                    Text = "Service Delivery Point",
                                                    NodeID = "ndSvcSwitchedEthernetSDP",
                                                    Leaf = true,
                                                    Checked = false
                                                });


                                            })


                                    )));
                                }));

        }

and the javascript:

<script type="text/javascript">
        var getValues = function (tree) {
            var msg = [],
                    selNodes = tree.getChecked();

            Ext.each(selNodes, function (node) {
                msg.push(node.data.id);
            });
            
            return msg.join(",");
        };

        var getText = function (tree) {
            var msg = [],
                    selNodes = tree.getChecked();
            msg.push("[");

            Ext.each(selNodes, function (node) {
                if (msg.length > 1) {
                    msg.push(",");
                }

                msg.push(node.data.text);
            });

            msg.push("]");
            return msg.join("");
        };

        var syncValue = function (value) {
            var tree = this.component;

            var ids = value.split(",");
            tree.setChecked({ ids: ids, silent: true });

            tree.getSelectionModel().clearSelections();
            Ext.each(ids, function (id) {
                var node = tree.store.getNodeById(id);

                if (node) {
                    tree.getSelectionModel().select(node, true);
                }
            }, this);
        };
    </script>

I can see that the javascript is running as expected - i.e it appears that the selected nodeids are set as the values and the names are displayed in the drop down field. However when I do a Request.Form["ddtServiceType"] I receive the names and not the nodeIds - I want to see (for example) "CF_HDDC_AccessCardService,CF_HDDC_Maintenance_Cle aningService" but instead I get "[Access Service, Cleaning Service]". What am I doing wrong?

[Daniil]

Please follow the suggestion in the post #5.

1. Uncomment this:

.SubmitValue(false)

2. Correct the Value of the CustomConfig ConfigItem.
There must be "getName" instead of "getValue".

[machinableed]

I have already tried that - in that case I receive nothing at the controller. Neither the names or the IDs, just a null value.