Dropdownbutton jqxtreegrid collapse on rowcheck - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 5 replies, has 2 voices, and was last updated by Hristo 4 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Dropdownbutton jqxtreegrid collapse on rowcheck Posts

January 21, 2020 at 5:37 pm Dropdownbutton jqxtreegrid collapse on rowcheck #107893

dan123

Participant

Hi i have this jqxtreegrid inside a dropdownbutton, where i add a rowCheck event where when it should select a checkbox right after selecting another checkbox.

Issue is that the jqxdropdownbutton collapses whenever i check any items.

Here is my jsfiddle:
https://jsfiddle.net/4y52mxoa/3/

January 22, 2020 at 9:26 am Dropdownbutton jqxtreegrid collapse on rowcheck #107898

Hristo

Participant

Hello dan123,

It is not correct the approach that you use the rowCheck event and into it use the checkRow method.
Which will throw an error because it goes in infinity loop and it throws an error – Maximum call stack size exceeded.
I would like to suggest you look at this example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">The jqxTreeGrid widget represents data in a tree-like structure. The Tree Grid widget supports multi column display of hierarchical data, data paging, sorting and filtering, data editing, columns resizing, fixed columns, conditional formatting, aggregates and rows selection.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <script type="text/javascript" src="../../scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var employees = [
                { "EmployeeID": 0, "FirstName": "All" },
                { "EmployeeID": 11111, "FirstName": "All" },
                { "EmployeeID": 222222, "FirstName": "All" },

                {
                    "EmployeeID": 2,
                    "FirstName": "Andrew",
                    children: [{
                        "EmployeeID": 8,
                        "FirstName": "Laura"
                    }, {
                        "EmployeeID": 1,
                        "FirstName": "Nancy"
                    }, {
                        "EmployeeID": 3,
                        "FirstName": "Janet"
                    }, {
                        "EmployeeID": 4,
                        "FirstName": "Margaret"
                    }]

                }, {
                    "EmployeeID": 5,
                    "FirstName": "Steven",
                    children: [{
                        "EmployeeID": 6,
                        "FirstName": "Michael"
                    }, {
                        "EmployeeID": 7,
                        "FirstName": "Robert"
                    }, {
                        "EmployeeID": 9,
                        "FirstName": "Anne"
                    }]
                }
            ];

            // prepare the data
            var source = {
                dataType: "json",
                dataFields: [{
                    name: "EmployeeID",
                    type: "number"
                }, {
                    name: "FirstName",
                    type: "string"
                }, {
                    name: "children",
                    type: "array"
                }],
                hierarchy: {
                    root: "children"
                },
                id: "EmployeeID",
                localData: employees
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            var isSubmitted = false;
            // create Tree Grid
            $("#treeGrid").jqxTreeGrid({
                width: "100%",
                height: 300,
                source: dataAdapter,
                sortable: true,
                //filterable: true,
                //filterMode: "simple",
                checkboxes: true,
                showHeader: false,
                //theme: "energyblue",
                showtoolbar: true,
                hierarchicalCheckboxes: true,
                columns: [{
                    text: "FirstName",
                    dataField: "FirstName"
                }],
                rendertoolbar: function (statusbar) {
                    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                    var addButton = $("<button>Submit</button>");
                    container.append(addButton);
                    statusbar.append(addButton);
                    addButton.jqxButton({ width: 60, height: 25 });
                    addButton.click(function (event) {
                        isSubmitted = true;
                        var checkedRows = $("#treeGrid").jqxTreeGrid('getCheckedRows');
                        var rowData = "";
                        for (var i = 0; i < checkedRows.length; i++) {
                            // get a row.
                            rowData += checkedRows[i].FirstName + ";";
                        }

                        $("#jqxdropdownbutton").jqxDropDownButton("setContent", rowData);
                        $("#jqxdropdownbutton").jqxDropDownButton("close");
                    });
                }
            });

            $("#jqxdropdownbutton").jqxDropDownButton({
                theme: "material", width: "100%", height: 40, dropDownWidth: "100%", dropDownHeight: 300
            });

            $("#jqxdropdownbutton").on("open", function (event) {
                isSubmitted = false;
            });

            $("#jqxdropdownbutton").on("close", function (event) {
                if (!isSubmitted) {
                    return false;
                }
            });
        });
    </script>
</head>
<body>
    <div id="jqxdropdownbutton">
        <div style="border-color: transparent;" id="treeGrid">
        </div>
    </div>
</body>
</html>

It is one suggestion on how to handle this case and how to prevent closing.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

March 23, 2020 at 5:11 pm Dropdownbutton jqxtreegrid collapse on rowcheck #111503

dan123

Participant

Hi Hristo,

I tried creating a ‘rowUncheck’ function, but its just hanging up the component. Basically whenever i uncheck a row it will set the content based on whichever other items are selected.

$(“#treeGrid”).on(‘rowUncheck’, function (event) {
var customerID = event.args.row.FirstName;
var len = records.length;
var newRecords = new Array();
var cnt = 0;

for (var i = 0; i < len; i++) {
var record = records[i];
if (record.FirstName != customerID) {
newRecords[cnt++] = records[i];
}
}

records = newRecords;

$(“#jqxdropdownbutton”).jqxDropDownButton(“setContent”, newRecords);

});

For example:
Row 1 selected
Row 2 unselected

set content on dropdown with Row 1.

March 23, 2020 at 5:19 pm Dropdownbutton jqxtreegrid collapse on rowcheck #111505

dan123

Participant

Never mind i got it. Thanks Hristo

March 24, 2020 at 3:23 am Dropdownbutton jqxtreegrid collapse on rowcheck #111522

dan123

Participant

Hi Hristo,

Sorry i forgot to ask one other thing that is how can i return only the parent element value of FirstName when doing rowCheck.

So if i select the parent element it should setcontent with parent element value. Example: Andrew, and not any children.
If i select any children elements, it should setcontent with the child element value only. Example: Gary, Tanner, and not any parent.

March 27, 2020 at 11:09 am Dropdownbutton jqxtreegrid collapse on rowcheck #111553

Hristo

Participant

Hello dan123,

The rowCheck event provides arguments and including row which is the currently selected row.
There you could find details about its parents and also, you could follow up on the hierarchy of the next level parents.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.