jQuery UI Widgets › Forums › TreeGrid › Can someone explain: TreeGrid? Thanks!

This topic contains 1 reply, has 2 voices, and was last updated by  admin 6 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Can someone explain: TreeGrid? Thanks! Posts
  • August 26, 2025 at 7:04 am Can someone explain: TreeGrid? Thanks! #136148

    pedro_barbosa
    Participant

    How do I listen for and handle row selection events in jqxTreeGrid with jQuery?

    August 26, 2025 at 7:51 am Can someone explain: TreeGrid? Thanks! #136155

    admin
    Keymaster

    Hi,

    In jqxTreeGrid, row selection events can be handled using the built-in event system. The key event you’ll want is rowSelect (and sometimes rowUnselect or rowClick, depending on your needs).

    Here’s how you do it:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jqxTreeGrid Row Selection</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script src="scripts/jquery-1.12.4.min.js"></script>
    <script src="jqwidgets/jqxcore.js"></script>
    <script src="jqwidgets/jqxdata.js"></script>
    <script src="jqwidgets/jqxtreegrid.js"></script>
</head>
<body>
    <div id="treeGrid"></div>

    <script>
        $(document).ready(function () {
            // Sample data
            var data = [
                {
                    "id": 1, "name": "Project A", "duration": "5 days", "children": [
                        { "id": 2, "name": "Task 1", "duration": "2 days" },
                        { "id": 3, "name": "Task 2", "duration": "3 days" }
                    ]
                },
                {
                    "id": 4, "name": "Project B", "duration": "4 days", "children": [
                        { "id": 5, "name": "Task 3", "duration": "1 day" },
                        { "id": 6, "name": "Task 4", "duration": "3 days" }
                    ]
                }
            ];

            // Prepare data source
            var source = {
                dataType: "json",
                dataFields: [
                    { name: "id", type: "number" },
                    { name: "name", type: "string" },
                    { name: "duration", type: "string" },
                    { name: "children", type: "array" }
                ],
                hierarchy: {
                    root: "children"
                },
                id: "id",
                localData: data
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // Initialize TreeGrid
            $("#treeGrid").jqxTreeGrid({
                width: 600,
                source: dataAdapter,
                pageable: true,
                columns: [
                    { text: "Name", dataField: "name", width: 300 },
                    { text: "Duration", dataField: "duration", width: 300 }
                ]
            });

            //  Row select event
            $("#treeGrid").on('rowSelect', function (event) {
                var args = event.args;
                var row = args.row;
                console.log("Selected row ID:", row.id);
                console.log("Selected row data:", row);
                alert("You selected: " + row.name + " (" + row.duration + ")");
            });

            //  Optional: row unselect
            $("#treeGrid").on('rowUnselect', function (event) {
                var args = event.args;
                console.log("Unselected row ID:", args.row.id);
            });

            //  Optional: row click (fires before select)
            $("#treeGrid").on('rowClick', function (event) {
                console.log("Row clicked:", event.args.row);
            });
        });
    </script>
</body>
</html>

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.