{"id":15686915,"url":"https://github.com/jqwidgets/blazor","last_synced_at":"2025-05-07T18:51:49.386Z","repository":{"id":86661604,"uuid":"247655234","full_name":"jqwidgets/blazor","owner":"jqwidgets","description":"Blazor UI Components Library by jQWidgets. Enterprise-ready User Interface for Blazor","archived":false,"fork":false,"pushed_at":"2021-07-09T05:05:24.000Z","size":32597,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-31T13:02:49.404Z","etag":null,"topics":["blazor","blazor-application","blazor-chart","blazor-component","blazor-components","blazor-grid","jqwidgets"],"latest_commit_sha":null,"homepage":"https://blazor.jqwidgets.com","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jqwidgets.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-16T09:01:57.000Z","updated_at":"2023-11-22T13:14:15.000Z","dependencies_parsed_at":"2023-02-28T18:30:21.982Z","dependency_job_id":null,"html_url":"https://github.com/jqwidgets/blazor","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jqwidgets%2Fblazor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jqwidgets%2Fblazor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jqwidgets%2Fblazor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jqwidgets%2Fblazor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jqwidgets","download_url":"https://codeload.github.com/jqwidgets/blazor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252939304,"owners_count":21828749,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-application","blazor-chart","blazor-component","blazor-components","blazor-grid","jqwidgets"],"created_at":"2024-10-03T17:41:49.893Z","updated_at":"2025-05-07T18:51:49.377Z","avatar_url":"https://github.com/jqwidgets.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blazor\n\nBlazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Blazor can run your client-side C# code directly in the browser, using WebAssembly. Because it's real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application.\n\nPlease refer to: https://www.htmlelements.com/blazor/\n\n# Prerequisites\n.NET Core SDK - This includes everything you need to build and run Blazor WebAssembly apps.\n\n# Setup\n\nI. Install templates:\n\ndotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview9.19465.2\nII. Create a blazor application:\n\ndotnet new blazorwasm -o jqwidgets-blazor-app\n\nIII. Navigate to the application:\n\ncd jqwidgets-blazor-app\n\nIV. Add the jQWidgets.Blazor package:\n\ndotnet add package jQWidgets.Blazor\n\nV. Open _Imports.razor and add the following at the bottom:\n\n@using jQWidgets.Blazor.Components\n\nVI. Open wwwroot/index.html and add the needed styles and scripts. For example if you are going to use JqxBarGauge, the file should look like this:\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\" /\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width\" /\u003e\n        \u003ctitle\u003ejqwidgets-blazor-app\u003c/title\u003e\n        \u003cbase href=\"/\" /\u003e\n \n        \u003clink href=\"_content/jQWidgets.Blazor/jqwidgets/styles/jqx.base.css\"\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003capp\u003eLoading...\u003c/app\u003e\n \n        \u003cscript src=\"_content/jQWidgets.Blazor/jqwidgets/jqxcore.js\"\u003e\u003c/script\u003e\n        \u003cscript src=\"_content/jQWidgets.Blazor/jqwidgets/jqxdraw.js\"\u003e\u003c/script\u003e\n        \u003cscript src=\"_content/jQWidgets.Blazor/jqwidgets/jqxbargauge.js\"\u003e\u003c/script\u003e\n        \u003cscript src=\"_content/jQWidgets.Blazor/jqxBlazor.js\"\u003e\u003c/script\u003e\n \n        \u003cscript src=\"_framework/blazor.webassembly.js\"\u003e\u003c/script\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\nVII. Open Pages/Index.razor and replace the code as follows:\n```\n\u003cJqxBarGauge \n    width=600 height=600 colorScheme=\"scheme02\"\n    max=\"max\" values=\"values\" tooltip=\"tooltip\"\u003e\n\u003c/JqxBarGauge\u003e\n\n@code {\n    private int max = 150;\n \n    private double[] values = new double[4] { 102, 115, 130, 137 };\n \n    private IDictionary\u003cstring, bool\u003e tooltip = new Dictionary\u003cstring, bool\u003e()\n    {\n        { \"visible\", true }\n    };\n}\n``` \nVIII. Start the app and check the result:\n\ndotnet watch run\nEvents Methods \u0026 Properties\nI. Events\nBelow is an example of listening to the JqxBarGauge onDrawEnd event and then doing something with the result:\n```\n\u003cJqxBarGauge onDrawEnd=\"onDrawEnd\"\n    width=600 height=600 values=\"values\"\u003e\n\u003c/JqxBarGauge\u003e\n\n@code {\n    private double[] values = new double[4] { 102, 115, 130, 137 };\n \n    private void onDrawEnd(IDictionary\u003cstring, object\u003e e) \n    {\n        @* Do Something... *@\n    }\n}\n ```\nII. Methods \u0026 Properties\nIn order to use methods, first you need to make a reference to the component:\n```\n\u003cJqxBarGauge @ref=\"myBarGauge\"\n    width=\"350\" height=\"350\" values=\"values\"\u003e\n\u003c/JqxBarGauge\u003e\n\n@code {\n    JqxBarGauge myBarGauge;\n \n    private double[] values = new double[4] { 102, 115, 130, 137 };\n \n    protected override void OnAfterRender(bool firstRender)\n    {\n        if (firstRender)\n        {\n            double[] newValues = new double[4] { 10, 20, 30, 40 };\n            myBarGauge.val(newValues);\n        }\n    }\n}\n```\n\n# Blazor Dev Server + Processors\n\n### This repo contains the source files for jQWidgets Blazor framework - \"jQWidgets.Blazor\"\n\n## Prerequisite\n\n### Node.js\n\n```bash\nhttps://nodejs.org/en/\n```\n\n### .NET Core SDK \n\n```bash\nhttps://dotnet.microsoft.com/download/dotnet-core\n```\n\n## Run Dev Server\n\n```bash\ncd dev-project\n```\n\n```bash\ndotnet watch run\n```\n## Library And API Processor\n\n### Builds the \"jQWidgets.Blazor\" library files and generates the API files\n\n```bash\ncd processors\nnode library-and-api\n```\n\n## Site Demos Processor\n\n### Builds the demos hosted on www.jqwidgets.com\n\n```bash\ncd processors\nnode site-demos\n```\n\n## Getting Started Demos Processor\n\n### Builds the demos needed for the getting started documentation.\n\n```bash\ncd processors\nnode getting-started-demos\n```\n\n## Nuget Library Update\n\n```bash\ncd library/jQWidgets.Blazor\nOpen `jQWidgets.Blazor.csproj` and update `Version` tag\ndotnet pack\n```\n\n#### The build file is located in \n\n```bash\nlibrary/jQWidgets.Blazor/bin/Debug/jQWidgets.Blazor.[VERSION].nupkg\n```\n\n\n#### Either update it manually via nuget official site or via CLI\n\n```bash\ndotnet nuget push [buildFilePath] -k [APIKey] -s https://api.nuget.org/v3/index.json\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjqwidgets%2Fblazor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjqwidgets%2Fblazor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjqwidgets%2Fblazor/lists"}