display datafield in jqxtabs

[samarcheParticipant]

Hi
After hours, I can't figure out how to display custom data in Tabs.
In other words, I've a MainGrid, on rowclik it opens a Jqxwindows containing Tabs. Each tab dispaly data dpending on the selected row in the MainTab (id).
All of that seems to work fine. Some tabs have multiples rows but the first tab ("TabInfoPerso") have to display data not in column as usual but displayed like the 1st tab in the "rowdetail" demo
I just can't find how to realize that.

Could you give me somme help or show me the right way ?

Many Thanks 
Sam.
here my code :

$(document).ready(function () {
          
  /*** Variable Globale pour Iduser ***/
          var id=0;

    var initTabInfoPerso = function (id) {
    var InfoPersoSource =
                  {
                      datatype: "json",
                      datafields: [
                          { name: 'IDUSER'},
                          { name: 'CIV'},
                          { name: 'NOMPRENOM'},
                          { name: 'DTNAISSANCE', type: "date", format: 'dd.MM.yyyy'},
                          { name: 'VILLE'},
                          { name: 'PAYS'},
                          { name: 'MOBILE'},
                          { name: 'ADR1'},
                          { name: 'ADR2'},
                          { name: 'EMAIL'},
                          { name: 'TEL'},
                          { name: 'MOBILE'},
                          { name: 'CREATION'}
                      ],
                      url: 'grid_serverpaging_data.php?id='+id,
                      root: 'Rows',
                      cache: false,
                      beforeprocessing: function(data) {InfoPersoSource.totalrecords = data[0].TotalRows;}
              };
			
              var InfoPersoAdapter = new $.jqx.dataAdapter(
                  InfoPersoSource, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error);} }
              );
			
              $("#TabInfoPerso").jqxGrid(
                  {
                      source: InfoPersoAdapter,
                      width: '100%',
                      rowdetails: true,
                      initrowdetails: initrowdetails,
                      autoheight: true,
                      pageable: true,
                      virtualmode: true,
                      rendergridrows: function() {return InfoPersoAdapter.records;},
                      columns: [
                          { text: 'ID', datafield: 'IDUSER', width: 50 },
                          { text: 'Titre', datafield: 'CIV', width: 30 },
                          { text: 'Nom - Prénom', datafield: 'NOMPRENOM', width: 250 },
                          { text: 'Dt Naissance', datafield: 'DTNAISSANCE', width: 150 },
                          { text: 'Ville', datafield: 'VILLE', width: 250 },
                          { text: 'Pays', datafield: 'PAYS', width: 50 },
                          { text: 'Tel mobile', datafield: 'MOBILE', width: 120 },
                          { text: 'Bac - Spécialité', datafield: 'BAC_SPECIALITE', width: 250 },
                          { text: 'Boursier', datafield: 'BOURSIER', threestatecheckbox: true, columntype: 'checkbox', width: 70 },
                          { text: 'Paiement', datafield: 'PAIEMENT', width: 70 }
                      ]		  
              });

              var initrowdetails = function (index, parentElement, gridElement, datarecord) {
	          alert(''); /* doesn't even fire*/
                  var record = $("#TabInfoPerso").jqxGrid('getrowdata', index);
                  var nmpr = datarecord.NOMPRENOM; /* Is that is correct ?*/
                  information = $.find('.TabInfoPerso');
                  var container = $('<div style="margin: 5px; height:150px; border: 2px solid red">test</div>');
                  container.appendTo($('#TabInfoPerso'));
                  var photocolumn = $('<div style="float: left; width: 15%; margin: 5px; border: 2px solid black"></div>');
                  var leftcolumn = $('<div style="float: left; width: 45%;margin: 5px;  border: 2px solid gren"></div>');
                  var rightcolumn = $('<div style="float: left; width: 40%;margin: 5px; border: 2px solid yellow"></div>');
                  container.append(photocolumn);
                  container.append(leftcolumn);
                  container.append(rightcolumn);
              }
          }

/*** The Main Grid ***/
          var MainSource =
              {
                  datatype: "json",
                  datafields: [
                      { name: 'IDUSER'},
                      { name: 'CIV'},
                      { name: 'NOMPRENOM'},
                      { name: 'DTNAISSANCE', type: "date", format: 'dd.MM.yyyy'},
                      { name: 'VILLE'},
                      { name: 'PAYS'},
                      { name: 'MOBILE'},
                      { name: 'BAC_SPECIALITE'},
                      { name: 'SCOLARITE'},
                      { name: 'PAIEMENT'},
                      { name: 'BOURSIER', type : 'bool'}
                  ],
                  url: 'grid_serverpaging_data.php',
                  id : 'IDUSER',
                  root: 'Rows',
                  cache: false,
                  beforeprocessing: function(data) {MainSource.totalrecords = data[0].TotalRows;}
              };
					
              var MainAdapter = new $.jqx.dataAdapter(
                  MainSource, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }
              );

         //PRESENTATION DES DONNEES DU TABLEAU PRINCIPAL 
              $("#TabMain").jqxGrid(
                  {
                      width: '100%',
                      source: MainAdapter,
                      autoheight: true,
                      pageable: true,
                      virtualmode: true,
                      rendergridrows: function() {return MainAdapter.records;},
                      columns: [
                          { text: 'ID', datafield: 'IDUSER', width: 50 },
                          { text: 'Titre', datafield: 'CIV', width: 30 },
                          { text: 'Nom - Prénom', datafield: 'NOMPRENOM', width: 250 },
                          { text: 'Dt Naissance', datafield: 'DTNAISSANCE', width: 150 },
                          { text: 'Ville', datafield: 'VILLE', width: 250 },
                          { text: 'Pays', datafield: 'PAYS', width: 50 },
                          { text: 'Tel mobile', datafield: 'MOBILE', width: 120 },
                          { text: 'Bac - Spécialité', datafield: 'BAC_SPECIALITE', width: 250 },
                          { text: 'Boursier', datafield: 'BOURSIER', threestatecheckbox: true, columntype: 'checkbox', width: 70 },
                          { text: 'Paiement', datafield: 'PAIEMENT', width: 70 }
                      ]
              });
         // FIN PRESENTATION DES DONNEES DU TABLEAU PRINCIPAL 

/*** FONCTIONS SUR TABLEAU PRINCIPAL ***/ 
  
     $('#TabMain').bind('rowclick', function (event) {
         var row = event.args.rowindex;
         var datarow = $("#TabMain").jqxGrid('getrowdata', row);
         id = datarow.IDUSER; 				
         $('#window').jqxWindow({
         showCollapseButton: true, maxHeight: 900, maxWidth: 1000, minHeight: 200, minWidth: 200, height: 300, width: 900 
     });
    $('#tab2').jqxTabs({ width: '100%', height: '100%',  initTabContent: initWidgets, animationType: 'fade', selectionTracker: true });
    $("#tab2").css('visibility', 'visible');
    $("#windowHeader").css('visibility', 'visible');
    $('#window').jqxWindow('open');

    $('#window').on('close', function (event) { 
        location.reload();
    });
});	

   var initWidgets = function (onglet) {
       switch (onglet) {
           case 0:
               initTabInfoPerso(id);
               break;
           case 1:
               initTabDiplome(id);
               break;
           case 2:
               initTabCpl(id);
               break;
       }
   }

        }); /*** FIN DE document.ready(function () ***/
    </script>
</head>
<body class='default'>
    <div id="TabMain"></div>
    <div id="jqxWidget">
        <!-- <div style="width: 100%; height: 650px; margin-top: 50px; border: 3px solid #F00" id="mainDemoContainer"> -->
            <div id="window">
                <div id="windowHeader" style="overflow: hidden;visibility:hidden;">
                    <span>
                    <!-- Image dans le titre -->
                        <img src="../jqwidgets-ver3.6.0/images/movie.png" alt="" />Détails
                    </span>
                </div>
                <div style="overflow: hidden;visibility:hidden;" id="windowContent">
                    <div id="tab2">
                        <ul style="margin-left: 30px;">
                            <li>
                                <div style="height: 40px;">
                                    <img width='32' height='32' src="../jqwidgets-ver3.6.0/images/building_small.jpg" alt="" />
                                    <div style="float: left; margin-left: 6px; text-align: center; margin-top: 5px; font-size: 13px;">
                                      Informations personnelles
                                    </div>
                                </div>          
                            </li>
                            <li>Etudes - Diplômes</li>
                            <li>Iformations Complémentaires</li>
                            <li>Expériences professionnelles</li>
                            <li>Expériences personnelles</li>
                            <li>Scolarité</li>
                            <li>Droits d'Inscription</li>
                        
                        <div id="TabInfoPerso">
                            INFORMATIONS PERSONNELLES
                        </div>
                        <div id="TabDiplome">
                            <img src="../jqwidgets-ver3.6.0/images/avatar.png" alt="" />
                            DIPLOMES
                        </div>
                        <div id="TabCpl">
                            <img src="../jqwidgets-ver3.6.0/images/endgame.png" alt="" />
                            COMPLEMENTS
                        </div>
                        <div>
                            <img src="../jqwidgets-ver3.6.0/images/twilight.png" alt="" />
                            EXPERIENCES PROFESSIONNELLES
                        </div>
                        <div>
                            <img src="../jqwidgets-ver3.6.0/images/unstoppable.png" alt="" />
                            EXPERIENCES PERSONNELLES
                        </div>
                        <div>
                            <img src="../jqwidgets-ver3.6.0/images/priest.png" alt="" />
                            SCOLARITE ENVISAGEE
                        </div>
                        <div>
                            <img src="../jqwidgets-ver3.6.0/images/priest.png" alt="" />
                            INSCRIPTION
                        </div>
                    </div>
                </div>
            </div>
        <!-- </div> -->
    </div>
</body>
</html>

[Peter StoevKeymaster]

Hi Sam,

To dynamically change the content of a particular tab, use the setContentAt method of jqxTabs – http://jsfiddle.net/jqwidgets/D67hd/. If you want to change the Title, too – setTitleAt method is available.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[samarcheParticipant]

Hi Peter,

Thanks for ur answer. I’ll try it right away and keep u informed.

[Author]

Posts