Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
190
igGrid does not display data rows after upgrading jQuery (3.3.1) + jQuery UI (1.12.1)
posted

Hello,

As part of a security audit, we are tasked with bringing our external js libraries in to compliance with known vulnerabilities. It appears that even with the 2018.2 version of the Ignite UI controls, the igGrid no longer works as expected. We are using 2016.1 in production and the issue is the same in both cases.

I can see in my console log that our JSON data is present and available for binding, as shown in the console when logging in the dataBound and dataRendered events:

<!-- Target element for the igGrid -->
            <table id="gridBeforeEntities">
            </table>

            <script type="text/javascript">
                var beforeEntities = null;
                var beforeLength = 0;
                $(function () {
                    $("#gridBeforeEntities").igGrid({
                        dataSource: beforeEntities,
                        primaryKey: "EntityID",
                        width: "1050px",
                        height: "auto",
                        autoGenerateColumns: false,
                        showFooter: false,
                        columns: [
                            { headerText: "", key: "EntityID", dataType: "number", hidden: true, cssClass: "gridColumn" },
                            { headerText: "Entity Name", key: "EntityName", dataType: "string", width: "24%", ColumnCssClass: "gridColumn" },
                            { headerText: "", key: "Address", dataType: "object", hidden: true },
                            { headerText: "Address", key: "BuiltAddress", dataType: "string", width: "30%", ColumnCssClass: "gridColumn", unbound: true },
                            { headerText: "Insurance Carrier", key: "CarrierName", dataType: "string", width: "19%", ColumnCssClass: "gridColumn" },
                            { headerText: "Policy Number", key: "PolicyNumber", dataType: "string", width: "14%", ColumnCssClass: "gridColumn" },  <%-- [15219] VJG :: 2018.03.23 - Adding Return Processing; Cleaned up buttons --%>
                            { headerText: "Actions", key: "buttons", width: "13%", dataType: "object", template: "<td class='gridColumnNumeric'><a href='#' onclick='entityID=${EntityID};populateForm(entityID);beforeAfter=true; showForm(beforeAfter);' class='btn btn-primary btn-sm editbtn'>Edit</a>&nbsp;<a href='#' onclick='deleteRow(${EntityID}, true);' class='btn btn-primary btn-sm deletebtn'>Delete</a></td>" }
                        ],
                        features: [
                            {
                                name: "Selection"
                            }
                        ],
                        dataBound: function (evt, ui) {                            
                            var i, grid = ui.owner,
                                data = grid.dataSource.data();
                            console.log(data);
                            for (i = 0; i < data.length; i++) {
                                data[i]["BuiltAddress"] = data[i].Address.Address1 + ' ' + data[i].Address.City + ', ' + data[i].Address.State + ' ' + data[i].Address.Zip + (data[i].Address.ZipPlusFour != '' ? '-' + data[i].Address.ZipPlusFour : '');
                            }
                        },
                        dataRendered: function (evt, ui) {                            
                            var grid = ui.owner, data = grid.dataSource.data();
                            console.log(data);
                            if (beforeEntities) {
                                beforeLength = data.length;
                                if (data.length == 0) {
                                    entityID = 0;
                                    clearForm();
                                    showForm(true);
                                }
                            }
                        }
                    });
                });

                function appendBeforeAddRow() {
                    var bTemplate = "<tr class='footerRow'><td align='right' colspan='5' class='nothing' style='padding: 4px;'><a href='#' onclick='entityID=0; clearForm(); beforeAfter=true; showForm(beforeAfter);' class='btn btn-primary btn-sm'>Add Entity</a></td></tr>";
                    $("#gridBeforeEntities > tbody").after(bTemplate);
                }
            </script>

Can you please tell me if there is something else that needs to be done to the igGrid or supporting libraries to fix this issue? 

Thank you,

Michael