jQuery UI Widgets Forums ASP .NET MVC How to bind click event in Blazor?

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 1 year, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • How to bind click event in Blazor? #107627

    ATerentev
    Participant

    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?

    • This topic was modified 1 year, 10 months ago by  ATerentev.
    • This topic was modified 1 year, 10 months ago by  ATerentev.
    How to bind click event in Blazor? #107648

    Hristo
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.