Add new column when user wants - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: add, column, columns, dynamically, grid, jqxgrid, programmatically, remove

This topic contains 5 replies, has 2 voices, and was last updated by gonley 10 years, 6 months ago.

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

Author

Add new column when user wants Posts

October 3, 2014 at 4:54 am Add new column when user wants #60572

gonley

Participant

I try to do something on the grid that the user can add or remove columns on grid as they want to based on the user demands. Is this jqxgrid possible able to achieve the requirements?

October 3, 2014 at 9:42 am Add new column when user wants #60590

Dimitar

Participant

Hello gonley,

This can be achieved by updating the columns property. Here is an example:

<!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.10.2.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: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };

            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }

            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            var columns = [
                { 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: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                { 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,
                editmode: 'dblclick',
                selectionmode: 'singlecell',
                columns: columns
            });

            $('#addColumn').click(function (event) {
                columns.push({ text: 'Product Name', datafield: 'ProductName', width: 250 });
                $("#jqxgrid").jqxGrid({ columns: columns });
                $("#jqxgrid").jqxGrid("render");
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <button id="addColumn">
        Add a column</button>
</body>
</html>

If you just want to show or hide columns, please refer to the demo Show/Hide Columns to see this functionality implemented.

Best Regards,
Dimitar

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

October 3, 2014 at 12:56 pm Add new column when user wants #60615

gonley

Participant

Ok, thx for your help. Furthermore, when a user wants to remove a specified column on the grid, the method above can also be applied on the removal purpose?

October 3, 2014 at 6:44 pm Add new column when user wants #60636

gonley

Participant

Is it possible to remove a specified column as user wants to?

October 6, 2014 at 6:27 am Add new column when user wants #60695

Dimitar

Participant

Hi gonley,

Yes, it is possible, you would only have to remove the column from the columns array via the standard JavaScript methods and call render afterwards.

Best Regards,
Dimitar

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

October 6, 2014 at 6:51 am Add new column when user wants #60700

gonley

Participant

Ok. I will try it out. Thanks.

Author

Posts

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

You must be logged in to reply to this topic.