[CLOSED] [Razor] TreePanel load nodes from controller action

[boris]

Hi,
Is there any way to load treepanel nodes with razor syntax?
I saw this example http://forums.ext.net/showthread.php...r-View-Example but that is not what I need.
In my example I have empty Treepanel and need to load nodes from controller action. (I need to load all nodes in one action call because I need to set search for tree on client.)

Thanks

[Daniil]

Hi,

I would use TreeStore with AjaxProxy, like this:
https://examples2.ext.net/#/TreePane...Using_Handler/

[boris]

Yes, I use it. But I have problem to load whole tree in one ajax request.

Down is example I use: DropDownField with TreePanel. In TreePanel I have TreeStore and ajaxProxy. Nodes loading when user clicks on one node, but I need to load all nodes and subnodes on page load. I try to put Children on nodes but it don't works.

Html.X().DropDownField().ID("DropDownFieldKontniPlanDokument")
                                            .Editable(false).TriggerIcon(TriggerIcon.SimpleArrowDown)//.PickerAlign("tl-tr?")
                                            .Width(200).LabelWidth(100).FieldLabel(Resources.R.KontoDokument).MatchFieldWidth(false)
                                            .Component(component => {
                                                component.Add(
Html.X().TreePanel().ID("TreePanelKp")
                                                    .DisplayField("text")//Kp_Naziv
                                                    .Height(400).Width(300).UseArrows(true).AutoScroll(true).Animate(true).RootVisible(true)//.SingleExpand(true)
                                                    .Store(store =>
                                                    {
                                                        store.Add(Html.X().TreeStore().ID("TreeStoreKontniPlanDokument")//.AutoLoad(true)
                                                            .Proxy(proxy =>
                                                            {
                                                                proxy.Add(Html.X().AjaxProxy().Url("/KontniPlan/GetTree").Reader(reader => 
                                                                {
                                                                    reader.Add(Html.X().JsonReader().IDProperty("id").Root("result"));
                                                                }));
                                                            })
                                                            .Model(model =>
                                                            {
                                                                model.Add(Html.X().Model().ID("ModelKontniPlanStablo").Fields(fields =>
                                                                {
                                                                    fields.Add(Html.X().ModelField().Name("id").Type(ModelFieldType.Int));
                                                                    fields.Add(Html.X().ModelField().Name("text"));
                                                                }));
                                                            })
                                                        );
                                                    })
                                                    .Root(root =>
                                                    {
                                                        root.Add(Html.X().Node().Text("koren").Icon(Icon.Folder).Checked(false));
                                                    })
                                                    .Buttons(buttons =>
                                                    {
                                                        buttons.Add(Html.X().Button().ID("ButtonZatvoriStablo").Text(Resources.R.Zatvori)
                                                            .Listeners(listeners =>
                                                            {
                                                                listeners.Click.Handler = "Ext.getCmp('DropDownFieldKontniPlanDokument').collapse();";
                                                            })
                                                        );
                                                    })
);
                                            })
                                        );

public AjaxResult GetTree()
        {

            NodeCollection nodes = new NodeCollection(false);

            for (int i = 1; i < 6; i++)
            {
                Node asyncNode = new Node();
                asyncNode.Text = Guid.NewGuid().ToString();
                asyncNode.NodeID = Guid.NewGuid().ToString();
                asyncNode.Icon = Icon.Music;
                asyncNode.Checked = false;

                asyncNode.Children.Add(new Node { NodeID = Guid.NewGuid().ToString(), Text = "n0", Checked = false, Icon = Icon.FolderBell });
                asyncNode.Children.Add(new Node { NodeID = Guid.NewGuid().ToString(), Text = "n1", Checked = false, Icon = Icon.FolderBell });
                asyncNode.Children.Add(new Node { NodeID = Guid.NewGuid().ToString(), Text = "n2", Checked = false, Icon = Icon.FolderBookmark });

                nodes.Add(asyncNode);
            }

            for (int i = 6; i < 11; i++)
            {
                Node node = new Node();
                node.Text = Guid.NewGuid().ToString();
                node.NodeID = Guid.NewGuid().ToString();
                node.Leaf = true;
                node.Checked = false;
                node.Icon = Icon.FolderCamera;

                node.Children.Add(new Node { NodeID = Guid.NewGuid().ToString(), Text = "n01", Checked = false, Icon = Icon.Folder });
                node.Children.Add(new Node { NodeID = Guid.NewGuid().ToString(), Text = "n12", Checked = false, Icon = Icon.Folder });
                node.Children.Add(new Node { NodeID = Guid.NewGuid().ToString(), Text = "n23", Checked = false, Icon = Icon.Folder });

                nodes.Add(node);
            }

            AjaxResult result = new AjaxResult { Result = nodes.ToJson() };
            return result;
        }

[Daniil]

Please apply the following changes:

1. Remove Model of the Store.

2. Remove Reader of AjaxProxy.

3. Replace

AjaxResult result = new AjaxResult { Result = nodes.ToJson() };return result;

with

return Content(nodes.ToJson());

4. Change the Action return type to ActionResult.

[boris]

Which namespace is for class Content? For Content class I don't have constructor with string parameter. System.Web.UI.WebControls is namespace for Content class that I use.

[Daniil]

This is the method of the Controller class.

I think you need to add:

using Controller = System.Web.Mvc.Controller;

[boris]

Than we don't need new keyword for method:

return Content(nodes.ToJson());

Now I'm going to try this.

[Daniil]

Than we don't need new keyword for method:

return Content(nodes.ToJson());

Yes, it's correct. I typed "new" by a mistake. Apologize for the inconvenience.

[boris]

Ok, here is whole and simple example that works if somebody needs:

Html.X().TreePanel().ID("TreePanelKontniPlanDokument")
                                                    .DisplayField("text") //Kp_Naziv
                                                    .Height(400).Width(300).UseArrows(true).AutoScroll(true).Animate(true).RootVisible(true)
                                                    .Store(store =>
                                                    {
                                                        store.Add(Html.X().TreeStore().ID("TreeStoreKontniPlanDokument")
                                                            .Proxy(proxy =>
                                                            {
                                                                proxy.Add(Html.X().AjaxProxy().Url("/KontniPlan/GetTree")

                                                                );
                                                            })
                                                        );
                                                    })
                                                    .Root(root =>
                                                    {
                                                        root.Add(Html.X().Node().Text("koren").Icon(Icon.Folder).Checked(false).Expanded(true));
                                                    })
                                                    .Buttons(buttons =>
                                                    {
                                                        buttons.Add(Html.X().Button().ID("ButtonZatvoriStablo").Text(Resources.R.Zatvori)
                                                            .Listeners(listeners =>
                                                            {
                                                                listeners.Click.Handler = "Ext.getCmp('DropDownFieldKontniPlanDokument').collapse();";
                                                            })
                                                        );
                                                    })
                                                    .Listeners(listeners =>
                                                    {
                                                        listeners.CheckChange.Handler = "alert('radi');";
                                                    })

public ActionResult GetTree()
        {
            NodeCollection nodes = new NodeCollection(false);

            Node node = new Node { NodeID = Guid.NewGuid().ToString(), Text = "n-00", Checked = false, Icon = Icon.Folder, Leaf = false }; //Expanded = true

            Node k = new Node { NodeID = Guid.NewGuid().ToString(), Text = "k-00", Checked = false, Icon = Icon.Folder, Leaf = true };
            node.Children.Add(k);

            Node m = new Node { NodeID = Guid.NewGuid().ToString(), Text = "m-00", Checked = false, Icon = Icon.Folder, Leaf = true };
            node.Children.Add(m);

            nodes.Add(node);
         
            ContentResult result = Content(nodes.ToJson());
            return result; 
        }

Thanks for help! :)