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.

 

Advertisements

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.

Screen2

 

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.

    FormWithF12

  3.  

    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.

    Screen3

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