jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Dropdown Grid Bug

Tagged: , ,

This topic contains 2 replies, has 2 voices, and was last updated by  Peter Stoev 12 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Dropdown Grid Bug Posts
  • February 19, 2013 at 8:59 pm Dropdown Grid Bug #15484

    shimmoril
    Participant

    I believe this is related to your fix for the issue I reported here: http://www.jqwidgets.com/community/topic/percentage-grid-sizing-paging/

    Before I updated to v2.7 my dropdown grids looked like this (info redacted): http://imageshack.us/a/img35/6827/oldgrid.png
    The grid width is set to 600, each column is 300.

    Now they look like this: http://imageshack.us/a/img823/3978/dropdowngridbug.png
    For some reason the grid is now taking what looks like a 100% width (even though it is still set to 600px). Changing the grid settings to full percentages doesn’t help (except to make the data fill the entire box), neither does adding the px to the existing width settings.

    Until this is fixed we cannot go live w/ v2.7 – which is unfortunate, since we need the % width fix in other areas of our software.

    February 20, 2013 at 5:57 am Dropdown Grid Bug #15504

    Peter Stoev
    Keymaster

    Hi shimmoril,

    Thank you for the feedback. We will test the reported behavior and in case we reproduce it, we will resolve the issue in the next release.
    As a workaround, set your columns to a fixed width and auto-resize them by using the Grid’s autoresizecolumns method.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    February 20, 2013 at 10:31 am Dropdown Grid Bug #15523

    Peter Stoev
    Keymaster

    Hi shimmoril,

    We are unable to reproduce this with jQWidgets 2.7. Please, provide a sample which demonstrates it with jQWidgets 2.7 and also provide step by step instructions for reproducing the issue.

    Here’s the test code which I use:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In this demo, the Grid is used in a combination with the jqxDropDownButton
            widget.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.8.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.columnsresize.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>   
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                // prepare the data
                var data = generatedata(100);
                var source =
                {
                    localdata: data,
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' }
                    ],
                    datatype: "array",
                    updaterow: function (rowid, rowdata) {
                        // synchronize with the server - send update command   
                    }
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // initialize jqxGrid
                $("#jqxdropdownbutton").jqxDropDownButton({ width: 150, height: 25, theme: theme });
                $("#jqxgrid").jqxGrid(
                {
                    width: 600,
                    source: dataAdapter,
                    theme: theme,
                    pageable: true,
                    height: 300,
                    columnsresize: true,
                    columns: [
                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: "50%" },
                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: "50%" }
                    ]
                });
                $("#jqxgrid").on('rowselect', function (event) {
                    var args = event.args;
                    var row = $("#jqxgrid").jqxGrid('getrowdata', args.rowindex);
                    var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['firstname'] + ' ' + row['lastname'] + '</div>';
                    $("#jqxdropdownbutton").jqxDropDownButton('setContent', dropDownContent);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxdropdownbutton">
                <div id="jqxgrid">
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.