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

CheckBoxesGIF 

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

expressionChkbox.jpg

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

script.JPG

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

transferrule.jpg

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

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

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

https://dudelisdev.blogspot.com/2017/11/k2-how-to-select-rows-with-checkboxes.html

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

 

Author: Vijay

I'm a K2 Certified Developer, helping teams to automate, design, develop & maintain business process applications connecting across multiple platforms with multiple technologies.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s