PDA

View Full Version : [CLOSED] TreeGrid : Check child checkbox with parent checkbox checked



matrixwebtech
Jan 07, 2015, 4:41 PM
Hi,
In this Post http://forums.ext.net/showthread.php?50461-TreeGrid-get-TreeGrid-store-data-in-JSON-format&p=228801&viewfull=1#post228801 I create a TreeGrid and Load data with proxy,and now I want to add a functionality in this TreeGrid.please see the attached image.

http://forums.ext.net/attachment.php?attachmentid=18481&stc=1

I have three label data in the TreeGrid.now need if

1.I check P1 for Module1 then all P1 checkbox under Module1 is get checked automatically.and if unchecked then unchecked all.
2.then for SubModule,if I check P1 of SubModule1 then all Menu under submenu will check and for uncheck all unchecked

so I think the logic is every checkbox checked if its parent checkbox is checked and unchecked if parent is unchecked ,but end child can be select manually.

you can get a idea what I wan to do.LOGIC (http://wenzhixin.net.cn/p/multiple-select/docs/#with-optgroups)

Daniil
Jan 08, 2015, 1:04 PM
Hi @matrixwebtech,

You can use a CheckColumn's CheckChange event to catch changes.

Then you will need to deal with records' ModelFields. To check a column you should set a record's ModelField to true, to uncheck - to false.

Hope this helps you to start.

matrixwebtech
Jan 08, 2015, 1:23 PM
Hi daniil


You can use a CheckColumn's CheckChange event to catch changes.
How I know how many child under a parent?for this I think I have to set a loop.

I have not try with your suggestion ,I will try and let you know.please clarify my above query.

Daniil
Jan 08, 2015, 1:31 PM
The answer should be in the node API.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.NodeInterface

Dimitris
Jan 08, 2015, 3:32 PM
Hmm,

This is an interesting question...

Assuming the treegrid (I am using the http://examples2.ext.net/#/TreePanel/Advanced/TreeGrid/ treegrid) has the following checkcolumn:



<ext:CheckColumn ID="CheckColumn1" runat="server"
Text="Done"
DataIndex="done"
Width="40"
Editable="true"
StopSelection="false">
<Listeners>
<CheckChange Handler="onCheckColumnChange(this, node);" />
</Listeners>
</ext:CheckColumn>


the handler can be something like:



var onCheckColumnChange = function (obj, node) {
if (!node.locked) {
node.locked = true;

if (node.hasChildNodes()) {
node.cascadeBy(function (childNode) {
childNode.data.done = node.data.done;
});
}
}

node.locked = false;
}


This checks/unchecks all child nodes of the checked/unchecked parent but the result is not immediately visible (child nodes need to be expanded) and I wonder why...

matrixwebtech
Jan 08, 2015, 3:58 PM
Hi @Mimisss,thanks.
But this is not working with my sample http://forums.ext.net/showthread.php?50461-TreeGrid-get-TreeGrid-store-data-in-JSON-format&p=228801&viewfull=1#post228801 .
I add

X.CheckColumn()
.Text("P1")
.DataIndex("p1")
.Width(40)
.Editable(true)
.StopSelection(false)
.Listeners(l =>
{
l.CheckChange.Handler = "onCheckColumnChange(this, node);";
})
and also the javascript which you provide.when I click a checkbox a javascript error occurs ReferenceError: node is not defined can you please try this once with my sample?

Dimitris
Jan 08, 2015, 4:36 PM
Sorry, it should be record instead of node. Can you please try it?

matrixwebtech
Jan 08, 2015, 5:53 PM
I change

.Listeners(l =>
{
l.CheckChange.Handler = "onCheckColumnChange(this, record);";
})


var onCheckColumnChange = function (obj, node) {
console.log(node)
if (!node.locked) {
node.locked = true;

if (node.hasChildNodes()) {

node.cascadeBy(function (childNode) {
console.log(childNode)
childNode.data.p1 = node.data.p1;

});
}
}

node.locked = false;
}

but not working.can you please try my sample with your code?I think then you can understand.

Dimitris
Jan 09, 2015, 3:00 PM
Sorry for the delayed answer,

Here is a full example based on your code (Visual Studio 2012, asp.net mvc 5.2.2, ext.net.mvc 2.5.3.1):



@model Ext.Net.Node

@{
Layout = null;
var X = Html.X();
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
var onCheckChange = function (obj, node) {
console.log(node)
if (!node.locked) {
node.locked = true;

if (node.hasChildNodes()) {

node.cascadeBy(function (childNode) {
childNode.set(obj.dataIndex, node.data[obj.dataIndex]);
});
}
}
node.locked = false;
}
</script>
</head>
<body>
@X.ResourceManager()
@( X.TreePanel()
.ID("tp")
.Title("Core Team Projects")
.Width(500)
.Height(300)
.Collapsible(true)
.UseArrows(true)
.RootVisible(false)
.MultiSelect(true)
.SingleExpand(false)
.FolderSort(true)
.Store(
X.TreeStore()
.Root(X.Node().Expanded(true).NodeID("Root"))
.Proxy(X.AjaxProxy()
.Url(Url.Action("genaratemenuajax")))
.Model(
X.Model()
.Fields(
X.ModelField().Name("moduleid"),
X.ModelField().Name("submoduleid"),
X.ModelField().Name("menuid"),
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("Name")
.Flex(1)
.DataIndex("name"),
X.CheckColumn()
.Text("P1")
.DataIndex("p1")
.Width(40)
.Editable(true)
.StopSelection(false)
.Listeners(l =>
{
l.CheckChange.Handler = "onCheckChange(this, record)";
}
),
X.CheckColumn()
.Text("P2")
.DataIndex("p2")
.Width(40)
.Editable(true)
.StopSelection(false)
.Listeners(l =>
{
l.CheckChange.Handler = "onCheckChange(this, record)";
}
),
X.CheckColumn()
.Text("P3")
.DataIndex("p3")
.Width(40)
.Editable(true)
.StopSelection(false)
.Listeners(l =>
{
l.CheckChange.Handler = "onCheckChange(this, record)";
}
),
X.CheckColumn()
.Text("P4")
.DataIndex("p4")
.Width(40)
.Editable(true)
.StopSelection(false)
.Listeners(l =>
{
l.CheckChange.Handler = "onCheckChange(this, record)";
}
)
)
// .Root(Model)
)

@(X.Button().Text("Submit")
.Listeners(l =>
{
l.Click.Handler = "console.log(App.tp.getStore().fields)";
})

)
</body>
</html>

matrixwebtech
Jan 10, 2015, 5:52 AM
Hi ,Mimisss your code working great.but after that I think could we add one more thing ?
If all child of a parent are checked then the parent checked other wise not.and this thing I also want to do after page load.

Daniil
Jan 10, 2015, 12:21 PM
your code working great.but after that I think could we add one more thing ?
If all child of a parent are checked then the parent checked other wise not.


It is still the same. You listen to the CheckChange event and check if all the children are checked or not. Then, if needed you check the parent node. It looks that it is already demonstrated in this thread, how to listen to the CheckChange event and how to check nodes. We encourage you to implement it by your own. If you cannot or have some more specific questions, we are here to help.


and this thing I also want to do after page load.

In this case you should bind an already proper data from server side.

matrixwebtech
Jan 12, 2015, 1:15 PM
Hi,danill


check if all the children are checked or not. Then, if needed you check the parent node. I do some code but I think I not going to right direction.


var onCheckColumnChange = function (obj, node) {
// console.log(node.childNodes.length)
if (!node.locked) {
node.locked = true;

if (node.hasChildNodes()) {

node.cascadeBy(function (childNode) {
childNode.set(obj.dataIndex, node.data[obj.dataIndex]);
});
}
}
node.locked = false;

//I add from here
var b = 0;
var chield = node.childNodes.length;
node.parentNode.eachChild(function (a,b) {

if (a.data[obj.dataIndex] == false) {

}
else {
b = b+1;

}
});
if (b == chield) {

console.log('chield ' + chield)
console.log('b ' + b)
}
}
but I think may be there are more easy way to achieve this.I am confused.co can you please give me some more hint.may functions I need to use.
If I can implement Tri-state checkboxes (CheckChildren=True) (http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/checkboxes/defaultcs.aspx) here,that would be great.

Daniil
Jan 13, 2015, 6:02 AM
I do some code but I think I not going to right direction.
but I think may be there are more easy way to achieve this.I am confused.

Please describe the problem in greater details.


If I can implement Tri-state checkboxes (CheckChildren=True) (http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/checkboxes/defaultcs.aspx) here,that would be great.

Thank you for the link. Unfortunately, there is no such the functionality built-in Ext.NET or ExtJS. Agree, it would awesome to have it.

matrixwebtech
Jan 13, 2015, 7:20 AM
Hi,I believe with Ext js also we can produce a tree view like telerik's example.for that I need more elaborate help.I set a logic in my mind please go trough if I am wrong please correct me .

1.I have a parameter obj in function ,this is checkbox object.on every click I checkbox check get the object's parent .


2. then get all child node of the parent and check out of child how many are checked if count is equal then check parent.

is my understanding is right ?please guide me .

Daniil
Jan 14, 2015, 3:04 PM
I believe with Ext js also we can produce a tree view like telerik's example.for that I need more elaborate help.

It is possible for sure. Another question how challenging is that. Though, it should not be too challenging.


I have a parameter obj in function ,this is checkbox object.

It should be a CheckColumn instance, no?


on every click I checkbox check get the object's parent

Not sure that I understand you, please elaborate/rephrase.


2. then get all child node of the parent and check out of child how many are checked if count is equal then check parent.

Yes, something like that.

matrixwebtech
Jan 16, 2015, 9:07 AM
Hi danill
Finally i do the functionality ,please review my code and suggest me is there any room for modification.and now you please help me with some css, for look and fill like Tri-state checkboxes (CheckChildren=True) (http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/checkboxes/defaultcs.aspx)
also after page load how I make the selection?

public class checkcolumnController : Controller
{
//
// GET: /checkcolumn/

public ActionResult Index()
{


return View();
}

private NodeCollection data()
{
List<module> mod = module.GenarateModule();
List<submodule> submod = submodule.GenarateSubModule();
List<menu> mnu = menu.GenarateMenu();
NodeCollection n = new NodeCollection();
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 = false;
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.Add(n_mod);

}

return n;
}
public ActionResult genaratemenuajax(string node)
{

if (node == "Root")
{
return this.Content(data().ToJson());
}

return new HttpStatusCodeResult((int)System.Net.HttpStatusCod e.BadRequest);
}


}
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 <= 3; 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;
}
}


@{
var X = Html.X();
}

<script>

var onCheckColumnChange = function (obj, node) {

if (!node.locked) {
node.locked = true;

if (node.hasChildNodes()) {

node.cascadeBy(function (childNode) {
childNode.set(obj.dataIndex, node.data[obj.dataIndex]);
});
}
}
node.locked = false;
rec(obj, node)


}

var rec = function (obj, node) {

var ichildCount = node.parentNode.childNodes.length;
var iCheckCount = 0;
node.parentNode.eachChild(function (scope, args) {
if (scope.data[obj.dataIndex] == true) {
iCheckCount++;
}
else if (scope.data[obj.dataIndex] == false) {
}
})

if (ichildCount == iCheckCount) {
node.parentNode.set(obj.dataIndex, true);
}
else {
node.parentNode.set(obj.dataIndex, false);
}
if (node.parentNode.internalId != "Root") {
rec(obj, node.parentNode)
}

}
</script>

@X.ResourceManager()
@( X.TreePanel()
.ID("tp")
.Title("Core Team Projects")
.Width(500)
.Height(300)
.Collapsible(true)
.UseArrows(true)
.RootVisible(false)
.MultiSelect(true)
.SingleExpand(false)
.FolderSort(true)
.Store
(
X.TreeStore()
.ID("ts")
.Root(X.Node().Expanded(true).NodeID("Root"))
.Proxy
(
X.AjaxProxy()
.Url(Url.Action("genaratemenuajax"))

)

.Model(
X.Model()
.Fields(
X.ModelField().Name("moduleid"),
X.ModelField().Name("submoduleid"),
X.ModelField().Name("menuid"),
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("Name")
.Flex(1)
.DataIndex("name")
,

X.CheckColumn()
.Text("P1")
.DataIndex("p1")
.Width(40)
.Editable(true)
.StopSelection(false)
.Listeners(l =>
{
l.CheckChange.Handler = "onCheckColumnChange(this, record);";
})
,

X.CheckColumn()
.Text("P2")
.DataIndex("p2")
.Width(40)
.Editable(true)
.StopSelection(false)
.Listeners(l =>
{
l.CheckChange.Handler = "onCheckColumnChange(this, record);";
})
,

X.CheckColumn()
.Text("P3")
.DataIndex("p3")
.Width(40)
.Editable(true)
.StopSelection(false)
.Listeners(l =>
{
l.CheckChange.Handler = "onCheckColumnChange(this, record);";
}),

X.CheckColumn()
.Text("P4")
.DataIndex("p4")
.Width(40)
.Editable(true)
.StopSelection(false)
.Listeners(l =>
{
l.CheckChange.Handler = "onCheckColumnChange(this, record);";
})


)

)

Daniil
Jan 16, 2015, 4:57 PM
please review my code and suggest me is there any room for modification.

That looks good.


and now you please help me with some css, for look and fill like Tri-state checkboxes (CheckChildren=True) (http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/checkboxes/defaultcs.aspx)

Using a TreePanel's Cls property you could apply some CSS class name on a TreePanel's HTML element. Using that class in CSS selectors would allow you to apply you CSS rules only on a specific TreePanel. Going further, you should investigate how a CheckColumn's CSS works currently. After that you might have an idea what CSS rules you should override. Also I would probably investigate the thing that works as you need. I mean the example that you refer to.


also after page load how I make the selection?

Sorry, I am not 100% sure what you mean.

matrixwebtech
Jan 16, 2015, 5:24 PM
Thanks for review code.so is there nothing to improve?may bay some inbuilt functions to do which I do manually in my code.

Sorry, I am not 100% sure what you mean.
that means ,I think you now get my point which I try to do.after a page load tree grid fill with data,I store only menu checked status in database and after page load I want all child of a parent is checked then also the parent get checked.

Dimitris
Jan 16, 2015, 5:34 PM
@matrixwebtech



I think you now get my point which I try to do.after a page load tree grid fill with data,I store only menu checked status in database and after page load I want all child of a parent is checked then also the parent get checked.

Don't forget you also want all children checked if their parent is checked.

So, what you really want is simply to keep record of all (both parent and child) the checked nodes in database.

When the tree is loaded you can easily check all nodes based on your database data. No magic needed here.
When the user uses the tree you can apply all the magic: check all children if their parent is checked and vice versa.

matrixwebtech
Jan 16, 2015, 5:46 PM
Hi @Mimisss

So, what you really want is simply to keep record of all (both parent and child) the checked nodes in database.
I use this tree grid for menu based user permission purpose .data base contains menuid ,and other permission columns there no column for module or sub-module that's why I can't save both parent and child .so that I think after populate(tree populate via ajax proxy) the tree grid if I do this process (which I do in check column checked change),that can help me.

Dimitris
Jan 17, 2015, 5:31 PM
OK, but you will need to repeat the same process when applying the permissions of a module or submodule elsewhere in your project, eventually.

matrixwebtech
Jan 17, 2015, 5:48 PM
Not clearly get you.can you please let me one thing?after page load I get menu checkbox checked or unchecked .so is it possible a back calculation with java script?

Dimitris
Jan 18, 2015, 8:48 AM
Let's get back to the problem at hand...

The following code will check/uncheck all children of a checked/unchecked parent and will check/uncheck a parent if all children are checked/unchecked.

Please, note that you have to apply same logic when the tree is loaded with data.




var onCheckChange = function (obj, node) {
console.log(node)

if (!node.locked) {
node.locked = true;

// if parent is checked/unchecked then check/uncheck all children, too
node.cascadeBy(function (childNode) {
childNode.set(obj.dataIndex, node.data[obj.dataIndex]);
});

// if all children are checked/unchecked then check/uncheck the parent, too
var status = node.data[obj.dataIndex];
node.bubble(function (n) {
var childNodes = this.childNodes;
var length = childNodes.length;
var allCheckStatus = true;

for (var i = 0; i < length; i++) {
if (childNodes[i].data[obj.dataIndex] != status) {
allCheckStatus = false;
break;
}
}

if (allCheckStatus) {
n.set(obj.dataIndex, node.data[obj.dataIndex]);
}
});
}
node.locked = false;
}

matrixwebtech
Jan 18, 2015, 9:50 AM
Thanks for minimize code with new approach.I try in Treestore


l.Load.Handler = "onCheckChange(this,node)";
the function called but check/uncheck a parent functionality not performing.

Dimitris
Jan 18, 2015, 11:13 AM
You said you only store the state of the parents in your database. So, when loading the tree you can only apply cascadeBy, which should be enough.

matrixwebtech
Jan 18, 2015, 7:04 PM
Hi,@Mimisss

You said you only store the state of the parents in your database.
No, I store only last child ,here menu.
http://forums.ext.net/showthread.php?50471-TreeGrid-Check-child-checkbox-with-parent-checkbox-checked&p=234681&viewfull=1#post234681

So, when loading the tree you can only apply cascadeBy, which should be enough.
Not get your clue.Its very helpful for me you do this with my example which post previously.

thankx

Dimitris
Jan 19, 2015, 5:38 AM
OK, you need to bubble instead of cascade. I think it should be done each time a leaf node is added to the tree with the leaf node passed as a parameter to the handler function...

matrixwebtech
Jan 19, 2015, 6:38 AM
Hi
I am bit confused and don't understand which handler to use ?so a mock up code sample will be appreciate .

Dimitris
Jan 19, 2015, 5:53 PM
There is the itemAppend handler with the node and it's index as params but further changes are required since the ChangeChange listener is applied to each of the P columns and different params are provided... May I suggest another option? What about adding the logic in code behind when the data are constructed?

matrixwebtech
Jan 19, 2015, 6:07 PM
May I suggest another option? What about adding the logic in code behind when the data are constructed?
I think this is not possible with current database structure.


There is the itemAppend handler with the node and it's index as params but further changes are required since the ChangeChange listener is applied to each of the P columns and different params are provided

If possible can you please elaborate this.some code sample is good for my understanding.

Dimitris
Jan 19, 2015, 8:27 PM
I think this is not possible with current database structure.
Why not? The following example demonstrates:



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;

namespace TreeGridMVC2._5.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}

private NodeCollection data()
{
List<module> mod = module.GenarateModule();
List<submodule> submod = submodule.GenarateSubModule();
List<menu> mnu = menu.GenarateMenu();
NodeCollection n = new NodeCollection();
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 = false;
n_mod.AttributesObject =
new moduleAttributes
{
moduleid = obj_mod.moduleid,
name = obj_mod.modulename,
p1 = false,
p2 = false,
p3 = false,
p4 = false
};

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 submoduleAttributes
{
submoduleid = obj_submodule.submoduleid,
name = obj_submodule.submodulename,
p1 = false,
p2 = false,
p3 = false,
p4 = false
};

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 menuAttributes
{
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);
}
BubbleToParent(n_submod);
n_mod.Children.Add(n_submod);

}
BubbleToParent(n_mod);
n.Add(n_mod);
}

return n;
}

private void BubbleToParent(Node parent)
{
bool allP1Checked = true;
bool allP2Checked = true;
bool allP3Checked = true;
bool allP4Checked = true;

foreach (Node child in parent.Children)
{
nodeAttributes attrb = (nodeAttributes)child.AttributesObject;
if (attrb.p1 != allP1Checked)
{
allP1Checked = false;
}
if (attrb.p2 != allP2Checked)
{
allP2Checked = false;
}
if (attrb.p3 != allP3Checked)
{
allP3Checked = false;
}
if (attrb.p4 != allP4Checked)
{
allP4Checked = false;
}
}

nodeAttributes subAttrb = (nodeAttributes)parent.AttributesObject;
subAttrb.p1 = allP1Checked;
subAttrb.p2 = allP2Checked;
subAttrb.p3 = allP3Checked;
subAttrb.p4 = allP4Checked;
}

public ActionResult genaratemenuajax(string node)
{

if (node == "Root")
{
return this.Content(data().ToJson());
}

return new HttpStatusCodeResult((int)System.Net.HttpStatusCod e.BadRequest);
}
}

public class nodeAttributes
{
public string name { get; set; }
public bool p1 { get; set; }
public bool p2 { get; set; }
public bool p3 { get; set; }
public bool p4 { get; set; }
}

public class moduleAttributes : nodeAttributes
{
public int moduleid { get; set; }
}

public class submoduleAttributes : nodeAttributes
{
public int submoduleid { get; set; }
}

public class menuAttributes : nodeAttributes
{
public int menuid { get; set; }
}

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();
if (i % 2 == 0) v.p1 = true; // just to check out everything works
v.p2 = false;
v.p3 = true;
v.p4 = true;
l.Add(v);

}
}
return l;
}
}
}

matrixwebtech
Jan 20, 2015, 4:55 PM
Hi @Mimisss
Thanks for your beautiful code .I am not aware of that.but I think http://forums.ext.net/showthread.php?50471-TreeGrid-Check-child-checkbox-with-parent-checkbox-checked&p=234931&viewfull=1#post234931 in this post we need to add a else also.



if (allCheckStatus) {
n.set(obj.dataIndex, node.data[obj.dataIndex]);
}
else {
n.set(obj.dataIndex, false);
}

If we not add the else part then I see parent check boxes are checked when all children are checked but not unchecked when a child unchecked .please correct me if I wrong.
I will post full sample very soon may be tomorrow.

Dimitris
Jan 20, 2015, 5:04 PM
Both the javascript and the C# code presented in the previous posts work as intended. That is, when a parent is checked or unckecked all children are checked or unchecked, too. When all children are checked or unchecked then a parent is checked or unchecked.

Please, feel free to modify the code to suit your specific needs. Various checking / unchecking schemes are possible and you do have the basis to implement them.

matrixwebtech
Jan 21, 2015, 12:02 PM
Hi,
I see for check box unchecked .x-grid-checkheader ,and for checked .x-grid-checkheader x-grid-checkheader-checked this 2 css class is responsible ,so if I want so set a background image to the check boxes for checked/unchecked how I change this css dynamically ?please give me some clue.

Dimitris
Jan 21, 2015, 4:56 PM
This thread has already expanded to answer three different questions. The last question really belongs to a new thread even though I am not sure what's the point of a checkbox with a background image.

matrixwebtech
Jan 21, 2015, 5:18 PM
Yes.please close this tread ,I will post a new question .Thank you very much for all your help.