ag-grid-snipplets/Camunda Grid.html at main · lunarud/ag-grid-snipplets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Camunda Grid</title>
    <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
    <style>
        #myGrid {
            height: 600px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="myGrid" class="ag-theme-alpine"></div>

    <script>
        // Master grid column definitions
        const columnDefs = [
            { field: "name", headerName: "Process Name", sortable: true, filter: true },
            { field: "key", headerName: "Process Key", sortable: true, filter: true },
            { field: "version", headerName: "Version", sortable: true, filter: true }
        ];

        // Detail grid column definitions
        const detailColumnDefs = [
            { field: "name", headerName: "Task Name", sortable: true, filter: true },
            { field: "assignee", headerName: "Assignee", sortable: true, filter: true },
            { field: "created", headerName: "Created", sortable: true, filter: true }
        ];

        // Grid options
        const gridOptions = {
            columnDefs: columnDefs,
            rowData: [],
            masterDetail: true,
            detailCellRendererParams: {
                detailGridOptions: {
                    columnDefs: detailColumnDefs,
                    rowData: []
                },
                getDetailRowData: function(params) {
                    // Request tasks for the selected process definition
                    window.webkit.messageHandlers.fetchTasks.postMessage(params.data.id);
                    params.successCallback([]); // Initially empty, updated via callback
                }
            },
            onGridReady: function(params) {
                params.api.sizeColumnsToFit();
            }
        };

        // Initialize grid
        const gridDiv = document.querySelector('#myGrid');
        new agGrid.Grid(gridDiv, gridOptions);

        // Function to update master grid data
        window.updateProcessDefinitions = function(data) {
            gridOptions.api.setRowData(JSON.parse(data));
        };

        // Function to update detail grid data
        window.updateTasks = function(processId, tasks) {
            gridOptions.api.forEachNode(function(node) {
                if (node.data.id === processId) {
                    node.setDataValue('detail', JSON.parse(tasks));
                    node.detailGridInfo.api.setRowData(JSON.parse(tasks));
                }
            });
        };
    </script>
</body>
</html>