Adding Columns on the fly - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: add, column, dynamically, grid, jqxgrid

This topic contains 6 replies, has 5 voices, and was last updated by caflores 9 years, 3 months ago.

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

Author

Adding Columns on the fly Posts

May 13, 2013 at 8:03 pm Adding Columns on the fly #21077

Member

Hello,

Does someone know if it is possible do add columns dinamically on a grid? It can be through an array of column names, for instance.

Thank you

May 14, 2013 at 7:12 am Adding Columns on the fly #21110

Dimitar

Participant

Hello Thiago Arantes,

You can add columns dynamically by re-setting 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.8.3.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/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            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) {
                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) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 500,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                ]
            });
            $("#columns").click(function () {
                $("#jqxgrid").jqxGrid({
                    columns: [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' },
                ]
                });
            });
        });
    </script>
</head>
<body class='default'>
    <button id="columns">
        Add more columns</button>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

May 15, 2013 at 12:33 pm Adding Columns on the fly #21209

Thiago Arantes

Member

Thanks Dimitar, that’s what I was looking for!

May 23, 2013 at 11:31 am Adding Columns on the fly #21752

Mhanna AbuTareef

Participant

Hi,

Is it possible to add a new custom column which have not been declared previously in the source object?

Regards,

Mhanna

May 23, 2013 at 3:11 pm Adding Columns on the fly #21767

Peter Stoev

Keymaster

Hi,

You can add your columns during the Grid initialization and dynamically show/hide them.

Best Regards,
Peter Stoev

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

May 23, 2013 at 4:11 pm Adding Columns on the fly #21773

Mhanna AbuTareef

Participant

Hi,

Well.

But in case i don’t know the number of the columns at the grid initialization…

Regards,

Mhanna

September 1, 2015 at 9:57 pm Adding Columns on the fly #75370

caflores

Participant

Hello, the issue is that I have much data to load.
Then I want to load only some columns and then you can select another column from a combobox and fetch the data to the DB and display it on the grid.

Español.
Hola, el tema es que tengo mucha data que cargar.
Entonces quiero solo cargar algunas columnas y después que se pueda seleccionar otra columna desde un combobox e ir a buscar la data a la BBDD y mostrarla en el grid.

Author

Posts

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

You must be logged in to reply to this topic.