jQuery UI Widgets Forums Grid Adding Columns on the fly

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Adding Columns on the fly #21077

    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

    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/

    Adding Columns on the fly #21209

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

    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

    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/

    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

    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.

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

You must be logged in to reply to this topic.