jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Pinned and resizable columns

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  andy8 11 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Pinned and resizable columns Posts
  • October 31, 2013 at 8:56 pm Pinned and resizable columns #31720

    andy8
    Participant

    Hello All,

    Is it possible to get pinned and resizable column options at the same time?

    It looks as adding two these options together doesn’t work:

    columnsresize: true,
    pinned: true,

    any suggestions?

    Thanks!

    November 1, 2013 at 4:31 am Pinned and resizable columns #31734

    Peter Stoev
    Keymaster

    Hi andy8,

    Yes it is possible and there is no problem to add them. Just make sure that you have added all the required JavaScript files on your page.

    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/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.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="../../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' },
                        { name: 'QuantityPerUnit' },
                        { name: 'UnitPrice', type: 'float' },
                        { name: 'UnitsInStock', type: 'float' },
                        { name: 'UnitsOnOrder', type: 'float' },
                        { name: 'ReorderLevel', type: 'float' },
                        { name: 'CategoryID', type: 'int' }
                   ],
                    root: "Products",
                    record: "Product",
                    id: 'ProductID',
                    url: url
                };
                var categories = {};
                var categoriesurl = '../sampledata/categories.xml';
                $.ajax({
                    async: false,
                    url: categoriesurl,
                    success: function (data, status, xhr) {
                        categories = $("Category", data);
                    }
                });
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: source,
                    sortable: true,
                    pageable: true,
                    columnsresize: true,
                    autoheight: true,
                    columns: [
                      { text: 'Product Name', datafield: 'ProductName', width: 250, pinned: true },
                      { text: 'Category', datafield: 'CategoryID', width: 80, cellsalign: 'right' },
                      { text: 'Quantity Per Unit', datafield: 'QuantityPerUnit', width: 200, cellsalign: 'right' },
                      { text: 'Unit Price', datafield: 'UnitPrice', width: 100, cellsformat: 'c2', cellsalign: 'right' },
                      { text: 'Units On Order', datafield: 'UnitsOnOrder', width: 110, cellsalign: 'right' },
                      { text: 'Reorder Level', datafield: 'ReorderLevel', width: 100, cellsalign: 'right' }
                   ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

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

    November 4, 2013 at 7:19 am Pinned and resizable columns #31851

    andy8
    Participant

    Thank you, Peter. Everything works ok.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.