> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap/general/frontend/documentation/webforms-angular-components/directives.md).

# Directives

### Client Click

Adds supports for Button and LinkButton \[System.Web.UI.WebControls.IButtonControl] OnClientClick property.

Reference documentation:

* [Button OnClientClick](https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.button.onclientclick?view=netframework-4.8#system-web-ui-webcontrols-button-onclientclick)
* [LinkButton OnClientClick](https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.linkbutton.onclientclick?view=netframework-4.8#system-web-ui-webcontrols-linkbutton-onclientclick)

#### **Implementation Details**

**Directive Selector:** ‘wmClientClick’

#### **Client Click scenarios**

**Scenario 1 -** Regular JS code**:**

`onClientClick = 'console.log();'`

**Scenario 2 -** Function call:

`onClientClick = 'download()'`

**Scenario 3 -** JS code or function call using 'return':

`onClientClick = 'return myFunction()'`

If the onClientClick script doesn't include a 'return', it will **always** trigger the Control's **Click event** and if the Control is inside a GridView or a DataList, it will also trigger the **RowCommand** or the **OnItemCommand** respectively.\
In case the script includes the 'return', it may or may not trigger the events, depending on the result. For example, in the 3rd case scenario, if `myFunction()` returns true, it will trigger the events.

### **PME Support**

#### **Properties**

| Property              | Details                                                                                                                                                                             |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClientClick: string | Used to save the onClientClick script.                                                                                                                                              |
| eventsContext: any    | <p>Used to save the context of the events.<br>If the onClientClick script is a function call, the directive will validate and look for a method in this context to be executed.</p> |

#### Methods

#### onClientClickHandler

This handler validates the different scenarios and executes the onClientClick script and triggers the click events if necessary.

**getClientClickFunction**

In case the onClientClick script is a **function** **call**, this method needs to be called. It returns an arrow function with the correct parameters and context, ready to be executed.

**triggerClickMechanism**

Triggers the control's **click** and the GridView or DataList **command**.

**executeAsJSCode**

Executes JS code that doesn't have a reference to any function.\
For example:\
`console.log();`\
`var x=2; return true;`

**getFunctionParams**

Returns a string array with all the parameters in the onClientClick script function.\
For example:\
`getFunctionParams('myFunction('param1')')` => returns `['param1']`

**setThisContext**

Sets the context if we have a 'this' reference in the function parameters.\
For example:\
`setThisContext(['this', 'param1'], myContext)` => returns `[myContext, 'param1']`<br>

**\*The context is been set as event.target in the `getClientClickFunction` method.**

#### Reference to the complete directive documentation: [<mark style="color:red;">ClientClickDirective</mark>](https://docs-frontend.azurewebsites.net/WebFormsComponents/directives/ClientClickDirective.html)