jQuery UI Widgets Forums Grid grid column sorting

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 10 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • grid column sorting #49623

    rani
    Participant

    hello,

    I have 6 columns in grid.
    three column contains drop downs.
    i have performed the autoresize for dropdown columns using below code

    $(‘#jqxGrid’).jqxGrid(‘autoresizecolumn’, ‘firstname’);

    when i do the sorting

    the columns are lost the autoresize.
    they are not showing full text.

    regards,
    rani

    grid column sorting #49627

    Dimitar
    Participant

    Hello rani,

    We were not able to reproduce the issue by testing the following example (based on the demo Customized Editors) with jQWidgets version 3.2.1. Do you experience any issues with it?

    <!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/jqxmenu.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="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var ordersSource =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                        { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                        { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                        { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                        { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                        { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                    ],
                    root: "entry",
                    record: "content",
                    id: 'm\\:properties>d\\:OrderID',
                    url: "../sampledata/orders.xml",
                    pager: function (pagenum, pagesize, oldpagenum) {
                        // callback called when a page or page size is changed.
                    },
                    updaterow: function (rowid, rowdata, result) {
                        // synchronize with the server - send update command
                        // call result with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failder.
                        result(true);
                    }
                };
                var ordersAdapter = new $.jqx.dataAdapter(ordersSource);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: ordersAdapter,
                    selectionmode: 'singlecell',
                    editable: true,
                    pageable: false,
                    sortable: true,
                    autoheight: true,
                    columns: [
                        {
                            text: 'Ship City', datafield: 'ShipCity', width: 80, columntype: 'combobox',
                            createeditor: function (row, column, editor) {
                                // assign a new data source to the combobox.
                                var list = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];
                                editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: "Please Choose:" });
                            },
                            // update the editor's value before saving it.
                            cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                                // return the old value, if the new value is empty.
                                if (newvalue == "") return oldvalue;
                            }
                        },
                        {
                            text: 'Ship Country', datafield: 'ShipCountry', width: 150, columntype: 'dropdownlist',
                            createeditor: function (row, column, editor) {
                                // assign a new data source to the dropdownlist.
                                var list = ['Germany', 'Brazil', 'France'];
                                editor.jqxDropDownList({ autoDropDownHeight: true, source: list });
                            },
                            // update the editor's value before saving it.
                            cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                                // return the old value, if the new value is empty.
                                if (newvalue == "") return oldvalue;
                            }
                        },
                        { text: 'Ship Name', datafield: 'ShipName', columntype: 'combobox' }
                    ],
                    ready: function () {
                        $('#jqxgrid').jqxGrid('autoresizecolumn', 'ShipCity');
                    }
                });
            });
        </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,
    Dimitar

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

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

You must be logged in to reply to this topic.