jQuery UI Widgets Forums TreeGrid Dropdownbutton jqxtreegrid collapse on rowcheck

This topic contains 5 replies, has 2 voices, and was last updated by  Hristo 1 week, 1 day ago.

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

  • 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/


    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


    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.

    • This reply was modified 1 week, 5 days ago by  dan123.

    dan123
    Participant

    Never mind i got it. Thanks Hristo


    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.

    • This reply was modified 1 week, 4 days ago by  dan123.
    • This reply was modified 1 week, 4 days ago by  dan123.

    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

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

You must be logged in to reply to this topic.