Load JQX Grid with Datatable intead of Json

[Sibeesh VenuParticipant]

For more info :

I am creating the fields like the following .

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

                               
                                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 + ']';

[DimitarParticipant]

Hi Sibeesh,

1) Please provide us with a sample dynamically generated HTML table and all your JavaScript code regarding it so that we can test and determine what is the matter.

2) You can easily add sorting and filtering to the Columns Hierarchy by setting sortable and filterable to true (these require the addition of the files jqxgrid.sort.js and jqxgrid.filter.js).

Best Regards,
Dimitar

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

[Sibeesh VenuParticipant]

Hi Dimitar,

Thanks a lot for the reply. Please find my dynamically generated HTML table and jquery codes.

HTML Table

<table Id="YearlyGridReport" class="display">
	<thead>
		<tr>
			<th><span> </span></th><th class="titleTopLockedCell"><span>January</span></th><th class="titleTopLockedCell"><span>February</span></th><th class="titleTopLockedCell"><span>March</span></th><th class="titleTopLockedCell"><span>April</span></th><th class="titleTopLockedCell"><span>May</span></th><th class="titleTopLockedCell"><span>June</span></th><th class="titleTopLockedCell"><span>July</span></th><th class="titleTopLockedCell"><span>August</span></th><th class="titleTopLockedCell"><span>September</span></th><th class="titleTopLockedCell"><span>October</span></th><th class="titleTopLockedCell"><span>November</span></th><th class="titleTopLockedCell"><span>December</span></th><th class="titleTopLockedCell"><span>January</span></th><th class="titleTopLockedCell"><span>February</span></th><th class="titleTopLockedCell"><span>March</span></th><th class="titleTopLockedCell"><span>April</span></th><th class="titleTopLockedCell"><span>May</span></th><th class="titleTopLockedCell"><span>June</span></th><th class="titleTopLockedCell"><span>July</span></th><th class="titleTopLockedCell"><span>August</span></th><th class="titleTopLockedCell"><span>September</span></th><th class="titleTopLockedCell"><span>October</span></th><th class="titleTopLockedCell"><span>November</span></th><th class="titleTopLockedCell"><span>December</span></th><th class="titleTopLockedCell"><span>January</span></th><th class="titleTopLockedCell"><span>February</span></th><th class="titleTopLockedCell"><span>March</span></th><th class="titleTopLockedCell"><span>April</span></th><th class="titleTopLockedCell"><span>May</span></th><th class="titleTopLockedCell"><span>June</span></th><th class="titleTopLockedCell"><span>July</span></th><th class="titleTopLockedCell"><span>August</span></th><th class="titleTopLockedCell"><span>September</span></th><th class="titleTopLockedCell"><span>October</span></th><th class="titleTopLockedCell"><span>November</span></th><th class="titleTopLockedCell"><span>December</span></th>
		</tr>
	</thead><tbody>
		<tr>
			<td class="titleLeftLockedCell"><span>Utilization</span></td><td class="valueCell"><span>175</span></td><td class="valueCell"><span>156</span></td><td class="valueCell"><span>193</span></td><td class="valueCell"><span>329</span></td><td class="valueCell"><span>457</span></td><td class="valueCell"><span>454</span></td><td class="valueCell"><span>591</span></td><td class="valueCell"><span>639</span></td><td class="valueCell"><span>718</span></td><td class="valueCell"><span>1,766</span></td><td class="valueCell"><span>1,479</span></td><td class="valueCell"><span>1,567</span></td><td class="valueCell"><span>79,789</span></td><td class="valueCell"><span>73,181</span></td><td class="valueCell"><span>80,644</span></td><td class="valueCell"><span>84,380</span></td><td class="valueCell"><span>86,833</span></td><td class="valueCell"><span>86,375</span></td><td class="valueCell"><span>95,268</span></td><td class="valueCell"><span>88,666</span></td><td class="valueCell"><span>91,033</span></td><td class="valueCell"><span>101,824</span></td><td class="valueCell"><span>71,788</span></td><td class="valueCell"><span>69,826</span></td><td class="valueCell"><span>38,320</span></td><td class="valueCell"><span>27,810</span></td><td class="valueCell"><span>27,197</span></td><td class="valueCell"><span>24,347</span></td><td class="valueCell"><span>20,772</span></td><td class="valueCell"><span>20,225</span></td><td class="valueCell"><span>18,320</span></td><td class="valueCell"><span>14,314</span></td><td class="valueCell"><span>8,581</span></td><td class="valueCell"><span>3,742</span></td><td class="valueCell"><span>2,019</span></td><td class="valueCell"><span>1,634</span></td>
		</tr>
	</tbody>
</table>

Jquery

@*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*@  

Please do the needful

Kindest Regards
Sibeesh

[Sibeesh VenuParticipant]

And these are the files i have included

    @*JQX Grid needed files starts here*@ 
    <link rel="stylesheet" href="~/JQX%20Items/jqwidgets/styles/jqx.base.css" type="text/css" />     
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="~/JQX%20Items/jqwidgets/scripts/demos.js"></script>    
    <script src="~/JQX%20Items/jqwidgets/jqxdatatable.js"></script>
    
    @*JQX Grid needed files ends here*@ 

[Sibeesh VenuParticipant]

Hi,

I have populate data from a dynamic HTML table.

But now the issue i am facing is , the JQX grid is not allowing the duplicate header , lets say what if we have data from Jan 2013, and Jan 2014? Is there any way to do this?

Thanks And Regards
Sibeesh

[DimitarParticipant]

Hi Sibeesh,

The column datafields cannot be the same, but their text can. I suggest you store “January2013”, “January2014”, etc. but later remove the last four characters (the year) in the columns’ text, i.e.:

if (!(col == '')) {
    varDataFields = varDataFields + ' { name: ' + "'" + col + "'" + ', type : ' + "'" + typ + "'" + '},';
    varDataColumns = varDataColumns + ' { text: ' + "'" + col.slice(0, col.length - 4) + "'" + ', dataField: ' + "'" + col + "'" + ', align: ' + "'" + align + "'" + ', width : 200' + '},';
}

Also note the if condition – I think this is more correct in your case.

Best Regards,
Dimitar

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

[Author]

Posts