jQWidgets Forums

jQuery UI Widgets Forums Grid Set Column Width Dynamically

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  Syai 12 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Set Column Width Dynamically #23546

    Syai
    Participant

    Hi,
    We’ve a requirement to show different columns of Grid according to different user. For some users less number of columns will be shown and for some other users more number of columns will be shown in the same grid. My question is, will it be possible to set the width of particular columns on “Load Complete” of Grid so that the width of the columns will be adjusted according to different users. Can anyone suggest me how to achieve this?

    Thanks in advance,
    Regards,
    Syai,
    Osmosys

    Set Column Width Dynamically #23553

    Mariya
    Participant

    Hi Syai,

    In order to show the columns with a different width when the loading of the jqxGrid is complete you can use the ‘ready’ function and the ‘setcolumnproperty’ method as shown:

    <!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.9.0.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.selection.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    // prepare the data
    var data = {};
    var firstNames =
    [
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    ];
    var lastNames =
    [
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    ];
    var productNames =
    [
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    ];
    var priceValues =
    [
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];
    var generaterow = function (i) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);
    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row["productname"] = productNames[productindex];
    row["price"] = price;
    row["quantity"] = quantity;
    row["total"] = price * quantity;
    return row;
    }
    for (var i = 0; i < 10; i++) {
    var row = generaterow(i);
    data[i] = row;
    }
    var source =
    {
    localdata: data,
    datatype: "local",
    datafields:
    [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'quantity', type: 'number' },
    { name: 'price', type: 'number' },
    { name: 'total', type: 'number' }
    ],
    addrow: function (rowid, rowdata, position, commit) {
    // synchronize with the server - send insert command
    // call commit with parameter true if the synchronization with the server is successful
    //and with parameter false if the synchronization failed.
    commit(true);
    },
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    ready: function () {
    $("#jqxgrid").jqxGrid('setcolumnproperty', 'quantity', 'width', 300);
    },
    width: 500,
    height: 350,
    source: dataAdapter,
    theme: theme,
    columns: [
    { text: 'First Name', datafield: 'firstname', width: 100 },
    { text: 'Last Name', datafield: 'lastname', width: 100 },
    { text: 'Product', datafield: 'productname', width: 180 },
    { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' },
    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div style="float: left;" id="jqxgrid">
    </div>
    <div style="margin-left: 10px; float: left;">
    </div>
    </div>
    </body>
    </html>

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    Set Column Width Dynamically #23556

    Syai
    Participant

    Hi Mariya,

    Thank you very much for the solution. It is working like charm.

    Regards,
    Syai,
    Osmosys

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

You must be logged in to reply to this topic.