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:

- 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:
- Retrieve the first three rows of the list view
- Insert the retrieved rows in a K2 control (DataLabel)
- Trigger the JQuery code snippet
Let’s go !!! 😎
-
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
-
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:

-
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 :
First transfer data is used to empty the Data Label dl_JQuery

Second transfer data is used to empty the Data Label dl_JQuery

So we can call our rule when initializing the view:

We obtain this result
