I try with this but every time I click to change panels the event it's fired and show console.log message instead only when I switch to the #panel-classifica.

$('#panel-classifica').panel({
        onOpen: function(title,index){

            console.log('pannello caricato');
            return false;   // prevent from closing
        }
    });

I'm sorry but I don't find in documentation how to use events in panel module. What is the right sintax?

I use easyui-navpanel in a mobile project and I need to trigger when user change panels.

I have resolved in different way, I use formatter of a field. In the result of formatter I have a row with all available data so I can show name+surname in the same cell.

I have a datagrid with some columns, I want to merge two cols in one for better mobile reading. How to?

For example my data {id: 1234, name: john, surname: doe, address: mmmmm, email: mmmmmm}

I want to display name and surname separated by <br> in one col.

thank you very much jarry.

but I don't understand the concept of the "field" Properties of column. The documentation say "The column field name." But if this name reflect the json data how works with "punti_singole_gare_0_punti_assoluto" that don't exist in my json data?

Hello,

I have a datagrid with json remote data but the columns headers don't fit the width of the rows cell, see picture.

How can I fit columsn P.1, P.2, ecc to the same fixed width?

this is my datagrid code:


function getClassificaTrofeo(classifica, title){
                var tabella = '#tabella_classifica_trofeo_'+classifica;
                var url = 'classifica_trofeo.php?class='+classifica;

                console.log(url);
                $(tabella).datagrid({
                    title: title,
                    url: url,
                    striped: true,
                    fitColumns: true,
                    fit: true,
                    pagination: true,
                    method: 'get',
                    rownumbers: true,
                    loadMsg: 'Attendere caricamento dati!',
                    pageList: [100,150,200,300,500,1000],
                    toolbar:  [{
                        text:'Stampa',
                        iconCls:'icon-pdf',
                        handler:function(){
                            $.messager.confirm('Conferma!', 'Vuoi stampare questa classifica?', function(r){
                                if (r)
                                {
                                    $.post(
                                        'dummypage.html',
                                        function(data)
                                        {
                                            window.open(encodeURI('classifica_pdf.php?class='+classifica+'&id_gara=<?php echo $id_gara; ?>'));
                                        });
                                }
                            });
                        }
                    },
                        {
                            text:'Esporta',
                            iconCls:'icon-export',
                            handler:function(){esportaClassifica(classifica, title)}
                        },
                    ],
                    columns:[[
                        {field:'nome',title:'Nome', width: 100, resizable: false},
                        {field:'societa',title:'Societa', width: 100, resizable: false},
                        {field:'categoria',title:'Cat.',resizable: false},
                        {field:'punteggio',title:'Punti',resizable: false},
                        {field:'punti_singole_gare[0].punti_assoluto',title:'P.1', align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[0].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[1].punti_assoluto',title:'P.2',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[1].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[2].punti_assoluto',title:'P.3',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[2].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[3].punti_assoluto',title:'P.4',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[3].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[4].punti_assoluto',title:'P.5',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[4].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[5].punti_assoluto',title:'P.6',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[5].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[6].punti_assoluto',title:'P.7',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[6].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[7].punti_assoluto',title:'P.8',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[7].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[8].punti_assoluto',title:'P.9',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[8].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[9].punti_assoluto',title:'P.10',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[9].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[10].punti_assoluto',title:'P.11',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[10].punti_assoluto;
                        }},
                        {field:'punti_singole_gare[11].punti_assoluto',title:'P.12',align:'center', resizable: false, formatter:function(value,row){
                            return row.punti_singole_gare[11].punti_assoluto;
                        }}

                    ]]
                });
                $(tabella).datagrid('reload');
            }

Ok thank you, I miss this property because in old version of jeasyui it's not required in pagination.

The datagrid on load it's empty because the rows parameter in get it's NaN. If I change the numbers of rows in the datagrid dropdown the data it's display.

If I remove pageList attribute from datagrid properties the data it's display.

Hello,

I have a personal application written some years ago and now I'm tring to update jeasyui to the latest version 1.5.2 but I think foun a bug on all pagination of datagrid that I have in my application.

This is my code of one table datagrid:

$('#tabella_iscritti').datagrid({
             title:'Elenco iscritti',
             url:'iscritti.php?action=list',
             striped: true,
             fitColumns: true,
             singleSelect: true,
             method:'get',
             method: 'get',
             pagination: true,
             pageList: [100,150,200,300,500],
             rownumbers : true,
             loadMsg: 'Attendere caricamento dati!',
             columns:[[
                 {field:'dorsale',title:'Dorsale', width: 20},
                 {field:'nome',title:'Nome', width: 100},
                 {field:'nome_societa',title:'Societa', width: 100},
                 {field:'categoria',title:'Cat.', width: 20},
                 {field:'anno',title:'Anno', width: 20}
             ]]
         });