jQuery UI Widgets › Forums › Grid › Scroll doesn't work
Tagged: Grid Scroll, jquery grid, jqxgrid
This topic contains 6 replies, has 2 voices, and was last updated by tamaraOnt 11 years, 11 months ago.
-
AuthorScroll doesn't work Posts
-
I have a grid with a scrollbar, but when I click in it, and I try to move, it doesn’t work. I only can move the scroll trough the arrows.
function formatStructure(structure){ var structureColumns = new Array(); var j=0; for (var i=0;i<structure.length; i++){ var columns = new Object(); columns['text']= structure[i].name; columns['datafield']= structure[i].name; columns['filtertype'] = parseFilterTypes(structure[i].type); if (isApplicableCellFormat(structure[i].type=="int")){ columns['cellsformat'] = parseCellsFormat(structure[i].type); } structureColumns[j] = columns; j++; } return structureColumns;} var url = _URL_BASE_ +"/"+resource+"/getDetails"; $.ajax({ type: "get", url: url, data:params, async:false }).done(function ( result ) { if (result['data']){ var data = result['data']; }else{ data=[] } var structure = result['structure']; var theme = 'ui-redmond'; var source = { localdata: data, datatype: "array", async: false, deleterow: function (rowid, commit) { commit(true); }, addrow: function (rowid, rowdata, position, commit) { commit(true); }, updaterow: function (rowid, newdata, commit) { commit(true); } }; var dataAdapter = new $.jqx.dataAdapter(source); var structureColumns = formatStructure(structure); $('#grid').jqxGrid({ width: 800, source: dataAdapter, theme: theme, pageable: true, autoheight: true, filterable: false, editable: false, columnsresize: true, columns: structureColumns }); });
The ajax call returns:
{"data":[{"id":"43","idType":"1","_idType":"RESELLER","idFiscalDataType":"1","_idFiscalDataType":"Fisica","name":"vvvvvvv vvvvvvvv","email":"vv@vv.es","main":"vv@vv.es","firstName":"vvvvvvv","lastName1":"vvvvvvvv","lastName2":"vvvvvvvvvvvvv","document":"23423234","idCompanyType":"0","businessName":"","companyName":"","code":"","_code":"","cif":"","nif":"23423234","idPaymentType":"1","_idPaymentType":"CONTADO","RE":"0","idParentReseller":"38","_idParentReseller":"tamara riestra","personPhone":[{"idPhone":"18","id":"43","number":"6666","idType":"1","_idType":"PARTICULAR"}]},{"id":"41","idType":"1","_idType":"RESELLER","idFiscalDataType":"1","_idFiscalDataType":"Fisica","name":"asdf af","email":"triestra@ontinet.com","main":"triestra@ontinet.com","firstName":"asdf","lastName1":"af","lastName2":"adf","document":"24234","idCompanyType":"0","businessName":"","companyName":"","code":"","_code":"","cif":"","nif":"24234","idPaymentType":"1","_idPaymentType":"CONTADO","RE":"0","idParentReseller":"38","_idParentReseller":"tamara riestra","personPhone":[{"idPhone":"15","id":"41","number":"3234","idType":"1","_idType":"PARTICULAR"}]},{"id":"39","idType":"2","_idType":"MAYORISTA","idFiscalDataType":"1","_idFiscalDataType":"Fisica","name":"asdfasdf asdf","email":"uno@g.es","main":"uno@g.es","firstName":"asdfasdf","lastName1":"asdf","lastName2":"asdf","document":"4534","idCompanyType":"0","businessName":"","companyName":"","code":"","_code":"","cif":"","nif":"4534","idPaymentType":"1","_idPaymentType":"CONTADO","RE":"0","idParentReseller":"38","_idParentReseller":"tamara riestra","personPhone":[{"idPhone":"13","id":"39","number":"444","idType":"1","_idType":"PARTICULAR"},{"idPhone":"12","id":"39","number":"324234","idType":"4","_idType":"FAX"},{"idPhone":"14","id":"39","number":"324234","idType":"4","_idType":"FAX"}]},{"id":"38","idType":"1","_idType":"RESELLER","idFiscalDataType":"1","_idFiscalDataType":"Fisica","name":"tamara riestra","email":"tamarariestra@gmail.com","main":"tamarariestra@gmail.com","firstName":"tamara","lastName1":"riestra","lastName2":"ainsua","document":"53301778Z","idCompanyType":"0","businessName":"","companyName":"","code":"","_code":"","cif":"","nif":"53301778Z","idPaymentType":"2","_idPaymentType":"RECIBO","RE":"1","idParentReseller":"1","_idParentReseller":"ONTINET","personPhone":[{"idPhone":"9","id":"38","number":"981133933","idType":"1","_idType":"PARTICULAR"},{"idPhone":"10","id":"38","number":"646916522","idType":"3","_idType":"MOVIL"}]},{"id":"1","idType":"2","_idType":"MAYORISTA","idFiscalDataType":"2","_idFiscalDataType":"Juridica","name":"ONTINET","email":"ontinet@on.es","main":"ontinet@on.es","firstName":"","lastName1":"","lastName2":"","document":"B96840467","idCompanyType":"6","businessName":"ONTINET","companyName":"ONTINET COM SL","code":"4741","_code":"Comercio al por menor de ordenadores, equipos perif\u00e9ricos y programas inform\u00e1ticos en establecimientos especializados","cif":"B96840467","nif":"","idPaymentType":"2","_idPaymentType":"RECIBO","RE":"0","idParentReseller":"1","_idParentReseller":"ONTINET","personPhone":[{"idPhone":"1","id":"1","number":"12123","idType":"1","_idType":"PARTICULAR"}]}],"structure":[{"name":"id","type":"int"},{"name":"idType","type":"int"},{"name":"_idType","type":"varchar"},{"name":"idFiscalDataType","type":"int"},{"name":"_idFiscalDataType","type":"varchar"},{"name":"name","type":"varchar"},{"name":"email","type":"varchar"},{"name":"main","type":"varchar"},{"name":"firstName","type":"varchar"},{"name":"lastName1","type":"varchar"},{"name":"lastName2","type":"varchar"},{"name":"document","type":"varchar"},{"name":"idCompanyType","type":"bigint"},{"name":"businessName","type":"varchar"},{"name":"companyName","type":"varchar"},{"name":"code","type":"varchar"},{"name":"_code","type":"varchar"},{"name":"cif","type":"varchar"},{"name":"nif","type":"varchar"},{"name":"idPaymentType","type":"int"},{"name":"_idPaymentType","type":"varchar"},{"name":"RE","type":"tinyint"},{"name":"idParentReseller","type":"int"},{"name":"_idParentReseller","type":"varchar"}]}
Thanks in advance
Hi tamaraOnt,
In your Grid, autoheight is set to true. It is not supposed to have scrolling in this case. If the question is for horizontal scrolling, then make sure that you set the “width” property of your columns.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comOk. The problem is the horizontal scrolling, because I don’t put a width property on my columns, and I set de property autoresizecolumns to the grid, after being created.
Any solution?Hi tamaraOnt,
If you have just a few pixels for scrolling, the scroll thumb will not be displayed by design. If you have a larger space for scrolling, the thumb will be displayed and you will be able to scroll.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comSorry, I don’t understand your answer.
I have a scroll on the bottom of the grid, but the problem is that I can’t select the scroll and move it trough the grid.
Hi tamaraOnt,
I have tried to reproduce the issue with jQWidgets 2.7, but without avail.
Below is my sample based on your code:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.ui-redmond.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.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.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); var result = { "data": [{ "id": "43", "idType": "1", "_idType": "RESELLER", "idFiscalDataType": "1", "_idFiscalDataType": "Fisica", "name": "vvvvvvv vvvvvvvv", "email": "vv@vv.es", "main": "vv@vv.es", "firstName": "vvvvvvv", "lastName1": "vvvvvvvv", "lastName2": "vvvvvvvvvvvvv", "document": "23423234", "idCompanyType": "0", "businessName": "", "companyName": "", "code": "", "_code": "", "cif": "", "nif": "23423234", "idPaymentType": "1", "_idPaymentType": "CONTADO", "RE": "0", "idParentReseller": "38", "_idParentReseller": "tamara riestra", "personPhone": [{ "idPhone": "18", "id": "43", "number": "6666", "idType": "1", "_idType": "PARTICULAR" }] }, { "id": "41", "idType": "1", "_idType": "RESELLER", "idFiscalDataType": "1", "_idFiscalDataType": "Fisica", "name": "asdf af", "email": "triestra@ontinet.com", "main": "triestra@ontinet.com", "firstName": "asdf", "lastName1": "af", "lastName2": "adf", "document": "24234", "idCompanyType": "0", "businessName": "", "companyName": "", "code": "", "_code": "", "cif": "", "nif": "24234", "idPaymentType": "1", "_idPaymentType": "CONTADO", "RE": "0", "idParentReseller": "38", "_idParentReseller": "tamara riestra", "personPhone": [{ "idPhone": "15", "id": "41", "number": "3234", "idType": "1", "_idType": "PARTICULAR" }] }, { "id": "39", "idType": "2", "_idType": "MAYORISTA", "idFiscalDataType": "1", "_idFiscalDataType": "Fisica", "name": "asdfasdf asdf", "email": "uno@g.es", "main": "uno@g.es", "firstName": "asdfasdf", "lastName1": "asdf", "lastName2": "asdf", "document": "4534", "idCompanyType": "0", "businessName": "", "companyName": "", "code": "", "_code": "", "cif": "", "nif": "4534", "idPaymentType": "1", "_idPaymentType": "CONTADO", "RE": "0", "idParentReseller": "38", "_idParentReseller": "tamara riestra", "personPhone": [{ "idPhone": "13", "id": "39", "number": "444", "idType": "1", "_idType": "PARTICULAR" }, { "idPhone": "12", "id": "39", "number": "324234", "idType": "4", "_idType": "FAX" }, { "idPhone": "14", "id": "39", "number": "324234", "idType": "4", "_idType": "FAX" }] }, { "id": "38", "idType": "1", "_idType": "RESELLER", "idFiscalDataType": "1", "_idFiscalDataType": "Fisica", "name": "tamara riestra", "email": "tamarariestra@gmail.com", "main": "tamarariestra@gmail.com", "firstName": "tamara", "lastName1": "riestra", "lastName2": "ainsua", "document": "53301778Z", "idCompanyType": "0", "businessName": "", "companyName": "", "code": "", "_code": "", "cif": "", "nif": "53301778Z", "idPaymentType": "2", "_idPaymentType": "RECIBO", "RE": "1", "idParentReseller": "1", "_idParentReseller": "ONTINET", "personPhone": [{ "idPhone": "9", "id": "38", "number": "981133933", "idType": "1", "_idType": "PARTICULAR" }, { "idPhone": "10", "id": "38", "number": "646916522", "idType": "3", "_idType": "MOVIL" }] }, { "id": "1", "idType": "2", "_idType": "MAYORISTA", "idFiscalDataType": "2", "_idFiscalDataType": "Juridica", "name": "ONTINET", "email": "ontinet@on.es", "main": "ontinet@on.es", "firstName": "", "lastName1": "", "lastName2": "", "document": "B96840467", "idCompanyType": "6", "businessName": "ONTINET", "companyName": "ONTINET COM SL", "code": "4741", "_code": "Comercio al por menor de ordenadores, equipos perif\u00e9ricos y programas inform\u00e1ticos en establecimientos especializados", "cif": "B96840467", "nif": "", "idPaymentType": "2", "_idPaymentType": "RECIBO", "RE": "0", "idParentReseller": "1", "_idParentReseller": "ONTINET", "personPhone": [{ "idPhone": "1", "id": "1", "number": "12123", "idType": "1", "_idType": "PARTICULAR" }] }], "structure": [{ "name": "id", "type": "int" }, { "name": "idType", "type": "int" }, { "name": "_idType", "type": "varchar" }, { "name": "idFiscalDataType", "type": "int" }, { "name": "_idFiscalDataType", "type": "varchar" }, { "name": "name", "type": "varchar" }, { "name": "email", "type": "varchar" }, { "name": "main", "type": "varchar" }, { "name": "firstName", "type": "varchar" }, { "name": "lastName1", "type": "varchar" }, { "name": "lastName2", "type": "varchar" }, { "name": "document", "type": "varchar" }, { "name": "idCompanyType", "type": "bigint" }, { "name": "businessName", "type": "varchar" }, { "name": "companyName", "type": "varchar" }, { "name": "code", "type": "varchar" }, { "name": "_code", "type": "varchar" }, { "name": "cif", "type": "varchar" }, { "name": "nif", "type": "varchar" }, { "name": "idPaymentType", "type": "int" }, { "name": "_idPaymentType", "type": "varchar" }, { "name": "RE", "type": "tinyint" }, { "name": "idParentReseller", "type": "int" }, { "name": "_idParentReseller", "type": "varchar" }] }; function formatStructure(structure) { var structureColumns = new Array(); var j = 0; for (var i = 0; i < structure.length; i++) { var columns = new Object(); columns['text'] = structure[i].name; columns['datafield'] = structure[i].name; structureColumns[j] = columns; j++; } return structureColumns; } var data = result['data']; var structure = result['structure']; var theme = 'ui-redmond'; var source = { localdata: data, datatype: "array", async: false, deleterow: function (rowid, commit) { commit(true); }, addrow: function (rowid, rowdata, position, commit) { commit(true); }, updaterow: function (rowid, newdata, commit) { commit(true); } }; var dataAdapter = new $.jqx.dataAdapter(source); var structureColumns = formatStructure(structure); $('#grid').jqxGrid({ width: 800, source: dataAdapter, theme: theme, pageable: true, autoheight: true, filterable: false, editable: false, columnsresize: true, columns: structureColumns }); }); </script></head><body class='default'> <div id="grid"> </div></body></html>
Could you please verify that you use the same version of jQWidgets? If you use jQWidgets 2.7, then could you please explain what is required for reproducing the reported behavior?
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comI try your example in an alone php and its works perfectly.
But if i put into the context of my aplication, doesn’t.In my aplication, I have a body with tabs:
<div id='mainLayout' style='height: 90%'> <div id='cabecera'style='height: 50px;'> <div style="float:left;"> <span class="tituloPrincipal">SGO</span> </div> </div> <div id='menu' style='visibility: hidden;'> <? include("views/tpl/Menu.php"); ?> </div> <div id='toolbar' style="height: 25px; padding: 5px;" class="jqx-widget-header"> abssdb </div> <div id='body' style="height:700px; width: 99.9%;"> <div id='tabs'> <ul><li></li></ul> <div></div> </div> </div> <div id='foot' style="height: 25px; padding: 5px;" class="jqx-widget-header"> foot </div></div>
Then, programatically, I delete the tab added, so visually, I don’t have tabs.
$(document).ready(function () { $("#cabecera").css({'background-image':'url(img/topMainBack.png)'}); $('#tabs').jqxTabs({ showCloseButtons: true ,selectionTracker: true ,theme: 'ui-redmond' , height:600}); $('#tabs').jqxTabs("removeFirst"); $('#menu').jqxMenu({ height: 30, theme: 'ui-redmond', width: '400px' }); $("#menu").css('visibility', 'visible');});
When someone click into the menu, then, I put their content into a iframe into the tab. The txt referenced the name of a php file.:
<li>Sección Principal <ul style='width: 250px;'> <li><a href='javascript:loadSubMenu("UsersLazy")' view="UsersLazy">UsersLazy</a></li> <li><a href='javascript:loadSubMenu("Orders")'view="Orders">Orders</a></li> <li><a href='javascript:loadSubMenu("Resellers")' view="Resellers">Distribuidores</a></li> <li><a href='javascript:loadSubMenu("Customers")' view="Customers">Clientes</a></li> </ul> </li>
//the variable contTab is to avoid repeat id for iframes.
function loadSubMenu(txt){ var data = "<iframe id='frame"+txt+"_"+contTab+ "' width='99.9%' height='99.9%' src = 'about:blank'></iframe>" $('#tabs').jqxTabs('addLast', txt, data); $('#tabs').jqxTabs('ensureVisible', -1); loadView(txt, "frame"+txt+"_"+contTab); contTab++; }
The function loadView, get the content of the php file and add put into the specific tab.
/**
* Function to load a specific view (viewName) into a div (container)
* If the parameter data is not null, show the view with the dates (modify).
*/function loadView(viewName, container,onSuccess, onError, async){ async= async!=null ? async: true; $.ajax({ type: "get", url: "loader.php", data:{v:viewName}, async:async }).done(function ( data ) { //puede cargar el contenido. Tiene Permisos if($("#" + container).prop("tagName")=="IFRAME"){ $('#'+container).contents().find("body").html(data); }else{ $('#'+container).html(data); $('script').each(function(){ var $this = $(this); if($this instanceof HTMLScriptElement){ require(["../views/js/" + viewName]); } }); } if (onSuccess!=null) onSuccess(); }).fail(function(jqXHR, textStatus){ if (onError!=null) onError(); }); }
The class Loader.php get the content of the php file.
-
AuthorPosts
You must be logged in to reply to this topic.