[tamaraOntMember]

Thanks a lot. I haven’t seen that example.

It works now.

[tamaraOntMember]

Sorry, I’, trying to do that, and I can’t. I have the following code:

<script type="text/javascript">
    $(document).ready(function () {
        // generate sample data.
        var generatedata = function (startindex, endindex) {
            $.get("index.php", { startindex: startindex, endindex: endindex },function(result){                                                      
                var data = JSON.parse(result);
                return data;
            });
        }
        
        var source =
        {
            datatype: "array",
            localdata: {},
            totalrecords: 1000000
        };
        // load virtual data.
        var rendergridrows = function (params) {
            var data = generatedata(params.startindex, params.endindex);
            return data;
        }
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#gridUser_1").jqxGrid(
        {
            width: 670,
            autoheight: true,
            source: dataAdapter,
            theme: 'ui-start',
            virtualmode: true,
            pageable: true,
            rendergridrows: rendergridrows,
            columns: [
                { text: 'id', datafield: 'id', width: 100 },
                { text: 'idProfile', datafield: 'idProfile', width: 100 },
                { text: 'user', datafield: 'user', width: 120 },
                { text: 'password', datafield: 'password', width: 120 }              ]
        });        
    });
</script>
<div id='contenidoTab1'>
    <div>
        <div id="gridUser">
        </div>
    </div>
</div>

In the index.php, I have the following code, to simulate asking for data

if (isset($_GET["startindex"])) {
    $result = Array();
    
    for($i = 0; $i < 10; ++$i){
        $row = Array();
        $row["id"] = $i;
        $row['user'] = 'tamara';
        $row['password'] = '12345';
        $row['idProfile'] = 1;
        $result[$i] = $row;
    }
    echo json_encode((object)$result);    
}

I don’t know where I have to put the jqxGrid’s ‘updatebounddata’ function.

If a show the content of the var ‘data’ in the rendergridrows after the call ‘generatedata’, says ‘undefined’.

Thanks for your help

[tamaraOntMember]

Ok…thanks…that’s that I did it. I create with one element, and then, I remove

<div id='tabs'>
                <ul><li></li></ul>
                <div></div>
            </div>   

        $('#tabs').jqxTabs({ showCloseButtons: true ,theme: 'ui-start' });
        $('#tabs').jqxTabs("removeFirst");

So then, I can add without problems.

   $('#tabs').jqxTabs('addLast', txt, 'Sample content');
                    $('#tabs').jqxTabs('ensureVisible', -

Thanks for your reply

[tamaraOntMember]

I did it…more or less.
The idea is that you have to create a string putting all your divs and ul with li inside..and then, you write this string as html.

I show you my code:

 $.getJSON("index.php",{menu:"menu"}, function(data) {
            var i=0;
            var code="";
            for (i=0; i<data.length;i++){
                if (data[i].idParent==0){
                    //creo el div con data[i].title para el menu ppal
                    code+="<div>"+data[i].title+'</div>';
           
                    var hijos = getHijos(data[i].id, data);
                    var j=0;
                    //abro el div para los elementos de dentro del menu ppal
                    code+='<div><ul>'
                    //abro el ul para los elementos de dentro del menú ppal
                    for (j=0;j<hijos.length;j++){
                        //pinto el li con hijos[i].title
                        code+='<li>'+hijos[j].title+'</li>'
                    }
                    //cierro el ul para los elementos de dentro del menu
                    //cierro el div para los elementos de dentro del menu
                    code+='</ul></div>'
                }
            }
            $('#menu').html(code);
            $("#menu").jqxNavigationBar({ theme: 'darkblue', width:400, height:420,sizeMode: 'fitAvailableHeight' });
            
        });
     
       function getHijos(idParent, data){
                var hijos= new Array();
                var i=0,j=0;
                for (i=0;i<data.length;i++){
                    if (data[i].idParent == idParent){
                       hijos[j]= data[i];
                       j++;
                    }
                }
                return hijos;
            }

The function that recives the ajax call in the index.php is like this:

if (isset($_GET["menu"])) {
    $result = Array();
    $i=0;
    $result[$i]['id']=1;
    $result[$i]['idParent']=0;
    $result[$i]['title']='Seccion Principal';
    $i++;
    
    $result[$i]['id']=2;
    $result[$i]['idParent']=0;
    $result[$i]['title']='Otra Seccion';
    $i++;
    
    $result[$i]['id']=3;
    $result[$i]['idParent']=0;
    $result[$i]['title']='Última Seccion';
    $i++;
    
    $result[$i]['id']=4;
    $result[$i]['idParent']=1;
    $result[$i]['title']='Elemento1';
    $i++;
    
    $result[$i]['id']=5;
    $result[$i]['idParent']=2;
    $result[$i]['title']='Elemento1';
    $i++;
    
    $result[$i]['id']=6;
    $result[$i]['idParent']=3;
    $result[$i]['title']='Elemento1';
   
    echo json_encode($result);
    exit();
}

I hope you understand my code and It help you

[tamaraOntMember]

I have it.

You must to include the following:

 $("#cabecer").css('background-image', 'url(views/tpl/topMainBack.png)');

[tamaraOntMember]

I’m trying again:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="cache-Control" CONTENT="no-cache"> 
        <title>PRUEBA</title>
        <style>
            @import "css/style.css";    
        </style>
        <link rel="stylesheet" href="scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="scripts/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
        
        <script type="text/javascript" src="../frontend/scripts/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="../frontend/scripts/knockout-2.2.0.js"></script>
        <script type="text/javascript" src="../frontend/scripts/knockout-mapping-2.0.0.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxvalidator.js"></script> 
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxdockpanel.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxexpander.js"></script>
        <script type="text/javascript" src="../frontend/scripts/jqwidgets/jqxnavigationbar.js"></script>
        <style type="text/css">
           #cabecer
           {
               background-image: url(./topMainBack.png);
               background-position: right top;
               background-repeat:repeat-y;
           }
           #cabecer.jqx-widget-content
           {
               background-color: transparent;
           }
       </style>
       <script type="text/javascript">
           $(document).ready(function () {
               $("#mainLayout").jqxDockPanel({ width: 600, height: 600, theme:'darkblue' });
               $("#cabecer").jqxPanel({ width: 600, height: 100, theme:'darkblue'});
               //        $("#menu").jqxNavigationBar({ width: 400, height: 420, sizeMode: 'fitAvailableHeight', theme: 'darkblue' });
           });
       </script>
    </head>
   <body>
        <div id='mainLayout'>
            <div id="cabecer" class="cabecer">
                <div style="float:left">
                    <span class="tituloPrincipal">BB</span>
                </div>
                <div style="float:right">
                    <table>
                        <tr>
                            <td>Hola </td>                        
                        </tr>
                    </table>
                </div>   
            </div>
        </div>
    </body>
</html>

[Author]

Posts