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
- To disable right click on All Images on smart form.
$('img').bind('contextmenu', function(e) { return false; });
- 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.