PDA

View Full Version : [CLOSED] which is the best way to add a column into a TreePanel?



RCN
Jul 24, 2013, 6:35 PM
It's possible to add a column into a GridPanel, as it's possible to see on the following Thread http://forums.ext.net/showthread.php?25747-how-to-dynamic-add-one-column-to-the-gridpanel, and on the sample provided below.

6614

6615


<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var click = function () {
App._grd.addColumn({ xtype: "commandcolumn", text: "New Column", commands: [{ xtype: "button", command: "Delete", iconCls: "#Delete"}], prepareToolbar: prepareToolbar123 });
}

var prepareToolbar123 = function (grid, toolbar, rowIndex, record) {
if (record.raw.ID % 2 == 0) {
toolbar.items.getAt(0).hide();
} else {
toolbar.items.getAt(0).show();
}
};

</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Button Text="Add Column" runat="server">
<Listeners>
<Click Handler="click();" />
</Listeners>
</ext:Button>
<ext:GridPanel ID="_grd" runat="server" Title="Records" Frame="false" Width="500"
Height="500">
<Store>
<ext:Store AutoLoad="true" ID="_str" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadFakeRecords/">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ID" Type="String" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Address" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Text="ID" DataIndex="ID" runat="server" />
<ext:Column Text="Name" DataIndex="Name" runat="server" />
<ext:Column Text="Address" DataIndex="Address" runat="server" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>




namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index()
{
return View();
}

public StoreResult LoadFakeRecords()
{
List<Person> lst = new List<Person>();

for (int index = 0; index < 15; index++)
{
lst.Add(new Person
{
ID = index,
Name = "Name" + index,
Address = "Address" + index,
});
}

return new StoreResult(lst, lst.Count());
}
}

public class Person
{
public int ID { get; set; }

public string Name { get; set; }

public string Address { get; set; }
}
}


It's also possible to add a column into a TreePanel, but i would like to know whether there is a better way than the sample provided below, which it's necessary to create a new Array, add all columns (cloned) into it and then, add the new column.

6616

6617



<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var click = function () {
var columns = new Array();

for (var index = 0; index < App._grd.columns.length; index++) {

Ext.Array.include(columns, App._grd.columns[index].cloneConfig());
}

Ext.Array.include(columns, { xtype: "commandcolumn", text: "New Column", commands: [{ xtype: "button", command: "Delete", iconCls: "#Delete"}], prepareToolbar: prepareToolbar123 });

App._grd.reconfigure(null, columns);

App._grd.view.refresh();
}

var prepareToolbar123 = function (grid, toolbar, rowIndex, record) {
if (record.raw.ID % 2 == 0) {
toolbar.items.getAt(0).hide();
} else {
toolbar.items.getAt(0).show();
}
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Button Text="Add Column" runat="server">
<Listeners>
<Click Handler="click();" />
</Listeners>
</ext:Button>
<ext:TreePanel ID="_grd" RootVisible="false" Title="Ext.Net" Height="700" Width="600"
Margins="10" Border="false" runat="server">
<Store>
<ext:TreeStore runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadTreeFakeChildren">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Column1" />
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Root" />
</Root>
<ColumnModel>
<Columns>
<ext:TreeColumn Text="ID" Lockable="true" DataIndex="ID" Flex="2" runat="server" />
<ext:Column Text="Column1" Lockable="true" DataIndex="Column1" runat="server" />
</Columns>
</ColumnModel>
<View>
<ext:TreeView DeferEmptyText="false" />
</View>
</ext:TreePanel>
</body>
</html>




namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index2()
{
return View();
}


public StoreResult LoadTreeFakeChildren()
{
NodeCollection nodes = new NodeCollection(false);

for (int index = 1; index < 6; index++)
{
Node no = new Node();
no.NodeID = index.ToString() + DateTime.Now.Millisecond;
no.CustomAttributes.Add(new ConfigItem { Name = "ID", Value = no.NodeID, Mode = ParameterMode.Value });
no.CustomAttributes.Add(new ConfigItem { Name = "Column1", Value = Guid.NewGuid().ToString(), Mode = ParameterMode.Value });
nodes.Add(no);
}

return new StoreResult { Data = nodes.ToJson() };
}
}
}


Thanks in advance

Baidaly
Jul 25, 2013, 3:08 AM
Hello!

It seems as a good approach to add a column.

Daniil
Jul 25, 2013, 6:08 AM
Hi,

I think we should consider moving a GridPanel's addColumn method (and others column-related methods) to a TablePanel to get it available for a TreePanel as well. For now, please try:


Ext.tree.Panel.override({
insertColumn : function (index, newCol, doLayout) {
var headerCt = this.normalGrid ? this.normalGrid.headerCt : this.headerCt;

if (index < 0) {
index = 0;
}

if (newCol.locked && this.lockedGrid) {
headerCt = this.lockedGrid.headerCt;
}

headerCt.insert(index, newCol);

if (doLayout !== false) {
this.updateLayout();
this.fireEvent('reconfigure', this);
this.getView().refresh();
}
},

addColumn : function (newCol, doLayout) {
var headerCt = this.normalGrid ? this.normalGrid.headerCt : this.headerCt;

if (newCol.locked && this.lockedGrid) {
headerCt = this.lockedGrid.headerCt;
}

this.insertColumn(headerCt.getColumnCount(), newCol, doLayout);
}
});

As for a CommandColumn in a TreePanel, please do not forget that it works with OverOnly="true" only.
https://github.com/extnet/Ext.NET/issues/58

RCN
Jul 25, 2013, 12:36 PM
I think we should consider moving a GridPanel's addColumn method (and others column-related methods) to a TablePanel to get it available for a TreePanel as well.

It would be awesome. Please keep me posted.

Thank both of you

RCN
Jul 25, 2013, 5:31 PM
Daniil, do you have any suggestion about how to remove a column from a TreePanel?

Daniil
Jul 26, 2013, 4:44 AM
A GridPanel has the removeColumn method. You can give it a try for a TreePanel.

removeColumn

Ext.tree.Panel.override({
removeColumn : function (index, doLayout) {
var headerCt = this.normalGrid ? this.normalGrid.headerCt : this.headerCt,
column,
locked = false;

column = headerCt.getComponent(index);

if(!column && this.lockedGrid) {
headerCt = this.lockedGrid.headerCt;
column = headerCt.getComponent(index);
locked = true;
}

if (column) {
headerCt.remove(column);

if (doLayout !== false) {
if(locked) {
this.syncLockedWidth();
this.lockedGrid.getView().refresh();
}

this.updateLayout();
this.fireEvent('reconfigure', this);
this.getView().refresh();
}
}
}
});

RCN
Jul 26, 2013, 2:15 PM
Thank you Daniil. I will test it.

Baidaly
Jul 28, 2013, 2:12 AM
Methods addColumn and removeColumn have been added to our trunk.

Here is a sample of use:


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void AddColumn(object sender, DirectEventArgs e)
{
ColumnBase c = new ActionColumn()
{
Text = "Delete",
Width = 40,
Items =
{
new ActionItem()
{
Icon = Icon.Delete
}
}
};

TreePanel1.AddColumn(c);

RemoveColumnButtonDirect.Enable();
AddColumnButtonDirect.Disable();
}

protected void RemoveColumn(object sender, DirectEventArgs e)
{
TreePanel1.RemoveColumn(5);

RemoveColumnButtonDirect.Disable();
AddColumnButtonDirect.Enable();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Add/Remove Column from TreeGrid - Ext.NET Examples</title>

<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var formatHours = function (v) {
if (v < 1) {
return Math.round(v * 60) + " mins";
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + "h " + Math.round(min * 60) + "m";
} else {
return v + " hour" + (v === 1 ? "" : "s");
}
};

var handler = function(grid, rowIndex, colIndex, actionItem, event, record, row) {
Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task'));
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>
TreeGrid Example
</h1>
<p>
This example is an advanced tree example. It illustrates:
</p>
<ul class="feature-list">
<li>Multiple headers
</li>
<li>Header hiding, showing, reordering and resizing
</li>
<li>useArrows configuration
</li>
<li>Keyboard Navigation
</li>
<li>Discontiguous selection by holding the CTRL key
</li>
<li>singleExpand has been set to true
</li>
</ul>

<br />

<ext:TreePanel
runat="server"
Title="Core Team Projects"
Width="500"
Height="300"
Collapsible="true"
UseArrows="true"
RootVisible="false"
MultiSelect="true"
SingleExpand="true"
ID="TreePanel1"
EnableColumnMove="False"
FolderSort="true">
<Fields>
<ext:ModelField Name="task" />
<ext:ModelField Name="user" />
<ext:ModelField Name="duration" />
<ext:ModelField Name="done" Type="Boolean" />
</Fields>
<ColumnModel>
<Columns>
<ext:TreeColumn
runat="server"
Text="Task"
Flex="2"
Sortable="true"
DataIndex="task" />
<ext:TemplateColumn
runat="server"
Text="Duration"
Flex="1"
Sortable="true"
DataIndex="duration"
Align="Center">
<Template runat="server">
<Html>
{duration:this.formatHours}
</Html>
<Functions>
<ext:JFunction Name="formatHours" Fn="formatHours" />
</Functions>
</Template>
</ext:TemplateColumn>
<ext:Column
runat="server"
Text="Assigned To"
Flex="1"
Sortable="true"
DataIndex="user" />
<ext:CheckColumn runat="server"
Text="Done"
DataIndex="done"
Width="40"
Editable="true"
StopSelection="false" />
<ext:ActionColumn runat="server"
Text="Edit"
Width="40"
MenuDisabled="true"
Align="Center">
<Items>
<ext:ActionItem Tooltip="Edit task" Icon="PageWhiteEdit" Handler="handler">
<IsDisabled Handler="return !record.data.leaf;" />
</ext:ActionItem>
</Items>
</ext:ActionColumn>
</Columns>

</ColumnModel>

<Root>
<ext:Node Text="Tasks">
<Children>
<ext:Node Icon="Folder" Expanded="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Project: Shopping" Mode="Value" />
<ext:ConfigItem Name="duration" Value="13.25" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Icon="Folder">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Housewares" Mode="Value" />
<ext:ConfigItem Name="duration" Value="1.25" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Kitchen supplies" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.25" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Groceries" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.4" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
<ext:ConfigItem Name="done" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Cleaning supplies" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.4" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Office supplies" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.2" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Icon="Folder" Expanded="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Remodeling" Mode="Value" />
<ext:ConfigItem Name="duration" Value="12" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Retile kitchen" Mode="Value" />
<ext:ConfigItem Name="duration" Value="6.5" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Icon="Folder">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Paint bedroom" Mode="Value" />
<ext:ConfigItem Name="duration" Value="2.75" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Ceiling" Mode="Value" />
<ext:ConfigItem Name="duration" Value="1.25" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Walls" Mode="Value" />
<ext:ConfigItem Name="duration" Value="1.5" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Decorate living room" Mode="Value" />
<ext:ConfigItem Name="duration" Value="2.75" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
<ext:ConfigItem Name="done" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Fix lights" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.75" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
<ext:ConfigItem Name="done" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Reattach screen door" Mode="Value" />
<ext:ConfigItem Name="duration" Value="2" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Icon="Folder">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Project: Testing" Mode="Value" />
<ext:ConfigItem Name="duration" Value="2" />
<ext:ConfigItem Name="user" Value="Core Team" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Icon="Folder">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Mac OSX" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.75" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="FireFox" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.25" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Safari" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.25" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Chrome" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.25" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Icon="Folder">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Windows" Mode="Value" />
<ext:ConfigItem Name="duration" Value="3.75" />
<ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="FireFox" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.25" />
<ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Safari" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.25" />
<ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Chrome" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.25" />
<ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Internet Explorer" Mode="Value" />
<ext:ConfigItem Name="duration" Value="3" />
<ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Icon="Folder">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Linux" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.5" />
<ext:ConfigItem Name="user" Value="Aaron Conran" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="FireFox" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.25" />
<ext:ConfigItem Name="user" Value="Aaron Conran" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Chrome" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.25" />
<ext:ConfigItem Name="user" Value="Aaron Conran" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
<Buttons>
<ext:Button runat="server" ID="AddColumnButton" Text="Add Column" Handler="
this.findParentByType('treepanel').addColumn({
xtype: 'commandcolumn',
text: 'Delete',
width: 40,
commands: [{
xtype: 'button',
command: 'Delete',
iconCls: '#Delete'
}
]});
this.disable();
#{RemoveColumnButton}.enable();
"></ext:Button>
<ext:Button runat="server" ID="RemoveColumnButton" Disabled="True" Text="Remove Column" Handler="
this.findParentByType('treepanel').removeColumn(5) ;
#{AddColumnButton}.enable();
this.disable();
">
</ext:Button>

<ext:Button runat="server" ID="AddColumnButtonDirect" Text="Add Column (DirectEvent)">
<DirectEvents>
<Click OnEvent="AddColumn"></Click>
</DirectEvents>
</ext:Button>

<ext:Button runat="server" ID="RemoveColumnButtonDirect" Text="Remove Column (DirectEvent)">
<DirectEvents>
<Click OnEvent="RemoveColumn"></Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:TreePanel>
</form>
</body>
</html>

RCN
Jul 29, 2013, 1:52 PM

RCN
Jul 29, 2013, 2:33 PM
Thank both of you. Please mark this thread as closed.

RCN
Aug 06, 2013, 12:44 PM
Please also refer the following thread: http://forums.ext.net/showthread.php?25932-OPEN-315-Exception-is-thrown-when-expanding-a-tree-node-after-inserting-a-column-into-TreePanel