jqueryjqwidgetjqxtreegrid

jqxTreeGrid rowClick and rowDoubleClick vs rowSelect


Why would the rowDoubleClick or rowClick event return a more robust object than the rowSelect?

For example rowDoubleClick

   $('#tree01').on('rowDoubleClick', function (event){
        var args = event.args;
        var row = args.row;
        var key = args.key;
        var dataField = args.dataField;
        var clickEvent = args.originalEvent;
    });

While rowSelect returns a "thinner" object.

    $('#tree01').on('rowSelect', function (event) {
        var args = event.args;
        var row = args.row;
        var key = args.key;
    });

As illustrated in the image below, the rowSelect excludes the parent object which includes records (its peers) and its parent.

enter image description here

My question is this...

How can I get the same object with a rowSelect as I do with rowClick? Can I programmatically force a rowClick via a rowSelect?


Solution

  • At the moment I didn't get any issue. After reading documentation and studying samples I never got a thinner object. I wish to share my little snippet in order to better understand your issue.

    The sequence of events is:

    1. rowClick
    2. rowDoubleClick
    3. rowSelect

    From the online documentation you can see that each event returns a row object. Such an object is null if the row is the root otherwise its value is the parent row's object. In any case you can always use the method:

    $("#treeGrid").jqxTreeGrid('getRow', event.args.key);
    

    The dataField instead is the column name so this value cannot be available in the select event.

    var employees = [
        {
            "EmployeeID": 2,
            "FirstName": "Andrew",
            "LastName": "Fuller",
            "Country": "USA",
            "Title": "Vice President, Sales",
            "HireDate": "1992-08-14 00:00:00",
            "BirthDate": "1952-02-19 00:00:00",
            "City": "Tacoma",
            "Address": "908 W. Capital Way",
            "expanded": "true",
            children: [
                {
                    "EmployeeID": 8,
                    "FirstName": "Laura",
                    "LastName": "Callahan",
                    "Country": "USA",
                    "Title": "Inside Sales Coordinator",
                    "HireDate": "1994-03-05 00:00:00",
                    "BirthDate": "1958-01-09 00:00:00",
                    "City": "Seattle",
                    "Address": "4726 - 11th Ave. N.E."
                },
                {
                    "EmployeeID": 1,
                    "FirstName": "Nancy",
                    "LastName": "Davolio",
                    "Country": "USA",
                    "Title": "Sales Representative",
                    "HireDate": "1992-05-01 00:00:00",
                    "BirthDate": "1948-12-08 00:00:00",
                    "City": "Seattle",
                    "Address": "507 - 20th Ave. E.Apt. 2A"
                },
                {
                    "EmployeeID": 3,
                    "FirstName": "Janet",
                    "LastName": "Leverling",
                    "Country": "USA",
                    "Title": "Sales Representative",
                    "HireDate": "1992-04-01 00:00:00",
                    "BirthDate": "1963-08-30 00:00:00",
                    "City": "Kirkland",
                    "Address": "722 Moss Bay Blvd."
                },
                {
                    "EmployeeID": 4,
                    "FirstName": "Margaret",
                    "LastName": "Peacock",
                    "Country": "USA",
                    "Title": "Sales Representative",
                    "HireDate": "1993-05-03 00:00:00",
                    "BirthDate": "1937-09-19 00:00:00",
                    "City": "Redmond",
                    "Address": "4110 Old Redmond Rd."
                },
                {
                    "EmployeeID": 5,
                    "FirstName": "Steven",
                    "LastName": "Buchanan",
                    "Country": "UK",
                    "Title": "Sales Manager",
                    "HireDate": "1993-10-17 00:00:00",
                    "BirthDate": "1955-03-04 00:00:00",
                    "City": "London",
                    "Address": "14 Garrett Hill",
                    "expanded": "true",
                    children: [
                        {
                            "EmployeeID": 6,
                            "FirstName": "Michael",
                            "LastName": "Suyama",
                            "Country": "UK",
                            "Title": "Sales Representative",
                            "HireDate": "1993-10-17 00:00:00",
                            "BirthDate": "1963-07-02 00:00:00",
                            "City": "London",
                            "Address": "Coventry House Miner Rd."
                        },
                        {
                            "EmployeeID": 7,
                            "FirstName": "Robert",
                            "LastName": "King",
                            "Country": "UK",
                            "Title": "Sales Representative",
                            "HireDate": "1994-01-02 00:00:00",
                            "BirthDate": "1960-05-29 00:00:00",
                            "City": "London",
                            "Address": "Edgeham Hollow Winchester Way"
                        },
                        {
                            "EmployeeID": 9,
                            "FirstName": "Anne",
                            "LastName": "Dodsworth",
                            "Country": "UK",
                            "Title": "Sales Representative",
                            "HireDate": "1994-11-15 00:00:00",
                            "BirthDate": "1966-01-27 00:00:00",
                            "City": "London",
                            "Address": "7 Houndstooth Rd."
                        }
                    ]
                }
            ]
        }
    ];
    // prepare the data
    var source =
    {
        dataType: "json",
        dataFields: [
            {name: 'EmployeeID', type: 'number'},
            {name: 'FirstName', type: 'string'},
            {name: 'LastName', type: 'string'},
            {name: 'Country', type: 'string'},
            {name: 'City', type: 'string'},
            {name: 'Address', type: 'string'},
            {name: 'Title', type: 'string'},
            {name: 'HireDate', type: 'date'},
            {name: 'children', type: 'array'},
            {name: 'expanded', type: 'bool'},
            {name: 'BirthDate', type: 'date'}
        ],
        hierarchy: {
            root: 'children'
        },
        id: 'EmployeeID',
        localData: employees
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // create Tree Grid
    $("#treeGrid").jqxTreeGrid({
        width: 550,
        height: 200,
        theme: "arctic",
        source: dataAdapter,
        sortable: true,
        columns: [
            {text: 'FirstName', dataField: 'FirstName', width: 200},
            {text: 'LastName', dataField: 'LastName', width: 120},
            {text: 'Title', dataField: 'Title', width: 160},
            {text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120},
            {text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120},
            {text: 'Address', dataField: 'Address', width: 250},
            {text: 'City', dataField: 'City', width: 120},
            {text: 'Country', dataField: 'Country'}
        ]
    });
    
    $('#treeGrid').on('rowDoubleClick', function (event) {
        var row = event.args.row;
        var parent = event.args.row.parent;
        var dataField = event.args.dataField;
        console.log('rowDoubleClick: (dataField is: ' +  dataField + ') row: ' + ((row != null) ? 'not null' : 'null') + ' parent: '  + ((parent != null) ? 'not null' : 'null'));
    });
    $('#treeGrid').on('rowClick', function (event) {
        var row = event.args.row;
        var parent = event.args.row.parent;
        var dataField = event.args.dataField;
        console.log('rowClick: (dataField is: ' +  dataField + ') row: ' + ((row != null) ? 'not null' : 'null') + ' parent: '  + ((parent != null) ? 'not null' : 'null'));
    });
    $('#treeGrid').on('rowSelect', function (event) {
        var row = event.args.row;
        var parent = event.args.row.parent;
        if (parent == null) {
            var parent = $("#treeGrid").jqxTreeGrid('getRow', event.args.key);
        }
    console.log('rowSelect: row: ' + ((row != null) ? 'not null' : 'null') + ' parent: '  + ((parent != null) ? 'not null' : 'null'));
    });
    $("#jqxbutton").jqxButton({
        theme: 'energyblue',
        height: 30
    });
    $('#jqxbutton').click(function () {
        $("#treeGrid").jqxTreeGrid('selectRow', 1);
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
    <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    
    <div id="treeGrid"></div>
    <input type="button" style="margin: 20px;" id="jqxbutton" value="Select row" />