jQuery UI Widgets Forums Grid Scroll doesn't work

This topic contains 6 replies, has 2 voices, and was last updated by  tamaraOnt 11 years, 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Scroll doesn't work #15471

    tamaraOnt
    Member

    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

    Scroll doesn't work #15472

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Scroll doesn't work #15473

    tamaraOnt
    Member

    Ok. 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?

    Scroll doesn't work #15474

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Scroll doesn't work #15476

    tamaraOnt
    Member

    Sorry, 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.

    Scroll doesn't work #15505

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Scroll doesn't work #15515

    tamaraOnt
    Member

    I 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.

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

You must be logged in to reply to this topic.