PDA

View Full Version : [CLOSED] [Razor] TreePanel load nodes from controller action



boris
May 17, 2012, 11:03 AM
Hi,
Is there any way to load treepanel nodes with razor syntax?
I saw this example http://forums.ext.net/showthread.php?17518-CLOSED-Tree-Panel-Razor-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
May 17, 2012, 12:12 PM
Hi,

I would use TreeStore with AjaxProxy, like this:
http://examples2.ext.net/#/TreePanel/Loaders/Using_Handler/

boris
May 17, 2012, 2:34 PM
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.SimpleArr owDown)//.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').coll apse();";
})
);
})
);
})
);





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
May 17, 2012, 5:15 PM
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
May 18, 2012, 7:43 AM
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
May 18, 2012, 8:38 AM
This is the method of the Controller class.

I think you need to add:

using Controller = System.Web.Mvc.Controller;

boris
May 18, 2012, 8:59 AM
Than we don't need new keyword for method:


return Content(nodes.ToJson());

Now I'm going to try this.

Daniil
May 18, 2012, 9:20 AM
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
May 18, 2012, 9:43 AM
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').coll apse();";
})
);
})
.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! :)