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

[matrixwebtech]

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

[Daniil]

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]

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]

The answer should be in the node API.
http://docs.sencha.com/extjs/4.2.1/#....NodeInterface

[Dimitris]

Hmm,

This is an interesting question...

Assuming the treegrid (I am using the https://examples2.ext.net/#/TreePane...nced/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]

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?

[Dimitris]

Sorry, it should be record instead of node. Can you please try it?

[matrixwebtech]

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]

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]

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.