(MVC) TreeGrid with Checkbox selction and Editable Columns

  1. #1

    (MVC) TreeGrid with Checkbox selction and Editable Columns

    Can someone please point me to see a example implement of treeGrid which supports following features -

    1. CheckBox Selection
    2. All data Preloaded from the Model
    3. Editable Columns ( atleast one)
    4. Group Summary Row (nice to have)
  2. #2
    OK. Could able to manage to some extent myself. Now I am stuck at getting the checked nodes along with edited value at client side. I tried with Ext.getCmp('FunctionTree').getCheckedNodes() with no luck.

    Looking for expert advise -

    The tree in cshtml
    Html.X().TreePanel()
        .Title("FunctionTree")
        .Region(Region.Center)
        .Fields(
                Html.X().ModelField().Name("nodeText"),
                Html.X().ModelField().Name("name"),
                Html.X().ModelField().Name("amount").Type(ModelFieldType.Int)
        )
        .ColumnModel(
                Html.X().TreeColumn().DataIndex("nodeText").Width(280),
                Html.X().Column().DataIndex("name").Flex(1),
                Html.X().Column().DataIndex("amount").Editor(Html.X().NumberField())
        )            
        .Border(false)
        .Root(Html.X().Node().NodeID("0").Text("Root").Checked(false))
        .Listeners(l => { l.BeforeLoad.Fn = "nodeLoad"; })
        .Plugins(
            Html.X().CellEditing()
        )
    The loader function in javascript -

        var nodeLoad = function (store, operation, options) {
            var node = operation.node;
    
    
            App.direct.NodeLoad(node.getId(), {
                success: function (result) {
                    node.set('loading', false);
                    node.set('loaded', true);
                    node.appendChild(result);
                    node.expand();
                },
    
    
                failure: function (errorMsg) {
                    Ext.Msg.alert('Failure', errorMsg);
                }
            });
    
    
            return false;
        };

    The Action Method -

    [DirectMethod]
    public ActionResult NodeLoad(string node)
    {
        NodeCollection nodes = new Ext.Net.NodeCollection();
        if (!string.IsNullOrEmpty(node))
        {
            for (int i = 1; i < 6; i++)
            {
                Node asyncNode = new Node()
                {
                    NodeID = Guid.NewGuid().ToString(),
                    Text = "ChildNodeText1",
                    Checked = false,
                    AttributesObject = new { nodeText = "noteText"+i, name = "Name "+i, amount = i }
                };
                nodes.Add(asyncNode);
            }
        }
        return this.Direct(nodes);
    }
  3. #3
    Just to be clear on my issue - How can i get the selected/checked nodes along with edited value ?

    I tried with Ext.getCmp('FunctionTree').getCheckedNodes(), but that did not work.
  4. #4
    figured it out -

    var checked_nodes = Ext.getCmp('FunctionTree').getChecked();
            for (i = 0; i < checked_nodes.length; i++) {
                alert(checked_nodes[i].data.amount);
            }

Similar Threads

  1. [CLOSED] TreeGrid : Check child checkbox with parent checkbox checked
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 35
    Last Post: Jan 21, 2015, 4:18 PM
  2. [CLOSED] How to indicate editable columns
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 03, 2013, 5:29 PM
  3. [CLOSED] TreeGrid with editable checkboxes
    By Z in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 29, 2012, 8:50 AM
  4. [CLOSED] TreeGrid with editable columns
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 15, 2012, 12:00 PM
  5. Editable TreeGrid
    By rsaldanhabr in forum 1.x Help
    Replies: 1
    Last Post: Jan 19, 2011, 10:50 AM

Posting Permissions