jQuery UI Widgets Forums Grid Selecting Columns

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Selecting Columns #66628



    We’re plugging the Grid to a large table, with 30 columns (served by php server). At first load, we just send 5 or 6 columns; then the user should be able to add some more columns, and get them from the server. We don’t want to send all columns on first load and just hiding them.

    Can you offer any advice or examples about:
    – installing such a selector (a php request can prepare a json to enumerate the columns available to the current user)
    – getting the new data – ideally, it would be nice to send only the newest columns and add them, without sending the whole data again…

    Thanks in advance !


    Selecting Columns #66676


    Hello Fred,

    Here is an approach that may work for you:

    <!DOCTYPE html>
    <html lang="en">
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/products.xml";
                // prepare the data
                var source =
                    datatype: "xml",
                    datafields: [
                        { name: 'ProductName', type: 'string' },
                        { name: 'QuantityPerUnit', type: 'int' },
                        { name: 'UnitPrice', type: 'float' },
                        { name: 'Discontinued', type: 'bool' }
                    root: "Products",
                    record: "Product",
                    id: 'ProductID',
                    url: url
                var dataAdapter = new $.jqx.dataAdapter(source);
                var initialColumns = [
                    { text: 'Product Name', datafield: 'ProductName', width: 250 },
                    { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                    { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                    { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                // initialize jqxGrid
                    width: 850,
                    source: dataAdapter,
                    pageable: true,
                    autoheight: true,
                    sortable: true,
                    altrows: true,
                    enabletooltips: true,
                    editable: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns: initialColumns
                $('#addUnitsInStock').click(function () {
                    var newSource =
                        datatype: "xml",
                        datafields: [
                            { name: 'UnitsInStock', type: 'float' }
                        root: "Products",
                        record: "Product",
                        id: 'ProductID',
                        url: url
                    var newDataAdapter = new $.jqx.dataAdapter(newSource, {
                        beforeLoadComplete: function (records) {
                            var data = new Array();
                            for (var i = 0; i < records.length; i++) {
                                newRecord = {};
                                newRecord.ProductName = dataAdapter.records[i].ProductName;
                                newRecord.QuantityPerUnit = dataAdapter.records[i].QuantityPerUnit;
                                newRecord.UnitPrice = dataAdapter.records[i].UnitPrice;
                                newRecord.Discontinued = dataAdapter.records[i].Discontinued;
                                newRecord.UnitsInStock = records[i].UnitsInStock;
                            return data;
                    initialColumns.push({ text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 });
                    $("#jqxgrid").jqxGrid({ source: newDataAdapter, columns: initialColumns });
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            <button id="addUnitsInStock" style="margin-top: 10px;">
                Add "Units In Stock" column</button>

    Best Regards,

    jQWidgets team

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

You must be logged in to reply to this topic.