Integration with Zurb Foundation 4

[kayakerinmeMember]

Not sure which side of the fence this should be on but I’ll try here. I am trying to use the jqxGrid on a page with Zurb Foundation 4 enabled. I had copied one of the grid examples and have this working on a page that does not have the Foundation on it. However, when I add the working code to the page with the foundation, I get an error on this line:

var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function (xhr, status, error) {
alert(error);

In Visual Studio I get an unhandled exception:
0x800a138f – JavaScript runtime error: Unable to get property ‘dataAdapter’ of undefined or null reference

I’ve tried reversing the library references so jqxgrid comes first, or foundation first. When Foundation is first, I receive an exception trhwon from this part of the foundation.js:

if (typeof jQuery === “undefined” &&
typeof Zepto === “undefined” &&
typeof $ === “function”) {
libFuncName = $;
} else if (typeof jQuery === “function”) {
libFuncName = jQuery;
} else if (typeof Zepto === “function”) {
libFuncName = Zepto;
} else {
throw new TypeError();
}

How can I make these tools work together?

[Peter StoevKeymaster]

Hi kayakerinme,

If you experience a conflict between jQuery and another library, please see: http://api.jquery.com/jQuery.noConflict/

Best Regards,
Peter Stoev

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

[kayakerinmeMember]

Sorry, you’re dealing with a javascript moron. I’ve added $.noConflict(); before the grid code but still getting the runtime error.

In jqWidgets, what does the $ alias?

[Peter StoevKeymaster]

Hi kayakerinme,

$ is used by jQuery. Sometimes it is used by other JavaScript libraries, too. All jqx widgets are implemented as jQuery functions and in general it does not matter whether you use $ or something else. The important thing is jQuery to has no conflicts with other libraries.

jQuery.noConflict();
(function($) {
  $(function() {
      // Initialize Widgets here.
  });
})(jQuery);
// other code using $ as an alias to the other library

Best Regards,
Peter Stoev

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

[Sibeesh VenuParticipant]

Hi Peter ,

I am also experiencing the same issue. And i have followed what you said above. Bur still issue remains.

  @*JQX Grid needed implementation  starts here*@                                

                                var varDataFields = '[';
                                var varDataColumns = '[';
                                var typ = 'string';
                                var align = 'center';
                                debugger;

                                jQuery.noConflict();
                                (function ($) {
                                    $(function () {
                                        // Initialize Widgets here.

                                        var myColumns = $("#YearlyGridReport thead th.titleTopLockedCell");
                                        for (var j = 0; j < myColumns.length; j++) {
                                            var column = myColumns[j];
                                            var col = $(column).text();
                                            //col = col.replace('<span>', '');
                                            //col = col.replace('</span>', '');
                                            //var col = $(columns).find('th:get(' + j + ').find(' < span > ').text()');
                                            if (!col == '') {
                                                varDataFields = varDataFields + ' { name: ' + "'" + col + "'" + ', type : ' + "'" + typ + "'" + '},';
                                                varDataColumns = varDataColumns + ' { text: ' + "'" + col + "'" + ', dataField: ' + "'" + col + "'" + ', align: ' + "'" + align + "'" + ', width : 200' + '},';
                                            }

                                            if (j == myColumns.length - 1) {
                                                varDataFields = varDataFields.slice(0, -1);
                                                varDataColumns = varDataColumns.slice(0, -1)
                                            }
                                        }
                                        varDataFields = varDataFields + ']';
                                        varDataColumns = varDataColumns + ']';

                                        var rows = $("#YearlyGridReport tbody tr");
                                        // select columns.
                                        var columns = $("#table thead th");
                                        var data = [];
                                        for (var i = 0; i < rows.length; i++) {
                                            var row = rows[i];
                                            var datarow = {};
                                            for (var j = 0; j < columns.length; j++) {
                                                // get column's title.
                                                var columnName = $.trim($(columns[j]).text());
                                                // select cell.
                                                var cell = $(row).find('td:eq(' + j + ')');
                                                datarow[columnName] = $.trim(cell.text());
                                            }
                                            data[data.length] = datarow;
                                        }

                                        var source =
                                        {
                                            localdata: data,
                                            datafields: varDataFields,
                                            //        [
                                            //            { name: "First Name", type: "string" },
                                            //            { name: "Last Name", type: "string" },
                                            //            { name: "Product", type: "string" },
                                            //            { name: "Available", type: "string" },
                                            //            { name: "Ship Date", type: "date", format: 'MM/dd/yyyy' },
                                            //            { name: "Quantity", type: "number" },
                                            //            { name: "Price", type: "number" }
                                            //        ],
                                            datatype: "array"
                                        };

                                        var addfilter = function () {
                                            var filtergroup = new $.jqx.filter();

                                            var filter_or_operator = 1;
                                            var filtervalue = '';
                                            var filtercondition = 'contains';
                                            var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

                                            filtervalue = '';
                                            filtercondition = 'contains';
                                            var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

                                            filtergroup.addfilter(filter_or_operator, filter1);
                                            filtergroup.addfilter(filter_or_operator, filter2);
                                            // add the filters.
                                            $("#jqxgrid").jqxGrid('addfilter', '', filtergroup);
                                            // apply the filters.
                                            $("#jqxgrid").jqxGrid('applyfilters');
                                        }
                                        var dataAdapter = new $.jqx.dataAdapter(source);

                                        //          var tab = $("#dataTable").jqxDataTable(
                                        //{
                                        //    width: 1200,
                                        //    source: dataAdapter,
                                        //    filterable: true,
                                        //    sortable: true,
                                        //    autoshowfiltericon: true,
                                        //    columns: [
                                        //{ text: 'First Name', datafield: 'firstname', width: 200 },
                                        //                  { text: 'Last Name', datafield: 'lastname', width: 200 },
                                        //                  { text: 'Product', datafield: 'productname', width: 180 },
                                        //                  { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
                                        //                  { text: 'Quantity', datafield: 'quantity', cellsalign: 'right' }
                                        //    ]
                                        //});

                                        $("#jqxgrid").jqxGrid(
                                        {
                                            width: 1200,
                                            source: dataAdapter,
                                            filterable: true,
                                            sortable: true,
                                            autoshowfiltericon: true,
                                            ready: function () {
                                                addfilter();
                                                var localizationObject = {
                                                    filterstringcomparisonoperators: ['contains', 'does not contain'],
                                                    // filter numeric comparison operators.
                                                    filternumericcomparisonoperators: ['less than', 'greater than'],
                                                    // filter date comparison operators.
                                                    filterdatecomparisonoperators: ['less than', 'greater than'],
                                                    // filter bool comparison operators.
                                                    filterbooleancomparisonoperators: ['equal', 'not equal']
                                                }
                                                $("#jqxgrid").jqxGrid('localizestrings', localizationObject);
                                            },
                                            updatefilterconditions: function (type, defaultconditions) {
                                                var stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN'];
                                                var numericcomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
                                                var datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
                                                var booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
                                                switch (type) {
                                                    case 'stringfilter':
                                                        return stringcomparisonoperators;
                                                    case 'numericfilter':
                                                        return numericcomparisonoperators;
                                                    case 'datefilter':
                                                        return datecomparisonoperators;
                                                    case 'booleanfilter':
                                                        return booleancomparisonoperators;
                                                }
                                            },
                                            updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
                                             columnfilter, filtertype, filterconditions) {
                                                var index1 = 0;
                                                var index2 = 0;
                                                if (columnfilter != null) {
                                                    var filter1 = columnfilter.getfilterat(0);
                                                    var filter2 = columnfilter.getfilterat(1);
                                                    if (filter1) {
                                                        index1 = filterconditions.indexOf(filter1.comparisonoperator);
                                                        var value1 = filter1.filtervalue;
                                                        filterinputfield1.val(value1);
                                                    }

                                                    if (filter2) {
                                                        index2 = filterconditions.indexOf(filter2.comparisonoperator);
                                                        var value2 = filter2.filtervalue;
                                                        filterinputfield2.val(value2);
                                                    }
                                                }

                                                filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
                                                filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
                                            }
                                            ,
                                            columns: varDataColumns
                                            //[
                                            //            { text: 'First Name', dataField: 'First Name', align: 'center', width: 130 },
                                            //            { text: 'Last Name', dataField: 'Last Name', align: 'center', width: 130 },
                                            //            { text: 'Product', dataField: 'Product', align: 'center', width: 170 },
                                            //            { text: 'Available', dataField: 'Available', columntype: 'checkbox', align: 'center', width: 90 },
                                            //            { text: 'Ship Date', dataField: 'Ship Date', align: 'center', cellsformat: 'd', width: 100 },
                                            //            { text: 'Quantity', dataField: 'Quantity', align: 'center', cellsalign: 'right', width: 100 },
                                            //            { text: 'Price', dataField: 'Price', align: 'right', cellsalign: 'right', cellsformat: "c2" }
                                            //]

                                            //[{ text: 'January', datafield: 'January', width: 200 },
                                            //    { text: 'February', datafield: 'February', width: 200 },
                                            //    { text: 'March', datafield: 'March', width: 200 },
                                            //    { text: 'April', datafield: 'April', width: 200 },
                                            //    { text: 'May', datafield: 'May', width: 200 },
                                            //    { text: 'June', datafield: 'June', width: 200 },
                                            //    { text: 'July', datafield: 'July', width: 200 }]
                                        });

                                        $('#events').jqxPanel({ width: 300, height: 80 });

                                        $("#jqxgrid").on("filter", function (event) {
                                            $("#events").jqxPanel('clearcontent');
                                            var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');

                                            var eventData = "Triggered 'filter' event";
                                            for (i = 0; i < filterinfo.length; i++) {
                                                var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
                                                $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
                                            }
                                        });

                                        $('#clearfilteringbutton').jqxButton({ theme: theme });
                                        $('#filterbackground').jqxCheckBox({ checked: true, height: 25 });
                                        $('#filtericons').jqxCheckBox({ checked: false, height: 25 });
                                        // clear the filtering.
                                        $('#clearfilteringbutton').click(function () {
                                            $("#jqxgrid").jqxGrid('clearfilters');
                                        });
                                        // show/hide filter background
                                        $('#filterbackground').on('change', function (event) {
                                            $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
                                        });
                                        // show/hide filter icons
                                        $('#filtericons').on('change', function (event) {
                                            $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
                                        });
                                    });
                                })(jQuery);

                                @*JQX Grid needed implementation ends here*@  

[Peter StoevKeymaster]

There is documentation about using jQWidgets in NoConflict mode. You can find the jQuery Basics help topic on our docs page in order to learn how to use it.

[Author]

Posts