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.
-
Author
-
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,
…..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,
DimitarjQWidgets team
http://www.jqwidgets.com/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, 1030Hi 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,
DimitarjQWidgets team
http://www.jqwidgets.com/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,
NaotoHi 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,
DimitarjQWidgets team
http://www.jqwidgets.com/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″>
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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.
-
AuthorPosts
You must be logged in to reply to this topic.