Très souvent il y a des opérations qui sont pas faisables ou difficilement faisables sur K2. Mais que nous pouvons faire via JQuery, seulement nous avons besoin de stocké dans un contrôle K2 le résultat que nous renvoi le code JQuery. Comment le faire? 😕 

Imaginons ce cas de figure : Nous avons une vue liste contenant la liste des élèves d’une classe , et nous voulons après le chargement de la vue afficher les trois premiers étudiants d’une liste sans interaction de l’utilisateur. Comme ci-dessous :

• Comment le faire sans interactions de l’utilisateur ? 😯 
• Réponse: En écrivant dans un contrôle K2 Via JQuery.  😉

On utilisera le JQuery et on le fera en deux étapes :

1. Récupérer les trois premières lignes de la vue liste
2. Insérer les lignes récupérées dans un contrôle K2 (DataLabel)
3. Déclencher le bout de code JQuery

Allons-y !!!  😎

1. Récupérer les trois premières lignes de la vue liste

Premièrement il faudrait ajouter un dataLabel sur la vue pour identifier la vue (dans notre cas nous l’appellerons dl_FirstStudentName). Ensuite à partir de ce Data Label nous utiliserons ce bout de code :

a) Récupération de la 1^er ligne

$('span[name="dl_FirstStudentName"]').closest('.grid-toolbars').siblings('.grid-body').find('.grid-body-content tr:first td:first span').text()

b) Récupération de la 2^ième ligne:

$('span[name="dl_FirstStudentName"]').closest('.grid-toolbars').siblings('.grid-body').find('.grid-body-content tr:nth-child(2)  td: first span').text()

c) Récupération de la 3^ième ligne:

$('span[name="dl_FirstStudentName"]').closest('.grid-toolbars').siblings('.grid-body').find('.grid-body-content tr:nth-child(3)  td: first span').text()

2. Insérer les lignes récupérées dans un contrôle K2 (DataLabel):

Voici le bout de code JQuery permettant d’insérer du texte dans un DataLabel :

$("[name='dl_FirstStudentName']").SFCLabel('option', 'text', XXXXX);

La valeur XXXXX sera remplacée par le code de récupération des trois premières lignes ce qui nous donnera le code suivant :

<script>$("[name='dl_FirstStudentName']").SFCLabel('option', 'text', 
'1-) ' + $('span[name="dl_FirstStudentName"]').closest('.grid-toolbars').siblings('.grid-body').find('.grid-body-content tr:first td:nth-child(2) span').text() + "\n" + 
'2-) ' + $('span[name="dl_FirstStudentName"]').closest('.grid-toolbars').siblings('.grid-body').find('.grid-body-content tr:nth-child(2) td:nth-child(2) span').text()+ "\n" + 
'3-) ' + <script>$('span[name="dl_FirstStudentName"]').closest('.grid-toolbars').siblings('.grid-body').find('.grid-body-content tr:nth-child(3) td:nth-child(2) span').text());</script>

Insérons sur notre vue un Data Label (nommé dl_JQuery dans notre cas), ensuite créons une expression contenant expression ci-dessous cette valeur :

3. Déclencher le bout de code JQuery

Cette phase nous permet lancer l’exécution de notre code, pour ce faire nous utiliserons une règle sur K2 :

Premier transfer data sert à vidé le Data Label dl_JQuery

Deuxième transfer data sert à vidé le Data Label dl_JQuery

Nous pouvons donc appeler notre règle lors de l’initialisation de la vue :

On obtient ce résultat