PDA

View Full Version : [CLOSED] TreeGrid : Problem with dispay in dynamic tree grid



matrixwebtech
Jan 07, 2015, 11:08 AM
Hi,Daniil,

I need to achieve a task with treegrid for user permission.and the treegrid is generate dynamically. please run the sample bellow.

View

@{


var X = Html.X();
}
@model Ext.Net.Node


@X.ResourceManager()
@( X.TreePanel()
.Title("Core Team Projects")
.Width(500)
.Height(300)
.Collapsible(true)
.UseArrows(true)
.RootVisible(false)
.MultiSelect(true)
.SingleExpand(false)
.FolderSort(true)

.Fields(
X.ModelField().Name("moduleid"),
//X.ModelField().Name("modulename"),
X.ModelField().Name("submoduleid"),
// X.ModelField().Name("submodulename"),
X.ModelField().Name("menuid"),
// X.ModelField().Name("menuname"),
X.ModelField().Name("name"),
X.ModelField().Name("p1").Type(ModelFieldType.Boolean),
X.ModelField().Name("p2").Type(ModelFieldType.Boolean),
X.ModelField().Name("p3").Type(ModelFieldType.Boolean),
X.ModelField().Name("p4").Type(ModelFieldType.Boolean)
)
.ColumnModel(
/*X.TreeColumn()
.Text("Module Name")
.Flex(2)
.DataIndex("modulename"),*/

/* X.TreeColumn()
.Text("Sub modulename")
.Flex(1)
.DataIndex("submodulename")
.Align(Alignment.Center),*/

/* X.TreeColumn()
.Text("Menu Name")
.Flex(1)
.DataIndex("menuname")
.Align(Alignment.Center),*/

X.TreeColumn()
.Text("Name")
.Flex(1)
.DataIndex("name")
.Align(Alignment.Center),

X.CheckColumn()
.Text("P1")
.DataIndex("p1")
.Width(40)
.Editable(true)
.StopSelection(false),

X.CheckColumn()
.Text("P2")
.DataIndex("p2")
.Width(40)
.Editable(true)
.StopSelection(false),

X.CheckColumn()
.Text("P3")
.DataIndex("p3")
.Width(40)
.Editable(true)
.StopSelection(false),

X.CheckColumn()
.Text("P4")
.DataIndex("p4")
.Width(40)
.Editable(true)
.StopSelection(false)



)
.Root(Model)
)

@(X.Button().Text("Submit"))


Controller


public class TreeGridController : Controller
{
//
// GET: /TreeGrid/

public ActionResult Index()
{
List<module> mod = module.GenarateModule();
List<submodule> submod = submodule.GenarateSubModule();
List<menu> mnu = menu.GenarateMenu();
Node n = new Node();
Node n_mod = null;
Node n_submod = null;
Node n_menu = null;

foreach (module obj_mod in mod)
{
var v_submod = submod.FindAll(item => item.moduleid == obj_mod.moduleid);

n_mod = new Node();
n_mod.Icon = Icon.Folder;
n_mod.Expanded = true;
n_mod.AttributesObject =
new
{
moduleid = obj_mod.moduleid,
name = obj_mod.modulename
};

foreach (submodule obj_submodule in v_submod)
{

var v_menu = mnu.FindAll(item => item.submoduleid == obj_submodule.submoduleid);
n_submod = new Node();
n_submod.Icon = Icon.Folder;
n_submod.Expanded = false;

n_submod.AttributesObject =
new
{
submoduleid = obj_submodule.submoduleid,
name = obj_submodule.submodulename
};

foreach (menu obj_menu in v_menu)
{
n_menu = new Node();
n_menu.Icon = Icon.Folder;
// n_menu.Expanded = true;
n_menu.Leaf = true;
n_menu.AttributesObject =
new
{
menuid = obj_menu.menuid,
name = obj_menu.menuname,
p1 = obj_menu.p1,
p2 = obj_menu.p2,
p3 = obj_menu.p3,
p4 = obj_menu.p4
};
n_submod.Children.Add(n_menu);

}
n_mod.Children.Add(n_submod);
}
n.Children.Add(n_mod);

}

return View(n);
}

}

public class module
{
public int moduleid { get; set; }
public string modulename { get; set; }

public static List<module> GenarateModule()
{
List<module> l = new List<module>();
for (int i = 1; i <= 2; i++)
{
var v = new module();


v.moduleid = i;
v.modulename = "Module " + i.ToString();
l.Add(v);

}
return l;
}
}

public class submodule
{
public int moduleid { get; set; }
public int submoduleid { get; set; }
public string submodulename { get; set; }

public static List<submodule> GenarateSubModule(int modid = 10)
{
List<submodule> l = new List<submodule>();
for (int j = 1; j <= modid; j++)
{
for (int i = 1; i <= 2; i++)
{
var v = new submodule();

v.moduleid = j;
v.submoduleid = i;
v.submodulename = "SubModule " + i.ToString();
l.Add(v);

}
}
return l;
}
}

public class menu
{
public int menuid { get; set; }
public int submoduleid { get; set; }
public string menuname { get; set; }
public bool p1 { get; set; }
public bool p2 { get; set; }
public bool p3 { get; set; }
public bool p4 { get; set; }


public static List<menu> GenarateMenu(int submodid = 10)
{
List<menu> l = new List<menu>();
for (int j = 1; j <= submodid; j++)
{
for (int i = 1; i <= 2; i++)
{
var v = new menu();

v.submoduleid = j;
v.menuid = i;
v.menuname = "Menu " + i.ToString();
v.p1 = true;
v.p2 = false;
v.p3 = true;
v.p4 = true;
l.Add(v);

}
}
return l;
}
}

this code generate a tree grid like bellow image.
http://forums.ext.net/attachment.php?attachmentid=18461&stc=1

you can see Module1 and SubModule1 align in same line.I need to set alignment between Module1 and Submodele1 as Submodele1 and Menu1


please help me to achieve this.

Daniil
Jan 07, 2015, 2:42 PM
Hi @matrixwebtech,

This

.Align(Alignment.Center)
just aligns the text on center. It doesn't know anything about parents-children relationships between the nodes. So, I don't think there is a way to go with this setting.

You could try the following.

1. Remove the Align setting.

2. Set this:

.TdCls("my-column")

3. The definition of the my-column CSS class.

<style>
.my-column .x-grid-cell-inner-treecolumn {
padding-left: 25%;
}
</style>