jQuery UI Widgets Forums Grid Grid with CSS zoom attribute

This topic contains 8 replies, has 2 voices, and was last updated by  nyorozo 10 years, 6 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Grid with CSS zoom attribute #57316

    nyorozo
    Participant

    Hello,

    I tried to make auto fit grid by the change of window size. It get grid display correctly, but couldn’t get right cursor cordinate, then select wrong column by mouseover, click operation.

    Please make sure it by changing browser window size and show me work around for fix it.

    HTML

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<link href="../library/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
    	
    	<script type="text/javascript" src="../library/jquery/jquery-1.11.0.js"></script>	
    	<script type="text/javascript" src="../library/jqwidgets/jqxcore.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/jqxbuttons.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/jqxmenu.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/jqxtabs.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/jqxinput.js"></script>
    	
    	<script type="text/javascript" src="../library/jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../library/jqwidgets/jqxdata.js"></script>
    
    	<script type="text/javascript" src="../library/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../library/jqwidgets/jqxradiobutton.js"></script> 
    
        <script type="text/javascript" src="../library/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../library/jqwidgets/jqxdropdownlist.js"></script> 
        
     	<script type="text/javascript" src="../library/jqwidgets/jqxdatetimeinput.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/globalization/globalize.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/jqxcalendar.js"></script>
    
        <script type="text/javascript" src="../library/jqwidgets/jqxtooltip.js"></script> 
        <script type="text/javascript" src="../library/jqwidgets/jqxscrollbar.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/jqxgrid.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/jqxgrid.sort.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/jqxgrid.pager.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/jqxgrid.selection.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/jqxgrid.edit.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/jqxgrid.filter.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/jqxgrid.grouping.js"></script>	
    	<script type="text/javascript" src="../library/jqwidgets/jqxgrid.columnsresize.js"></script>
    	<script type="text/javascript" src="../library/jqwidgets/jqxgrid.columnsreorder.js"></script>
    	<script type="text/javascript" src="RS_List_grid.js"></script>
    
    	<style type="text/css">
    	
    	.patientsearch
    	{
    		float: left;
    		margin-left: 5px;
    		margin-top: 5px;
    	}
    
    	#Search_Block
    	{
    		float: left;
    		margin-left: 10px;
    		margin-bottom: 5px;
    	}
    	
    	#Search_Block1
    	{
    		float: left;
    		margin-left: 10px;
    		margin-bottom: 10px;
    	}
    	
    	</style>
    	
    	<script type="text/javascript">
    
    			
    		function list_zoom_ratio() {
    		
    			var ratio = window.innerWidth / 1354;
    			
    			body.style.zoom = ratio;
    			
    			return ratio;
    		}	
    		
    		var timerInterval = 500;
    		var resizeTimer;
    		
    		function Resize_Handling() {
    		
    		if (resizeTimer != false)  clearTimeout(resizeTimer);
    	
    		resizeTimer = setTimeout(function () {
    		
    			var zoom_ratio = 1;	
    			
    /* Auto Zoom */		
    			zoom_ratio = list_zoom_ratio();
    			list_zoom_ratio();
    /* End  */			
    
    					
    			var theight = window.innerHeight - 30 * zoom_ratio;
    			theight /= zoom_ratio;
    			
    			var gheight = window.innerHeight - 90 * zoom_ratio;
    			gheight /= zoom_ratio;
    						
    			var garea = gheight - $("#RS_Status_List").jqxGrid('columnsheight') 
    								- $("#RS_Status_List").jqxGrid('statusbarheight')
    								- $("#RS_Status_List").jqxGrid('scrollbarsize');
    					
    			var rheight = $("#RS_Status_List").jqxGrid( 'rowsheight');
    			
    			var  rowcount = garea / rheight ;
    
    			rowcount = Math.abs(Math.floor(rowcount)) + 1;   //?????
    			
    			var pagearray = new Array();
    			pagearray[0] = String(rowcount);
    			pagearray[1] = '20';
    			pagearray[2] = '50';
    			pagearray[3] = '100';
    			pagearray[4] = 'ALL';		
    			
    			$("#RS_Status_List").jqxGrid( { 
    				height: gheight,
    				pagesize: rowcount,
    				pagesizeoptions: pagearray
    			});
    
    			}, timerInterval);
    		}
    		
    
    	</script>
    
    </head>
    
    <body id="body" class="common" onload="Resize_Handling();" onresize="Resize_Handling();">
    <div id="bar"></div>
    
    <div id="flame_title" class="title">	
    	<span>Reprocessing Management</span>
    </div>
    
    <div style="clear:both;"></div>
    <hr class="segment" />
    
           		
         		<div>
    				<div id='jqxWidget' >
    					<div id="RS_Status_List" class="grid"></div>    
    				</div>
          		</div>
    
    </body>
    
    </html>
    
    

    JS

    
    $(function() {
    
    	var statuslist_url = 'RS_Status_List.csv';
    	var statuslist_source =
    	{
    		datatype : "csv",
    
    		datafields : [
    			{name : 'Chk',		type: 'bool'},
    			{name : 'AStatus',	type: 'string'},
    			{name : 'Status',	type: 'string'},
    			{name : 'Reprocessor', type: 'string'},
    			{name : 'Scope',	type: 'string'},
    			{name : 'Serial',	type: 'string'},
    			{name : 'Start',	type: 'string' },
    			{name : 'End',		type: 'string' },
    			{name : 'Remain',	type: 'string'},
    			{name : 'Staff',	type: 'string'},
    			{name : 'Room',		type: 'string'},
    			{name : 'PID',		type: 'string'},
    			{name : 'PName',	type: 'string'},
    			{name : 'EStart',	type: 'date' },
    			{name : 'EEnd',		type: 'date' },
    			{name : 'EType',	type: 'string'},
    			{name : 'ProcMD',	type: 'string'},
    			{name : 'VFlag',	type: 'bool'},
    			{name : 'RecNo',	type: 'string'}			
    		],
    
    		url : statuslist_url
    	};
    
    	var dataAdapter = new $.jqx.dataAdapter(statuslist_source);
    	
    	
    	var check_image =  function(row, columnfield, value) {
    		return;
     	 }
     	  	 
     	 var header_check_image =  function(columnHeaderElement) {
     	 	return;
     	 }
     	 
    	var cellclass = function(row, columnfield, value, data) {
    		return;
     	 }
    
    	$("#RS_Status_List").jqxGrid( {
     	 	theme : "olympus",
     	 	source : dataAdapter,
     	 	width : '99.5%',
    	 	editable : true, 
     	 	columnsresize : true,
     	 	sortable: true,
     	 	altrows: true,
     	 	filterable: true,
     	 	filtermode: 'excell',
    	 	columnsreorder: true,
      	 	showsortcolumnbackground: false,
     	 	showpinnedcolumnbackground: false,
     	 	showfiltercolumnbackground: true,
     	 	enabletooltips: true,
     	 	pageable: true,
    	 	pagermode: 'default',
     	 	enabletooltips: true,
     	 	columns : [
    	 		{ text : 'Associated Status', editable: false, datafield : 'AStatus', align : 'center', width : 80, filtertype: 'list' },
     	 		{ text : 'Status', editable: false, datafield : 'Status', align : 'center', width : 70, filtertype: 'list' },
     	 		{ text : 'Reprocessor', editable: false, datafield : 'Reprocessor', align : 'center', width : 70, filtertype: 'checkedlist' },
     	  	 	{ text : 'Scope', editable: false, datafield : 'Scope', align : 'center', width : 110, filtertype: 'checkedlist' },
     	 		{ text : 'Serial', editable: false, datafield : 'Serial', align : 'center', width : 60, filtertype: 'checkedlist' },
     	 		{ text : 'Start', editable: false, datafield : 'Start', align : 'center', width : 70, filtertype: 'textbox' },
     	 		{ text : 'End', editable: false, datafield : 'End', align : 'center', width : 70, filtertype: 'textbox' },
     	 		{ text : 'Time Remaining', editable: false, datafield : 'Remain', align : 'center', width : 40, filtertype: 'checkedlist' },
     	 		{ text : 'Staff(Start)', editable: false, datafield : 'Staff', align : 'center', width : 80, filtertype: 'list' },
     	 		{ text : 'Room', editable: false, datafield : 'Room', align : 'center', width : 70, filtertype: 'list' },
     	 		{ text : 'Patient ID', editable: false, datafield : 'PID', align : 'center', cellclassname: cellclass, width : 80, filtertype: 'checkedlist' },
     	 		{ text : 'Patient Name', editable: false, datafield : 'PName', align : 'center', cellclassname: cellclass, width : 100, filtertype: 'list' },
     	 		{ text : 'Exam Time(Start)', editable: false, datafield : 'EStart', align : 'center', cellclassname: cellclass, width : 95, filtertype: 'date' },
     	 		{ text : 'Exam Time(End)', editable: false, datafield : 'EEnd', align : 'center', cellclassname: cellclass, width : 95, filtertype: 'date' },
     	 		{ text : 'Exam Type', editable: false, datafield : 'EType', align : 'center', cellclassname: cellclass, width : 60, filtertype: 'checkedlist' },
     	 		{ text : 'Procedure MD', editable: false, datafield : 'ProcMD', align : 'center', cellclassname: cellclass, width : 54, filtertype: 'list' }
     	 	]
    	});	
    	
    	$("#RS_Status_List").on('cellclick', function(event) {
    	});
    	
    	$("#RS_Status_List").on('columnclick', function(event) {
    	});
    	
    	$("#RS_Status_List").on("pagesizechanged", function(event) {
    	});
    
    });
    
    

    Data
    `
    false, Associated, Completed, Test004, TEG-208359, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, unknown, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1002,
    false, Associated, Completed, Test004, TEG-208359, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, unknown, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1002,
    false, Associated, Completed, Test004, TEG-208359, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, unknown, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1002,
    …..

    Grid with CSS zoom attribute #57328

    Dimitar
    Participant

    Hello nyorozo,

    Please clarify your requirement. Also, re-post your data and format it as you did the HTML and JavaScript.

    An example of a grid which resizes automatically when the window is resized can be found here: http://www.jqwidgets.com/jquery-widgets-demo/mobiledemos/jqxgrid/grid.htm?(android)&=fullscreen.

    Best Regards,
    Dimitar

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

    Grid with CSS zoom attribute #57330

    nyorozo
    Participant

    Hello Dimitar-san,
    Thank you for your quick response.

    What I want to do is that when I change window size (200, 100) to (300, 150), for instance, automatically zoom-up 150%, like brower zoom 150%.
    Your example is only adjust column, but my request is all contents in the body, including font size are changed in according with window size.

    Below is that data.

    RS_Status_List.csv
    ——————
    false, Associated, Completed, Test004, TEG-208359, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, unknown, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1002,
    false, Associated, Completed, Test001, TEG-208360, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1003,
    false, Associated, Completed, Test002, TEG-208360, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM2,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1004,
    false, Associated, Completed, Test003, TEG-208361, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1005,
    false, Associated, Completed, Test001, TEG-208361, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1006,
    false, Associated, Completed, Test001, TEG-208360, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1007,
    false, Unassociated, Completed, Test004, GIF-H1892602159, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1008,
    false, Associated, Completed, Test003, TEG-208365, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM3,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1009,
    false, Associated, Completed, Test001, TEG-208360, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1010,
    false, Associated, Completed, Test002, TEG-208361, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM2,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1011,
    false, Associated, Completed, Test001, TEG-208360, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1012,
    false, Associated, Completed, Test001, TEG-208365, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1013,
    false, Unassociated, Completed, Test001, TEG-517289, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1014,
    false, Associated, Completed, Test003, TEG-208360, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM3,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1015,
    false, Associated, Completed, Test001, TEG-208360, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1016,
    false, Associated, Completed, Test002, TEG-208360, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1017,
    false, Associated, Completed, Test001, TEG-208361, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM2,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1018,
    false, Associated, Completed, Test001, TEG-208365, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM3,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1019,
    false, Associated, Completed, Test002, TEG-208360, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM2,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1020,
    false, Associated, Completed, Test003, TEG-208361, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1021,
    false, Associated, Completed, Test001, GIF-H1892602159, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM2,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1022,
    false, Associated, Completed, Test001, TEG-208360, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1023,
    false, Associated, Completed, Test001, TEG-208360, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1024,
    false, Associated, Completed, Test001, TEG-208365, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1025,
    false, Associated, Completed, Test002, TEG-208361, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1026,
    false, Associated, Completed, Test001, TEG-517289, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1027,
    false, Associated, Completed, Test001, TEG-208360, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM3,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1028,
    false, Associated, Completed, Test003, TEG-208360, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1029,
    false, Associated, Completed, Test004, TEG-208361, 2602160, 1:25PM, 1:50PM, -, Admin, ROOM1,unknown, Emmanuelle Sebastian Beart, 12/20/2013 11:25AM, 12/20/2013 11:50AM, CV-1, doc1, true, 1030

    Grid with CSS zoom attribute #57363

    Dimitar
    Participant

    Hi nyorozo,

    As you can see from the grid’s demos, such as Default Functionality, when you try zooming the window, there are no issues and the grid zooms as expected. Unfortunately, we cannot assist you with your custom implementation, though.

    Best Regards,
    Dimitar

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

    Grid with CSS zoom attribute #57386

    nyorozo
    Participant

    Hello Dimitar,

    I think you miss the point. With using the sample of Default Functionality, please change <body> as below.

    <body class=’default’ style=”zoom:1.5″>

    You can see what will happen and understand what I want to point.

    Regards,
    Naoto

    Grid with CSS zoom attribute #57389

    Dimitar
    Participant

    Hi Naoto,

    If you, however, set it to the grid div itself, it should work properly, at least on the browsers which support the zoom property (not Firefox).

    Best Regards,
    Dimitar

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

    Grid with CSS zoom attribute #57394

    nyorozo
    Participant

    Hi Dimitar,

    I tried to set it to grid div itself as blow, but not work correctly, both on IE10 and Chrome. Is there any misunderstanding?

    <div id=”jqxgrid” style=”zoom:1.5″>

    Grid with CSS zoom attribute #57395

    Dimitar
    Participant

    Hi Naoto,

    We do not experience any issues if we make this change in the Default Functionality demo:

    <div id="jqxgrid" style="zoom: 1.5;">
    </div>

    We tested with Google Chrome and Internet Explorer 9 and 10.

    Best Regards,
    Dimitar

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

    Grid with CSS zoom attribute #57399

    nyorozo
    Participant

    Hi Dimitar,

    >>We do not experience any issues if we make this change in the Default Functionality demo:

    Oh, Really. There are all issues related cell postion in our environment, Japanese verion of OS and Browser.
    I will check it further.

    At any rate, I feel gratitude to you very much.

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

You must be logged in to reply to this topic.