[CLOSED] TreeGrid : Check child checkbox with parent checkbox checked

Page 2 of 4 FirstFirst 1234 LastLast
  1. #11
    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.
  2. #12
    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) here,that would be great.
    Last edited by matrixwebtech; Jan 13, 2015 at 4:01 AM.
  3. #13
    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) 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.
  4. #14
    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 .
  5. #15
    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.
  6. #16
    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)
    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.HttpStatusCode.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);";
    })
     
     
    )
     
    )
    Last edited by matrixwebtech; Jan 16, 2015 at 6:38 PM.
  7. #17
    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)
    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.
    Last edited by Daniil; Jan 16, 2015 at 3:58 PM. Reason: Please use [CODE] tags
  8. #18
    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.
  9. #19
    @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.
  10. #20
    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.
    Last edited by matrixwebtech; Jan 16, 2015 at 4:52 PM.
Page 2 of 4 FirstFirst 1234 LastLast

Similar Threads

  1. [CLOSED] Another way to check checkbox is checked ot not....
    By rosua in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 21, 2012, 5:39 AM
  2. [CLOSED] Check all checkbox for TreeGrid
    By bakardi in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 04, 2012, 7:25 AM
  3. Replies: 11
    Last Post: Mar 14, 2012, 10:12 AM
  4. Replies: 1
    Last Post: Aug 13, 2009, 9:37 AM
  5. Replies: 0
    Last Post: Jun 25, 2009, 12:16 PM

Posting Permissions