Category: K2 Five

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:

• 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 1^st line

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

b) Recovery of the 2^nd line

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

c) Recovery of the 3^rd line

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

2. 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);

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:

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