jQWidgets Forums

Tagged: dynamic height, navigationbar, window

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

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

Author

dynamic window height Posts

September 25, 2012 at 7:34 am dynamic window height #8409

spirit

Participant

Hello,

I have a window that defined like this:

$(‘#mywindow’).jqxWindow({
theme: theme,
isModal: true,
modalOpacity: 0.3,
resizable: false,
draggable: false,
autoOpen: true,
width: $(document).width()-10,
maxWidth: $(window).width()-10,
maxHeight: (window).height()-10,
minHeight: $(window).height()-10,
minWidth: $(window).width()-10,
height: $(window).height()-10
});

Inside the window i have a jqxnavigationbar. When you expand an element of the navigationbar there is a grid which sometimes might have even nested grids. I would expect the window to change height (e.g have a scrollbar) as the user open/closes the elements of the navigationbar but that doesnt happen. Any ideas?

September 25, 2012 at 8:14 am dynamic window height #8411

Dimitar

Participant

Hello spirit,

We have tested for your reported issue with an example which has a window and a navigation bar in its content section. The navigation bar has very long text, which causes the window to show vertical scrollbar. We could not reproduce the issue.

On a side note, in your code snippet, you have ommited the $ in the maxHeight value. It is possible this to be the cause for the issue. If not, please provide us with larger portion of your code.

Best Regards,
Dimitar

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

September 25, 2012 at 6:15 pm dynamic window height #8448

spirit

Participant

Hello,

thank you for the reply. I realized that I only experience this problem when i use the theme:

var theme = ‘ui-sunny’;

when i switch to the default theme it works fine

January 9, 2013 at 9:54 pm dynamic window height #13398

spirit

Participant

Hello,

If i put a jqxDockPanel within a window an inside the jqxDockPanel a navigation bar then the scrolling doesnt work me

try.html

<!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.8.0.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxtabs.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/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnavigationbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdockpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="patientwindow.js"></script>
    <script type="text/javascript" src="init_rnagrid.js"></script>
    <script type="text/javascript">
        var theme = '';
        $(document).ready(function () {
            $("#jqxButton").jqxButton({ width: '150', height: '25', roundedCorners: 'top-left' });
            $("#jqxButton").bind('click', function () {
              patientwindow(72880);
                });
        });
    </script>
</head>
<body class='default'>
    <div id='testing'>
                <input type="button" value="Button" id='jqxButton' />
            </div>
    <div class="extrastuff" id="extrastuff"></div>
</body>
</html>

patientswindow.js

var patientwindow = function (pid) {
	var wintitle = '<span>Patient ' + pid  + '</span>';
	var windiv =  '<div id="patientwindow"> \
                <div id="patientwindowHeader">' + wintitle +  '</div>\
                <div id="jqxDockPanel"> \
                <div id="toolbarnavbar" dock="top" style="height: 40px;"> \
                            <table width="100%"> <tr>\
                                <td style="height: 40px;"> \
                                    <div id="alloweditdiv"> \
                                        <div id="alloweditbutton" style=\'float: left; margin-left: 5px;\'><img style=\'position: relative; margin-top: 2px;\' src=\'/static/images/gift_images/lock.png\'/> \
                                        </div> \
                                    </div> \
                                </td> \
                                <td width="100" align="right" style="height: 40px;"> \
                                    <div id="countdowndiv"></div> \
                                </td> \
                            </tr></table> \
                        </div> \
    	       <div id="jqxNavigationBar"> \
            			<div id="patientrnapanel"> \
                				<div style="margin-left: 4px; float: left;"> RNA </div> \
                		</div> \
            			<div id="patientrnacontent"> \
                				<div id="patientrnagrid"></div> \
            			</div> \
                        <div id="patientrnapanel1"> \
                                <div style="margin-left: 4px; float: left;"> RNA1 </div> \
                        </div> \
                        <div id="patientrnacontent1"> \
                                <div id="patientrnagrid"></div> \
                        </div> \
                        <div id="patientrnapanel2"> \
                                <div style="margin-left: 4px; float: left;"> RNA2 </div> \
                        </div> \
                        <div id="patientrnacontent2"> \
                                <div id="patientrnagrid"></div> \
                        </div> \
                        <div id="patientrnapanel3"> \
                                <div style="margin-left: 4px; float: left;"> RNA3 </div> \
                        </div> \
                        <div id="patientrnacontent3"> \
                                <div id="patientrnagrid"></div> \
                        </div> \
                </div> \
                </div> \
                </div>';
    $('body').append(windiv);
    $('#jqxDockPanel').jqxDockPanel('render');
    $("#jqxDockPanel").jqxDockPanel({width: $('#patientwindow').width,theme: '' });
    $('#toolbarnavbar').attr('dock', 'top');
    //$('#toolbarnavbar').attr('height', '2000');
    $('#patientwindow').jqxWindow({
            isModal: true,
            modalOpacity: 0.3,
            resizable: false,
            draggable: false,
            autoOpen: true,
            width: 250,
            maxWidth: 250,
            maxHeight: 150,
            minHeight: 150,
            minWidth: 250,
            height: 150
        });
        $('#patientwindow').bind('close', function (event) {
            $('#patientwindow').remove();
        });
        $("#jqxNavigationBar").jqxNavigationBar({
            width: $('#patientwindow').width,
            expandMode: 'multiple',
            expandedIndexes: [0]
        });
        init_rnagrid(pid);
}

init_rnagird.js

var init_rnagrid = function(pid){
    var data = '[{"id":"1", "totalgenotypes": 0, "categorized_diagnosis": "Control", "deceased": true}]';
    // prepare the data
    var patientrnasource = {
        datatype: "json",
        datafields: [
            { name: 'id', type:'numeric'},
            { name: 'totalgenotypes', type:'numeric'},
            { name: 'categorized_diagnosis'},
            { name: 'deceased', type:'bool'}
        ],
        id: 'id',
        localdata: data
    };
    var rnadataAdapter = new $.jqx.dataAdapter(patientrnasource);
    $('#patientrnagrid').jqxGrid({
        width: $('#patientwindow').width(),
        source: rnadataAdapter,
        altrows: true,
        filterable: false,
        groupable: false,
        autoHeight: true,
        editable: true,
        selectionmode: 'singlecell',
        sortable: true,
        columnsresize: true,
        columns: [{ 
                text: 'Patient ID', 
                datafield: 'id', 
                width: 250
                //hideable: true
            },{ 
                text: 'Genotypes', 
                datafield: 'totalgenotypes', 
                width: 250,
                cellsalign: 'right'
            },{ 
                text: 'Deceased', 
                datafield: 'deceased', 
                minwidth: 120
            }]
    });
}

January 9, 2013 at 9:56 pm dynamic window height #13399

spirit

Participant

i noticed that i have 3 div”patientrnagrid” but i changed then to “patientrnagrid1” “patientrnagrid2” “patientrnagrid3” and it still doesnt work

please let me know if i am doing somethings wrong!!!!

thank you!!!!

Author

Posts

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

You must be logged in to reply to this topic.