Insert a value into a K2 control via JQuery

Sometimes there are operations that are not feasible or hardly feasible on K2. But that we can do via JQuery, only we need to store in a K2 control the result that the JQuery code returns. How to do it?  😕  

Let’s imagine this case: We have a list view containing the list of students of a class, and we want to display the first three students of a list without user interaction after loading the view. As below:

Insérer une valeur dans un contrôle K2 via JQuery

  • How to do it without user interaction?  😯 
  • Answer: By writing in a K2 control via JQuery.  😉

We will use JQuery and we will do it in two steps:

  1. Retrieve the first three rows of the list view
  2. Insert the retrieved rows in a K2 control (DataLabel)
  3. Trigger the JQuery code snippet

Let’s go !!!  😎

  1. Retrieve the first three rows of the list view

First we should add a DataLabel on the view to identify the view (in our case we will call it dl_FirstStudentName). Then from this Data Label we will use this piece of code :

a) Recovery of the 1st line

$('span[name="dl_FirstStudentName"]').closest('.grid-toolbars').siblings('.grid-body').find('.grid-body-content tr:first td:first span').text()
Récupération de la 1er ligne

 

b) Recovery of the 2nd line

$('span[name="dl_FirstStudentName"]').closest('.grid-toolbars').siblings('.grid-body').find('.grid-body-content tr:nth-child(2)  td: first span').text()
Récupération de la 2ième ligne

 

c) Recovery of the 3rd line

$('span[name="dl_FirstStudentName"]').closest('.grid-toolbars').siblings('.grid-body').find('.grid-body-content tr:nth-child(3)  td: first span').text()
Récupération de la 3ième ligne

 

  1. Insert the retrieved rows in K2 control (DataLabel) :

Here is the JQuery code snippet to insert text into a DataLabel :

$("[name='dl_FirstStudentName']").SFCLabel('option', 'text', XXXXX);
Insérer du texte dans un Data Label

The value XXXXX will be replaced by the recovery code of the first three lines which will give us the following code:

<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>

Let’s insert on our view a Data Label (named dl_JQuery in our case), then create an expression containing expression below this value:

Insérer une valeur dans un contrôle K2 via JQuery : Expression

  1. Trigger the JQuery code snippet

Cette phase nous permet lancer l’exécution de notre code, pour ce faire nous utiliserons une règle sur K2 :Insérer une valeur dans un contrôle K2 via JQuery: Règle

First transfer data is used to empty the Data Label dl_JQuery

Insérer une valeur dans un contrôle K2 via JQuery: Règle

Second transfer data is used to empty the Data Label dl_JQuery

Insérer une valeur dans un contrôle K2 via JQuery: Règle

So we can call our rule when initializing the view:

Insérer une valeur dans un contrôle K2 via JQuery: Règle

We obtain this result

Insérer une valeur dans un contrôle K2 via JQuery