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

Page 1 of 4 123 ... LastLast
  1. #1

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

    Hi,
    In this Post http://forums.ext.net/showthread.php...l=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.



    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
    Attached Thumbnails tg-4.png  
    Last edited by Daniil; Jan 21, 2015 at 4:46 PM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    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.
  4. #4
    The answer should be in the node API.
    http://docs.sencha.com/extjs/4.2.1/#....NodeInterface
  5. #5
    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...
    Last edited by Dimitris; Jan 08, 2015 at 2:35 PM.
  6. #6
    Hi @Mimisss,thanks.
    But this is not working with my sample http://forums.ext.net/showthread.php...l=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?
  7. #7
    Sorry, it should be record instead of node. Can you please try it?
  8. #8
    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.
  9. #9
    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>
  10. #10
    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.
Page 1 of 4 123 ... 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