jQWidgets Forums

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

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

Author

Issue with Grid width Posts

August 29, 2012 at 11:56 am Issue with Grid width #7249

DollyB

Member

Hi,

I have a modal window with Two Tabs.
In the first Tab, I have a Grid inside.
The modal window opens on a normal button click.
Issue: The grid width shrinks to half of the window width and when I double click any of the columns in the Grid, it get expanded to full size.

Could you tell me why I am facing this issue?

My initialization for Window, Tabs and Grid is as below.

$('#objectModelWindow').jqxWindow({ maxHeight: 1250, maxWidth:5500, minHeight: 750, minWidth: 850, height: document.documentElement.clientHeight-90, width: document.documentElement.clientWidth-100,
                theme: theme, resizable: false, isModal: true, modalOpacity: 0.3, position: { x: 70, y: 70 }, autoOpen: false
           });
	
	    $('#tab1').jqxTabs({width:'100%', height: '30%', theme: theme });
	    $('#tab2').jqxTabs({width:'100%',  height: '80%',theme: theme });
$("#jqxgridDR").jqxGrid(
            {
                width: '100%',
                //columnsmenuwidth: '100%',
                source: reqDataAdapter,
                editable: true,
                pageable: true,
				editmode: 'dblclick',
                autoheight: true,
				//columnsresize: true,
				altrows:true,
				filterable: true,
                sortable: true,
                selectionmode: 'singlecell',
                columns: [
		    { text: 'name', datafield: 'name', columntype: 'textbox', width: 100, pinned: true, editable: false }                
                ]
            });
	   
            // change columns collection. Requirments
            $("#jqxgridDR").jqxGrid({ columns: reqGridColumns });

August 29, 2012 at 12:14 pm Issue with Grid width #7253

Peter Stoev

Keymaster

Hi DollyB,

The provided source code about the datagrid and tabs does not help much. Please post a full sample or send it to support@jqwidgets.com so we can try your scenario locally.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 29, 2012 at 12:19 pm Issue with Grid width #7255

DollyB

Member

Hi Peter,

Sent the code sample through mail.

Thankx
DollyB.

August 30, 2012 at 8:59 am Issue with Grid width #7277

Peter Stoev

Keymaster

Hi DollyB,

Here is an example based on your source code. Note that the first tab has its initTabContent property set. It is used for integration of other widgets in jqxTabs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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/jqxgrid.filter.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.grouping.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var initGrid = function () {
                var url = "beverages.txt";
                // prepare the data
                var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name' },
                    { name: 'type' },
                    { name: 'calories' },
                    { name: 'totalfat' },
                    { name: 'protein' },
                ],
                id: 'id',
                url: url
            };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
                $("#jqxgridDR").jqxGrid(
            {
                width: '100%',
                //columnsmenuwidth: '100%',
                source: dataAdapter,
                editable: true,
                pageable: true,
                editmode: 'dblclick',
                autoheight: true,
                //columnsresize: true,
                altrows: true,
                filterable: true,
                sortable: true,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'Name', datafield: 'name', width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein' }
              ]
            });
            };
            var initWidgets = function (tab) {
                switch (tab) {
                    case 0:
                        initGrid();
                        break;
                    case 1:
                        break;
                }
            };
            $("#objectModelWindow").jqxWindow({ maxHeight: 1250, maxWidth: 5500, minHeight: 750, minWidth: 850, height: document.documentElement.clientHeight - 90, width: document.documentElement.clientWidth - 100,
                theme: 'classic', resizable: false, isModal: true, modalOpacity: 0.3, position: { x: 70, y: 70 }, autoOpen: false
            });
            $("#btn1").click(function () {
                $('#objectModelWindow').jqxWindow('open');
                $('#tab1').jqxTabs({ width: '100%', height: '30%', theme: 'classic', initTabContent: initWidgets });
                $('#tab2').jqxTabs({ width: '100%', height: '80%', theme: 'classic' });
            });
        });
    </script>
</head>
<body>
    <button id="btn1">
        Show window!
    </button>
    <div id="objectModelWindow">
        <div id="WHeader">
            Header</div>
        <div id="WContent">
            <div id="tab1">
                <ul style='margin-left: 20px;'>
                    <li>Tab 1.1</li>
                    <li>Tab 1.2</li>
                </ul>
                <div>
                    Grid:
                    <div id="jqxgridDR">
                    </div>
                </div>
                <div>
                    Content 2
                </div>
            </div>
            <div id="tab2">
                <ul style='margin-left: 20px;'>
                    <li>Tab 2.1</li>
                    <li>Tab 2.2</li>
                </ul>
                <div>
                    Content 1
                </div>
                <div>
                    Content 2
                </div>
            </div>
        </div>
    </div>
</body>
</html>

And here is the contents of beverages.txt:

[{
 "id": "1",
 "name": "Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "370",
 "totalfat": "16g",
 "protein": "14g"
 }, {
 "id": 2,
 "name": "Peppermint Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "500",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "id": "3",
 "name": "Salted Caramel Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "450",
 "totalfat": "16g",
 "protein": "13g"
}]

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.