jQuery UI Widgets Forums Grid JqxGrid with "columnsResize" property

This topic contains 2 replies, has 2 voices, and was last updated by  srinath4ever 10 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • JqxGrid with "columnsResize" property #63068

    srinath4ever
    Participant

    Hi,

    Can we set MinWidth and MaxWidth to JqxGrid table column when we use ‘columnsResize’ property on to it? I want to restrict users to minimize/maximize a column after certain width. Please tell me whether this is possible or not.

    Thanks,
    Srinath
    BMC Software

    JqxGrid with "columnsResize" property #63087

    Nadezhda
    Participant

    Hello Srinath,

    You can set ‘minwidth’ and ‘maxwidth’ to jqxGrid column when ‘columnsresize’ is set to true. The following example shows how to restrict resizing of the first column.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <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/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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="generatedata.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = generatedata();
    
                var source =
                {
                    localdata: data,
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'available', type: 'bool' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'total', type: 'number' }
                    ],
                    datatype: "array"
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    columnsresize: true,
                    columns: [
                      { text: 'First Name', datafield: 'firstname', width: 100, minwidth: 100, maxwidth: 150 },
                      { text: 'Last Name', datafield: 'lastname', width: 100 },
                      { text: 'Product', datafield: 'productname', width: 180 },
                      { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                      { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                      { text: 'Total', datafield: 'total', minwidth: 100, resizable: false, width: 'auto', cellsalign: 'right', cellsformat: 'c2' }
                    ]
                });
    
                // trigger the column resized event.
                $("#jqxgrid").on('columnresized', function (event) {
                    var column = event.args.columntext;
                    var newwidth = event.args.newwidth
                    var oldwidth = event.args.oldwidth;
                    $("#eventlog").text("Column: " + column + ", " + "New Width: " + newwidth + ", Old Width: " + oldwidth);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid"></div>
            <div style="margin-top: 30px;" id="eventlog"></div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    JqxGrid with "columnsResize" property #63121

    srinath4ever
    Participant

    Thanks Nadezhda. It worked.

    Thanks
    Srinath
    BMC Software

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

You must be logged in to reply to this topic.