jQuery UI Widgets › Forums › Grid › Selecting Columns

Tagged: , , , , , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Selecting Columns Posts
  • February 5, 2015 at 2:15 pm Selecting Columns #66628

    Cilex
    Participant

    Hi,

    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 !

    Fred

    February 6, 2015 at 7:37 am Selecting Columns #66676

    Dimitar
    Participant

    Hello Fred,

    Here is an approach that may work for you:

    <!DOCTYPE html>
<html lang="en">
<head>
    <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
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: initialColumns
            });

            $('#addUnitsInStock').jqxButton();

            $('#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;
                            data.push(newRecord);
                        }
                        return data;
                    }
                });

                initialColumns.push({ text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100 });

                $("#jqxgrid").jqxGrid({ source: newDataAdapter, columns: initialColumns });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <button id="addUnitsInStock" style="margin-top: 10px;">
            Add "Units In Stock" column</button>
    </div>
</body>
</html>

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.