2017-06-16 3 views
0

Dans Angular, j'essaie d'appliquer un thème à ma grille.JqWidgets - Application d'un thème à un jqxgrid

Ma grille

  <div class="panel-body"> 
      <jqxGrid #reference 
       [width]='1505' [source]='dataAdapter' [pageable]='true' [height]='500' 
       [editable]='true' [columns]='columns'> 
      </jqxGrid> 

      </div>  

Dans les jqwidgets folder il y a un thème que je voudrais utiliser pour la table dans les jqx.energyblue.css

Je ne suis pas sûr comment appeler cela dans la grille I créé. Je suis nouveau à cela. Toute aide est très appréciée.

MISE A JOUR ***

j'ai pu faire quelques progrès. Dans l'index.html j'ai pu définir la propriété de thème.

<link href="assets/css/jqx.base.css" rel="stylesheet"> 
    <link href="assets/css/jqx.energyblue.css" rel="stylesheet"> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      // Set the theme. 
      $("#jqxTheme").jqxGrid({ theme: "energyblue" }); 
     }); 
    </script> 

Puis apporté des modifications à la grille elle-même.

   <div class="panel-body"> 
       <jqxGrid id='jqxTheme' 
        [width]='1505' [source]='dataAdapter' [pageable]='true' [height]='500' 
        [editable]='true' [columns]='columns'> 
       </jqxGrid> 

       </div> 

Cela ne fonctionne toujours pas. Des idées?

+0

J'ai fait quelques progrès, mais toujours pas de succès. Presque là. Les changements sont illustrés ci-dessus. – Adrew

+0

Les erreurs dans la console se lisent comme. 1) ReferencError: $ n'est pas défini 2) JavaScript de Bootstrap nécessite jQuery – Adrew

Répondre

0

Vous l'avez. Appliquer le nom du thème css à votre jqxGrid

<jqxGrid 
     [width]='1505' [source]='dataAdapter' [pageable]='true' [height]='500' 
     [editable]='true' [columns]='columns' [theme]='"energyblue"'> 
    </jqxGrid>