jQuery UI Widgets › Forums › Grid › Bad format

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Bad format Posts
  • September 12, 2013 at 11:52 pm Bad format #28894

    alme
    Participant

    Hi,

    as this is my first post I want to say hello and give thanks for all help I could receive from you…

    I’ve been playing with the grid and the demo examples and I have a problem. When I expand all the groups and autoresize the columns, the two last rows are shown badly formatted.

    I attach the code…

    <html>
    <head>
        <title id='Description'></title>
        <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="jqwidgets/jqwidgets/jqxpanel.js"></script>
     	<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.grouping.js"></script> 
    	<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script> 
    	<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsreorder.js"></script> 
    	<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.filter.js"></script> 
    	<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.sort.js"></script> 
       <script type="text/javascript">
            $(document).ready(function () {
                var theme = 'energyblue';
    			var data = [
    			{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"},
    			{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"},
    			{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"},
    			{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"},
    			{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"},
    			{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"},
    			{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"},
    			{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"},
    			{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"},
    			{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"}
    			];
    			var source =
    			{
    				datatype: "json",
    				datafields: [
    					{ name: 'empName' },
    					{ name: 'age' },
    					{ name: 'id', map: 'department>id' },
    					{ name: 'name', map: 'department>name' },
    					{ name: 'author' }
    				],
    				localdata: data
    			};
    			var dataAdapter = new $.jqx.dataAdapter(source);
                $("#jqxgrid").jqxGrid(
                {
    					autoheight:true,
    					editable: false,
    					selectionmode: 'singlerow',
    					sortable: true,
    					filterable: true,
    					editmode: 'dblclick',
    					columnsreorder: true,
    					altrows: true,
                    width: 1000,
                    source: dataAdapter,
                    theme: theme,
    				columnsresize: true,
    				groupable: true,
                     columns: [
                      { text: 'empName', datafield: 'empName', width: 50 , columngroup: 'Group11'},
                      { text: 'age', datafield: 'age', width: 30, cellsformat: 'D', columngroup: 'Group11' },
                      { text: 'id', datafield: 'id', width: 30, cellsformat: 'F2', cellsalign: 'right', columngroup: 'Group12' },
                      { text: 'name', datafield: 'name', width: 50, columngroup: 'Group12' },
                      { text: 'author', datafield: 'author', width: 100, columngroup: 'Group2' },
                    ],
                    columngroups: 
                    [
                      { text: 'Group1', align: 'center', name: 'Group1' },
    					  { text: 'Group11', align: 'center', name: 'Group11', parentgroup: 'Group1' },
    					  { text: 'Group12', align: 'center', name: 'Group12', parentgroup: 'Group1'  },
                      { text: 'Group2', align: 'center', name: 'Group2' },
                    ],
    				groups: ['empName', 'age']
    				
                });
                $("#button").jqxButton({ theme: theme });
                $("#button").click(function () {
                    $("#jqxgrid").jqxGrid('autoresizecolumns');
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
            <div style="margin-top: 30px;">
                <input id="button" type="button" value="Auto Resize Columns" />
            </div>
        </div>
    </body>
    </html>
    September 13, 2013 at 4:32 am Bad format #28902

    Peter Stoev
    Keymaster

    Hi alme,

    We confirm the reported behavior. Thank you very much about the feedback. We will resolve that for the next release.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.