How to recognize the selection event is triggered by checkbox?
Hello,
How can I recognize the selection event is triggered by checkbox? There're some logic I just want to run when user click on row, not on checkbox.
I'm using the latest version of Blazor TreeGrid.
Regards,
Huy
SIGN IN To post a reply.
1 Reply
FS
Farveen Sulthana Thameeztheen Basha
Syncfusion Team
July 30, 2021 12:45 PM UTC
Hi Huy Phan Viet,
Greetings from Syncfusion Support.
Query#:- How can I recognize the selection event is triggered by checkbox or when user click on row?
We have checked your query and we have achieved your requirement using Microsoft JsInterop. With this we have bind a click event to the entire document, and based on the target element values we have differentiate whether the we have clicked the row or Checkbox and called the corresponding c# method CheckBoxClick or RowClick. Using Created event we have invoked JavaScript functions via JS Interop.
Refer to the code below:-
|
<SfTreeGrid ID="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowFiltering="true">
<TreeGridEvents TValue="BusinessObject" Created="Created" ></TreeGridEvents>
<TreeGridColumns>
<TreeGridColumn Type="Syncfusion.Blazor.Grids.ColumnType.CheckBox" Width="80"></TreeGridColumn>
. . .
</TreeGridColumns>
</SfTreeGrid>
@code{
public async Task Created()
{
var dotNetReference = DotNetObjectReference.Create(this); // create dotnet ref
await Runtime.InvokeAsync<string>("Click", dotNetReference); // send the dotnet ref to JS side
}
[JSInvokable("CheckBoxClick")] // method called from JS to C#
public async Task CheckBoxClick()
{
//Triggered on Checkbox Click (use your custom logic here)
}
[JSInvokable("RowClick")] // method called from JS to C#
public async Task RowClick()
{
//Triggered on Row Click (use your custom logic here)
}
public List<BusinessObject> TreeGridData { get; set; }
protected override void OnInitialized()
{
this.TreeGridData = BusinessObject.GetSelfDataSource().ToList();
}
}
_Host.cshtml:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ServerApp</title>
<base rel='nofollow' href="~/" />
<link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />
<link rel='nofollow' href="css/site.css" rel="stylesheet" />
<link rel='nofollow' href="ServerApp.styles.css" rel="stylesheet" />
<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />
<script src="~/rowSelected.js"></script>
</head>
[rowSelected.js]
var dotnetInstance;
function Click(dotnet) {
dotnetInstance = dotnet; // dotnet instance to invoke C# method from JS
}
document.addEventListener('click', function (args) {
if (args.target.classList.contains("e-uncheck") || args.target.classList.contains("e-check") || args.target.classList.contains("e-gridchkbox")) {
dotnetInstance.invokeMethodAsync('CheckBoxClick'); // call C# method from javascript function
}
else if (args.target.classList.contains("e-rowcell")) {
dotnetInstance.invokeMethodAsync('RowClick'); // call C# method from javascript function
}
}) |
Documentation Link:-
Please get back to us if you need any further assistance.
Regards,
Farveen sulthana T
SIGN IN To post a reply.
- 1 Reply
- 2 Participants
-
HP Huy Phan Viet
- Jul 29, 2021 03:29 PM UTC
- Jul 30, 2021 12:45 PM UTC
