eXcell type dhx colorPicker doesn't show the popup

Hello!

I can’t find any solution, so I ask you…
I’ve got a Grid with splitAt and groupBy fonction.
I can edit all data’s, I have the right result with the color, so it seem to be working, but I don’t have the pop when click or dblclick.

All is loaded in a dhxcell’s layout.

Here is the DHX script loaded :

  <!-- DHX Common -->
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxCommon/codebase/dhtmlxcommon.js"></script>
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxCommon/codebase/dhtmlxcontainer.js"></script>
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxCommon/codebase/dhtmlxcore.js"></script>

  <!-- DHX Color Picker -->
  <link href="/tools/dhtmlxSuite/sources/dhtmlxColorPicker/codebase/skins/dhtmlxcolorpicker_material.css" rel="stylesheet">
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxColorPicker/codebase/dhtmlxcolorpicker.js"></script>

  <!-- DHX Grid -->
  <link href="/tools/dhtmlxSuite/sources/dhtmlxGrid/codebase/skins/dhtmlxgrid_material.css" rel="stylesheet">
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_grid.js"></script>
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxGrid/codebase/ext/dhtmlxgrid_ssc.js"></script>
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_dhxcalendar.js"></script>
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_sub_row.js"></script>
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxGrid/codebase/ext/dhtmlxgrid_group.js"></script>
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxGrid/codebase/ext/dhtmlxgrid_splt.js"></script>
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_acheck.js"></script>

  <!-- DHX Calendar -->
  <link href="/tools/dhtmlxSuite/sources/dhtmlxCalendar/codebase/skins/dhtmlxcalendar_material.css" rel="stylesheet">
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>

  <!-- DHX Message -->
  <link href="/tools/dhtmlxSuite/sources/dhtmlxMessage/codebase/skins/dhtmlxmessage_material.css" rel="stylesheet">
  <script type="text/javascript" src="/tools/dhtmlxSuite/sources/dhtmlxMessage/codebase/dhtmlxmessage.js"></script>

And here is my grid function :

      function show_grid() {
          mygrid = new dhtmlXGridObject('gridbox');
          mygrid.setImagePath("tools/dhtmlxSuite/sources/dhtmlxGrid/codebase/imgs/dhxgrid_material/");
          mygrid.setHeader(
              [
                  "Identification",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "&nbsp;",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "Options de base",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "Sessions à heure fixe",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "#cspan",
                  "Système",
                  "#cspan",
                  "#cspan"
              ],
              null,
              [
                  "text-align:center;font-weight:bold;background-color:#CCCCCC;color:#FFFFFF;",
                  "",
                  "",
                  "",
                  "",
                  "",
                  "background-color:#CCCCCC;color:#FFFFFF;",
                  "",
                  "",
                  "",
                  "",
                  "",
                  "",
                  "",
                  "",
                  "",
                  "text-align:center;font-weight:bold;background-color:#BABABA;color:#FFFFFF;",
                  "",
                  "",
                  "",
                  "",
                  "",
                  "",
                  "",
                  "text-align:center;font-weight:bold;background-color:#969696;color:#FFFFFF;",
                  "",
                  "",
                  "",
                  "",
                  "text-align:center;font-weight:bold;background-color:#7A7A7A;color:#FFFFFF;",
                  "",
                  ""
              ]
          );
          mygrid.attachHeader([
                  "SID",
                  "Editer",
                  "Type",
                  "Famille",
                  "Nom",
                  "Système de base",
                  "+",
                  "Couleur",
                  "",
                  "Prix",
                  "% points<br>bonus",
                  "Points<br>bonus",
                  "Nb. points",
                  "Forcer<br>date début",
                  "Jours de validité",
                  "Réserv. unique",
                  "Nb max. H/J",
                  "Nbre max. réservations simultanées",
                  "Nbre max. d'installations parallèles",
                  "H consécutives par type d'installation",
                  "H consécutives type d'install différent",
                  "Réservation à l'avance [H]",
                  "Annulation<br>jusqu'à [H]",
                  "Autoriser<br>heures fixes",
                  "Réservation Heures fixes à l'avance",
                  "Autoriser n sessions à heure fixe",
                  "Temps max. pour heure fixe [H]",
                  "Nbre max. de crénaux HF simultanés",
                  "Autoriser n sessions<br>HF hebdomadaires",
                  "Visibilité",
                  "Activer les alertes",
                  "Ordre de tri"
              ],
              [
                  "vertical-align:bottom;text-align:center;",
                  "vertical-align:bottom;text-align:center;",
                  "vertical-align:bottom;",
                  "vertical-align:bottom;",
                  "vertical-align:bottom;",
                  "vertical-align:bottom;",
                  "vertical-align:bottom;text-align:left",
                  "vertical-align:bottom;",
                  "vertical-align:bottom;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:center;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:center",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:center",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:center",
                  "vertical-align:bottom;text-align:center",
                  "vertical-align:bottom;text-align:center"
              ]);
          mygrid.attachHeader([
                  "",
                  "",
                  "#select_filter_strict",
                  "#select_filter_strict",
                  "#text_filter",
                  "#select_filter_strict",
                  "",
                  "#text_filter",
                  "",
                  "#numeric_filter",
                  "#numeric_filter",
                  "#numeric_filter",
                  "#numeric_filter",
                  "#filter_checkbox",
                  "#numeric_filter",
                  "#filter_checkbox",
                  "#numeric_filter",
                  "#numeric_filter",
                  "#numeric_filter",
                  "#numeric_filter",
                  "#numeric_filter",
                  "#numeric_filter",
                  "#numeric_filter",
                  "#filter_checkbox",
                  "#numeric_filter",
                  "#numeric_filter",
                  "#numeric_filter",
                  "#numeric_filter",
                  "#numeric_filter",
                  "#select_filter_strict",
                  "#filter_checkbox",
                  "#numeric_filter"
              ],
              [
                  "vertical-align:bottom;text-align:center;",
                  "vertical-align:bottom;text-align:center;",
                  "vertical-align:bottom;",
                  "vertical-align:bottom;",
                  "vertical-align:bottom;",
                  "vertical-align:bottom;",
                  "vertical-align:bottom;text-align:left",
                  "vertical-align:bottom;",
                  "vertical-align:bottom;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:center;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:center",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:center",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:right;padding-right: 4px;",
                  "vertical-align:bottom;text-align:center",
                  "vertical-align:bottom;text-align:center",
                  "vertical-align:bottom;text-align:center"
              ]);
          mygrid.setColumnIds("" +
              "O_TYPESA.SID," +
              "EDIT," +
              "O_TYPESA.F_TYPEABONNEMENT," +
              "O_TYPESA.F_FAMILLE," +
              "O_TYPESA.F_NOM," +
              "O_TYPESA.F_SYSTEMEDEBASE," +
              "O_TYPESA.F_DESCRIPTION," +
              "O_TYPESA.F_COULEUR,"+
              "CP_COULEUR,"+
              "O_TYPESA.F_PRIXNET," +
              "O_TYPESA.F_BONUSPOURCENT," +
              "O_TYPESA.F_BONUSPOINT," +
              "O_TYPESA.F_NOMBREDEPOINTS," +
              "O_TYPESA.F_DATEDEBUTFORCEE," +
              "O_TYPESA.F_VALIDITEENJOURS," +
              "O_TYPESA.F_RESERVATIONUNIQUE," +
              "O_TYPESA.F_NBMAXHEURESPARJ," +
              "O_TYPESA.F_MAXRESERVSIMULT," +
              "O_TYPESA.F_NBMAXINSTALLATION," +
              "O_TYPESA.F_HCONSPARTYPEINSTA," +
              "O_TYPESA.F_HCONSPOURTYPEDIFF," +
              "O_TYPESA.F_NBHEURESALAVANCE," +
              "O_TYPESA.F_ANNULJUSQUAHEURES," +
              "O_TYPESA.F_AUTHEURESFIXES," +
              "O_TYPESA.F_NBHALAVANCEHF," +
              "O_TYPESA.F_NBRESESSIONSHFMAX," +
              "O_TYPESA.F_F_TEMPSMAXAHEUREF," +
              "O_TYPESA.F_NBMAXCRENAUXHF," +
              "O_TYPESA.F_AUTORMAXHFHEBDO," +
              "O_TYPESA.F_VISIBILITE," +
              "O_TYPESA.F_ACTIVERLESALERTES," +
              "O_TYPESA.F_ORDREDETRI"
          );

          mygrid.setColTypes("ro,ro,ro,ro,ed,co,sub_row,ed,cp,edn,edn,ro,ro,ch,edn,ch,edn,edn,ed,ed,ed,ed,ed,ch,ed,ed,ed,ed,ed,co,ch,ed");
          mygrid.setInitWidths("0,80,0,140,140,160,50,85,70,100,80,80,100,100,60,100,80,80,120,120,120,120,120,120,120,120,120,120,150,100,100,100");
         
          mygrid.setColumnMinWidth("0,40,140,140,85,85,50,70,50,100,80,80,100,100,60,100,80,80,120,120,120,120,120,120,120,120,120,120,150,100,100,100");
          mygrid.setColAlign("left,center,left,left,left,left,left,left,left,right,right,right,right,center,right,center,right,right,right,right,right,right,right,center,right,right,right,right,right,center,center,center");
          mygrid.enableEditEvents(false, true, false);
          mygrid.setColSorting("str,str,str,str,str,str,str,str,str,int,int,int,int,str,int,str,int,int,int,int,int,int,int,str,int,int,int,int,int,str,str,int");
          mygrid.enableTooltips("true,true,true,true,true,true,false,true,true,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false");
          //mygrid.setColumnsVisibility("true,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false");
          mygrid.setDateFormat("%d.%m.%Y");
          mygrid.enableAutoWidth(false);
          mygrid.enableAutoHeight(false);
          mygrid.enableMultiselect(true);
          mygrid.enableColSpan(true);

          mygrid.setNumberFormat("0.00 [SXSWEBSYS.O_CENTRE.F_DEVISES]", getColId('O_TYPESA.F_PRIXNET'));
          mygrid.setNumberFormat("0%", getColId('O_TYPESA.F_BONUSPOURCENT'));
          mygrid.setNumberFormat("0", getColId('O_TYPESA.F_BONUSPOINT'));
          mygrid.setNumberFormat("0", getColId('O_TYPESA.F_VALIDITEENJOURS'));
          mygrid.setNumberFormat("0.00", getColId('O_TYPESA.F_NBMAXHEURESPARJ'));
          mygrid.setNumberFormat("0", getColId('O_TYPESA.F_MAXRESERVSIMULT'));

          mygrid.attachEvent("onEditCell", onEditCell);
          mygrid.attachEvent("onRowSelect", onRowSelect);
          mygrid.attachEvent("onMouseOver", onMouseOver);
     

          combosyst = mygrid.getCombo(getColId('O_TYPESA.F_SYSTEMEDEBASE'));
          combosyst.put('Abonnement saisonnier','Abonnement saisonnier');
          combosyst.put('Abonnement à points','Abonnement à points');
          mycombo = mygrid.getCombo(getColId('O_TYPESA.F_VISIBILITE'));
          mycombo.put('Publique','Publique');
          mycombo.put('Privée','Privée');

          // mygrid.attachEvent("onRowDblClicked", function(rId,cInd){
          //     return true;
          // });


          mygrid.attachEvent("onFilterEnd", function(elements){
              mygrid.groupBy(getColId('O_TYPESA.F_TYPEABONNEMENT'), ["#title", "#cspan", "#cspan", "#cspan", "#cspan", "", "", "","", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]);
          });

          mygrid.attachEvent("onXLE", function() {
              mygrid.splitAt(getColId('O_TYPESA.F_DESCRIPTION'));
              mygrid.groupBy(getColId('O_TYPESA.F_TYPEABONNEMENT'), ["#title", "#cspan", "#cspan", "#cspan", "#cspan", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]);
              parent.cellData.progressOff();
          });

          mygrid.setSkin("material");
          mygrid.init();

          loadGridData();
      }

Do you have any idea ?
I have no errors on the firefox or chrome console.

Thanks for your help!

Unfortunately the problem cannot be reproduced locally.
Your code works well for me, and the colorpicker pops up successfully.
If the porblem still occurs for you please, provide a complete demo, where the problem can be reproduced.
Here you can find a tutorial about creating a complete demo:
docs.dhtmlx.com/tutorials__auxi … pport.html