How to bind click event in Blazor?

[ATerentevParticipant]

Hi, some questions about how to bind click event on toolbar widget in Blazor.
Now the code is

        global.createMapToolbar = (selector) => {
        $("#" + selector).jqxToolBar({                      //jqxToolBar
                width: 635, height: 35, tools: "button | dropdownlist combobox | input" ,
                initTools: function(type, index, tool, menuToolIninitialization) {
                    var theme = "";
                    if (type == "toggleButton") {
                        var icon = $("<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>");
                    }
                    switch (index) {
                        case 0:
                            tool.text("Button");
                            break;
                        case 1:
                            tool.jqxDropDownList({ width: 130, source: ["Affogato", "Breve", "Café Crema"], selectedIndex: 1 });
                            break;
                        case 2:
                            tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                            break;
                        case 3:
                            tool.jqxInput({ width: 200, placeHolder: "Type here..." });
                            break;
                    }
                }

            }
                
        );
        $("#" + selector).on("click", function (event) {
            alert("Pop-up menu opened.");
        });
        }

And in Index.razor:

<div id="@toolbarId" class="toolbar">
</div>
    private string toolbarId = "jqxToolbar";
    protected override void OnAfterRender(bool firstRender)
    {
      if (firstRender)
      {
        JSRuntime.InvokeAsync<object>("createMapToolbar", toolbarId);
      }
    }

How to bind event to function in .razor file?

[HristoParticipant]

Hello ATerentev,

You could try directly with the native JavaScript binding.
Please, take a look at this approach:

tool.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});

I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts