How to Show Checkboxes in a Readonly ListView and Select the row on click of Checkbox


Hello Friends,

It’s been quite a while since I have created a new post as I was not getting time to do so.

Recently one of my friend approached me for a typical requirement in which he need to show a checkbox in a Read-only List view and then user check’s those check boxes to select rows which could be multiple at a time, Generally K2 smartforms doesn’t show checkboxes in read-only mode of  a list view. We know that we can select multiple rows using control + Mouse click on the row, but client was not happy with that approach and he insisted to use checkbox option in the grid.

Let’s see how we can do that.

Step 1: In the list view create a new column and drag a datalabel control into it. Check the Literal property and in Expression click on ellipse button, click add and then give expression a name and paste below script in it and click ok.

<input type="checkbox" />


Step 2: Create a new data label with name dlHighlightRow and drag on the layout and set visible to false. Now in layout click expression Symbol   click add and create new expression with name Highlight and paste below code in it and save.

 $('input[type="checkbox"]').each(function(index, item) {       
 if ($(this)[0].checked) {           
   $(this).closest('tr').addClass('highlighted selected');       
  } else {           
   $(this).closest('tr').removeClass('highlighted selected');       

Similarly add one more expression with below script and name it as NoScript


** Don’t forget to add script tags in starting and ending of jquery code, Here in post they are getting removed by default.  script

Step 3: Now in list view item click rule add below rules to set the expression value to data label dlHighlightRow first with Highlight Expression and second with NoScript Expression. Also set literal property to . This way we are dynamically injecting the script into the form also for each item click we are making it run.


Now you can use the rule For all Selected rows of the lisView to get the selected rows. That’s it, now save the view and run it see the Jquery Magic 😊 Note: The Highlight Expression that we created above has the main logic of looping through the checkboxes and see if it is selected and make the row selected. This script may not function properly if your view has more checkboxes other than that of in first column. If you have so, then we need to add a class in checkbox expression as below

<input type="checkbox" class="gridCities-CheckBox"/>

And Highlight expression we need to modify the code as

 $('.gridCities-CheckBox').each(function(index, item) {       
  if ($(this)[0].checked) {           
   $(this).closest('tr').addClass('highlighted selected');  
  } else {           
   $(this).closest('tr').removeClass('highlighted selected'); 

Also, there is another approach to achieve this which can be found at below article.

Note : In the approach explained in above article, list item click event & list item double click events will be disabled.


Basic jQuery/Javascript samples in smart forms

This article explains you below things

  1. How to create a button using data label with JavaScript.
  2. Trigger a Button Click event to run smart form rules from JavaScript.
  3. Update a Data label value from JavaScript.

Create a simple button using data label and java script and show a sample alert on its click.

Step 1: Drag and Drop a data label on smart form.

Step 2: Now in Properties Set Literal property to true

Step 3: Navigate to Expression property click on ellipse button to add a new expression, copy below js script and click ok


<button onclick="javascript:alert('You Clicked a DataLabel Button!!!');">This is a Data Label Button</button>


That’s it, Now Run the form and you see a button created from a data label and JavaScript. Screen shot below.


Now let’s see How to Trigger a Button Click event to run smart form rules from JavaScript.

Step 1: Drag and Drop a new Button Control.

Step 2: Add click event to the button added in Step 1, and add a rule to show message “Hello from Button Control

Step 3: Now run the form and open developer mode (hit F12) and inspect the button element, copy the id of button that you have added in Step 1

Step 4: once you have the id, you need to modify the script of data label button as below.

<button onclick="javascript:document.getElementById('00000000-0000-0000-0000-000000000000_79af447e-1e21-9933-8152-588f18d59d72').click()">This is a Data Label Button </button>


**00000000-0000-0000-0000-000000000000_79af447e-1e21-9933-8152-588f18d59d72 has to be replaced with id you copied from step 3

That’s it, now when you click Data Label Button, you’ll see Button Control’s rules getting executed.


Now Update a Data label value from JavaScript.

This is pretty much similar as above

Drag and drop a new dataLabel find its id using developer mode and replace the datalabel button script as below.

<button onclick="javascript:document.getElementById('00000000-0000-0000-0000-000000000000_f62b3928-a6e5-e16d-794a-9e9f4588bb2b').innerHTML=’Dynamically Set Text’” ()">This is a Data Label Button </button>


That’s it when you click data label button, you see the text of data label getting changed to “’Dynamically Set Text”.


This is how we can play around with jQuery/javascript in smartforms.


How to restrict right click on an image control in K2 Smart form

This article describes how to restrict right click on an image control in K2 Smart form at run time.

To achieve this we can use jQuery/JavaScript, to bind ‘contextmenu’ event handler which will return false on Image right click in smart form.

Let’s walk through a small example where I have disabled right click on image. Here I have used both image tag and image id as selector to disable the right click.

Image tag will allow us to disable right click on all the images, while Image id will disable right click on a particular image.

Step1: In Your SmartForm Drag and Drop Data Label and Set Literal property as checked.

Step2: Set visible property to False.



Step3: Now Under Expression property add below Script

  1. To disable right click on All Images on smart form. 
    $('img').bind('contextmenu', function(e) {
        return false;
  2. To disable right click of a particular image on smart form
    Use below sample query to disable right click for particular image.

    $(“Image css selector path”).bind('contextmenu', function(e) 
        return false;



    To get “Image CSS selector path” refer below steps.

     Access Your Smart form in web page at runtime mode.

    Now access developer options in browser (hit F12), select inspect button and then click on image. Which will show you id as below highlighted.



    Copy that id and replace in the above script text “Image css selector path”.

    < script >
    $('#00000000-0000-0000-0000-000000000000_eaba1ae9-6753-a2fb-dadf-1a0450e38262_Picture').bind('contextmenu', function(e) 
           return false; 
    < /script >


    Now copy this script and add it to expressions property.


Step 4: Once you are done with Changes Save you smart form and access in run time mode.