# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/general/frontend/documentation/webforms-angular-components/directives.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.