-
Resent Posts
Tags
angular angular components angular grid chart charting ComboBox datagrid grid gridview html5 Grid JavaScript javascript chart javascript grid javascript gridview javascript listbox javascript splitter jQuery jquery chart jquery datagrid jquery grid jquery grid plugin jquery gridview jquery listbox jQuery Plugins jquery splitter jQuery Tree jQuery UI jquery ui grid jQuery UI Plugins jQuery UI Widgets jQuery Widgets jQWidgets jqxchart jqxGrid jqxlistbox jqxsplitter ListBox listbox widget react reactjs split container splitter tree treeview vueCategories
- ANGULAR
- Angular 2
- angular 4
- angular 5
- Angular 6
- ANGULAR GRID
- angular tree
- Angular5
- angular7
- angular8
- AngularJS
- ASP .NET
- ASP.NET Core Tag Helpers
- ASP.NET Core Tag Helpers
- ASP.NET Core Tag Helpers
- Chart
- custom elements
- Grid
- html elements
- JavaScript
- JavaScript Plugins
- JavaScript UI
- JavaScript UI Plugins
- JavaScript UI Widgets
- JavaScript Widgets
- jQuery
- jQuery Plugins
- jQuery UI
- jQuery UI Plugins
- jQuery UI Widgets
- jQuery Widgets
- jQWidgets
- jqxButton
- jqxCalendar
- jqxChart
- jqxCheckBox
- jqxComboBox
- jqxDateTimeInput
- jqxDock
- jqxDropDownList
- jqxExpander
- jqxGrid
- jqxInput
- jqxListBox
- jqxMaskedInput
- jqxMenu
- jqxNavigationBar
- jqxNumberInput
- jqxProgressBar
- jqxRadioButton
- jqxRating
- jqxResponse
- jqxRibbon
- jqxScrollBar
- jqxSlider
- jqxSplitter
- jqxTabs
- jqxTooltip
- jqxTree
- jqxTreeMap
- jqxValidator
- jqxWindow
- PHP
- Pivot Grid
- React
- react grid
- React Javascript Library
- REACTJS
- typescript
- Uncategorized
- VUE
- VUEJS
jQWidgets & Angular 14
We are happy to announce that our components are now compatible with Angular 14. The latest version of the “jqwidgets-ng” NPM package was just updated.
SQL Server-side CRUD with Smart.Grid for Blazor
SQL Server side CRUD with Blazor Smart.Grid
Setup The Blazor Application
Follow the Getting Started guide to set up your Blazor Application with Smart UI.
Bind to SQL
Follow our Binding to
SQL
guide to set up the connection between your database and Smart UI.
At the end of the tutorial, the Smart.Grid will be bounded to a SQL DataBase:

Create Methods
To enable adding new rows to the Grid, we must first create the functions for the CRUD operations in the
PersonData class.
Navigate to PersonData.cs and implement the additional methods:
..... public Task<List<PersonModel>> GetPeople() { string sql = "select * from dbo.peopleTable"; return _db.LoadData<PersonModel, dynamic>(sql, new { }); } public Task<List<PersonModel>> InsertPerson(string Name, double Balance, string City, string Country) { string sql = "INSERT INTO [dbo].[peopleTable] ([Name], [Balance], [City], [Country]) OUTPUT INSERTED.Id, INSERTED.name, INSERTED.Balance, INSERTED.City, INSERTED.Country VALUES (@Name, @Balance, @City, @Country)"; return _db.LoadData<PersonModel, dynamic>(sql, new { Name, Balance, City, Country }); } public Task<List<PersonModel>> DeletePerson(int Id) { string sql = "DELETE FROM [dbo].[peopleTable] WHERE [Id]=@Id"; return _db.LoadData<PersonModel, dynamic>(sql, new { Id }); } public Task<List<PersonModel>> UpdatePerson(int Id, string Name, double Balance, string City, string Country) { string sql = "UPDATE [dbo].[peopleTable] SET [Name] = @Name, [Balance] = @Balance, [City] = @City, [Country] = @Country WHERE [Id] = @Id"; return _db.LoadData<PersonModel, dynamic>(sql, new { Name, Balance, City, Country, Id }); } .....
Then, add the new methods to the IPeopleData interface:
..... Task<List<PersonModel>> DeletePerson(int Id); Task<List<PersonModel>> GetPeople(); Task<List<PersonModel>> InsertPerson(string Name, double Balance, string City, string Country); Task<List<PersonModel>> UpdatePerson(int Id, string Name, double Balance, string City, string Country); .....
Add Create functionality
Navigate to the Index.razor
page and create a “Add new row” Button.
Then create an AddRow
function that creates a new person and then fetches the updated SQL Table:
<Button OnClick="AddRow">Add new row</Button> ..... @code{ ..... private async Task AddRow() { PersonModel newPerson = (await _db.InsertPerson("John", 1000, "Paris", "France"))[0]; people = await _db.GetPeople(); } }

The new Person is created in the SQL Table:

Add Delete functionality
Add a “Delete last row” Button. Then create a DeleteLastRow
function that removes the last SQL Record and then fetches the updated SQL Table:
<Button OnClick="DeleteLastRow">Delete row</Button> ..... @code{ ..... private async Task DeleteLastRow() { int lastId = people[people.Count - 1].Id; await _db.DeletePerson(lastId); people = await _db.GetPeople(); } }

The last Person is removed from the SQL Table:

Add Update functionality
To add Update functionality, first enable Grid Editing using the Editing
property.
We will use the OnEndEdit
Event to update the SQL Table after every change:
<Grid @ref="@grid" DataSource="@people" DataSourceSettings="@dataSourceSettings" OnEndEdit="OnEndEdit" Editing="@editing"> <Columns> <Column DataField="Name" Label="Client Name"></Column> <Column DataField="Balance" Label="Acccount Balance"></Column> <Column DataField="City" Label="City"></Column> <Column DataField="Country" Label="Country"></Column> </Columns> </Grid> @code{ GridEditing editing = new GridEditing() { Enabled = true, Mode = GridEditingMode.Cell }; }
Create a new OnEndEdit function. Using the Event.detail,
get the values of the edited row and use the UpdatePerson
Method to make changes in the SQL Table:
private async Task OnEndEdit(Event ev) { GridEndEditEventDetail EventDetail = ev["Detail"]; dynamic Editedrow = JObject.Parse((await grid.GetRowData(EventDetail.Row)).ToString()); int EditedId = (Editedrow.Id).ToObject<int>(); string EditedName = (Editedrow.Name).ToObject<string>(); double EditedBalance = (Editedrow.Balance).ToObject<double>(); string EditedCity = (Editedrow.City).ToObject<string>(); string EditedCountry = (Editedrow.Country).ToObject<string>(); await _db.UpdatePerson( EditedId, EditedName, EditedBalance, EditedCity, EditedCountry); }

After editing, the changes are applied to the SQL Table:

Happy 2022!
The New Year is a time for new hopes, dreams and wishes.
Wishing you a Happy Holiday season from the team at jQWidgets.
</2021><2022>
Wishing you a Happy Holiday season from the team at jQWidgets.
</2021><2022>
jQWidgets ver13.1.0
jQWidgets v13.1.0 Release, Nov-16-2021
What’s Fixed:
– Fixed an issue in jqxScheduler. jqxScheduler refreshes only to 12:00 AM hour when the source of the scheduler is changed.
– Fixed an issue in jqxGrid. jqxGrid with filtermode set to excel doesn’t work properly on columns with number type column data.
– Fixed an issue in jqxGrid. jqxGrid – cannot filtering with the “showfilterbar” property when the “editable” property is enabled.
– Fixed an issue in jqxGrid. jqxGrid – StatusBar Row placed too low.
– Fixed an issue in jqxInput. jqxInput does not fire ‘keyup’ event.
– Fixed an issue in jqxNumberInput. jqxNumberInput doesn’t remove the minus symbol when value is set from negative to positive.
– Fixed an issue in jqxDropDownList. jqxDropdownList select event is not firing in Safarai (Ipad & iphone).
– Fixed an issue in jqxListBox. jqxListbox typing the filter input clears the SelectedItem.
– Fixed an issue in jqxValidator. jqxValidator doesn’t validate jqxDateTimeInput widget.
– Fixed an issue in jqxGrid. jqxGrid with rating column – tooltip inconsistent behavior.
– Fixed an issue in jqxNumberInput. jqxNumberInput – in simple inputMode with ‘-‘ sign ‘Delete’ key deletes one char away from cursor.
– Fixed an issue in jqxGrid. jqxGrid – pressing with the pointer of the mouse on the vertical scrollbar does not stop in its position.
– Fixed an issue in jqxGrid. jqxGrid rating column addittional properties. Added “ratingmax” property for setting the count of rating items.
jQWidgets ver13.0.0
We are happy to announce the latest release of jQWidgets. This release brings minor updates related to the recent Angular 13 release.
jQWidgets v13.0.0 Release, Nov-11-2021
What’s New:
– Angular 13 support
What’s New:
– Angular 13 support
Blazor Grid – Bind to SQL
Bind SQL data to Blazor Smart.Grid
Setup The Blazor Application
Follow the Getting Started guide to set up your Blazor Application with Smart UI.
Create SQL Data
The following steps detail how to create a SQL Database in Visual Studio 2019 and fill it with data. If you already have SQL Data, continue to Connect Blazor to SQL Data.
- To create a table, first you need to create a database for your application. Navigate to View -> SQL Server Object Explorer
- Inside the localdb -> Databases directory, create a new SQL database by right-clicking on the Databases folder.
For the purpose of the Demo, we will create people.db
- To create a table, right-click on the database and select New Query…. Then paste the following SQL code to create a table of our clients:
CREATE TABLE [dbo].[peopleTable] ( [Id] INT NOT NULL, [Name] NCHAR (50) NULL, [Balance] FLOAT (50) NULL, [City] NCHAR (50) NULL, [Country] NCHAR (50) NULL, PRIMARY KEY CLUSTERED ([Id] ASC) ); INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (1, N'Maria Anders', 130.0000, N'Berlin', N'Germany') INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (2, N'Ana Trujillo', 230.0000, N'Mxico D.F.', N'Mexico') INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (3, N'Antonio Moreno', 3500.0000, N'Mxico D.F.', N'Mexico') INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (4, N'Thomas Hardy', 55.0000, N'London', N'UK') INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (5, N'Christina Berglund', 1500.0000, N'Lule', N'Sweden') INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (6, N'Hanna Moos', 650.0000, N'Mannheim', N'Germany') INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (7, N'Frdrique Citeaux', 50.0000, N'Strasbourg', N'France') INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (8, N'Martn Sommer', 0.0000, N'Madrid', N'Spain')
Connect Blazor to SQL Data
The following steps detail how to connect your SQL Data to the Blazor Application. If your data is already connected, continue to Bind Grid to SQL Data
- Inside the Solution Explorer, right-click on your Solution and add a new project of type Class Library and call it DataAccessLibrary
- Using the Visual Studio NuGet Package Manager, add the following dependacnies to DataAccessLibrary:
Microsoft.Extensions.Configuration.Abstractions
System.Data.SqlClient
Dapper
- Inside DataAcessLibrary, create a new folder “Models”, then create a new new item of type
Class
called PersonModel.cs
This is where we will define the properties of each individual Person from our SQL table:using System; using System.Collections.Generic; using System.Text; namespace DataAccessLibrary.Models { public class PersonModel { public int Id { get; set; } public string Name { get; set; } public decimal Balance { get; set; } public string City { get; set; } public string Country { get; set; } } }
- Inside DataAcessLibrary, create a new new item of type
Class
called SqlDataAccess.cs
This is where we will create the LoadData function:using Dapper; using Microsoft.Extensions.Configuration; using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Text; using System.Threading.Tasks; namespace DataAccessLibrary { public class SqlDataAccess { private readonly IConfiguration _config; public string ConnectionStringName { get; set; } = "Default"; public SqlDataAccess(IConfiguration config) { _config = config; } public async Task<List<T>> LoadData<T, U>(string sql, U parameters) { string connectionString = _config.GetConnectionString(ConnectionStringName); using (IDbConnection connection = new SqlConnection(connectionString)) { var data = await connection.QueryAsync<T>(sql, parameters); return data.ToList(); } } } }
Select the SqlDataAccess class and create an Interface by navigating to Quick Actions & Refactoring -> Extract Interface -> OK - Inside DataAcessLibrary, create a new new item of type
Class
called PeopleData.cs
Here we will create the GetPeople method, which executes a sql query and returns an array, where each item is a Person object:using DataAccessLibrary.Models; using System; using System.Collections.Generic; using System.Text; using System.Threading.Tasks; namespace DataAccessLibrary { public class PeopleData { private readonly ISqlDataAccess _db; public PeopleData(ISqlDataAccess db) { _db = db; } public Task<List<PersonModel>> GetPeople() { string sql = "select * from dbo.peopleTable"; return _db.LoadData<PersonModel, dynamic>(sql, new { }); } } }
Then create a new interface for PeopleData by following the same steps as for SqlDataAccess
Finally, navigate to people.db using the SQL Server Object Explorer, right-click and select properties. Then copy the value of the “Connection string” property
Inside your Blazor Application, navigate to appsettings.json and set ConnectionStrings.Default to the copied value:
Bind Grid to SQL Data
- Add the Grid component to the Pages/Index.razor file of your Blazor Application and set the Column you want to dispplay:
<Grid DataSource="@people" DataSourceSettings="@dataSourceSettings"> <Columns> <Column DataField="Name" Label="Client Name"></Column> <Column DataField="Balance" Label="Acccount Balance"></Column> <Column DataField="City" Label="City"></Column> <Column DataField="Country" Label="Country"></Column> </Columns> </Grid>
- Inject the SQl database and the Models at the top of the page:
@page "/" @using Smart.Blazor @using DataAccessLibrary @using DataAccessLibrary.Models @inject IPeopleData _db
-
Inside the @code block, invoke
GetPeople()
when the page has loaded and set the people Array as a DataSource to the Grid. Then specify the DataSourceType inside a GridDataSourceSettings object and set it as a property of the Grid.
Note that setting the DataType of the Columns is not mandatory, but it is recommended if you plan to use the Smart.Grid’s Filtering & Sorting functionalities@page "/" @using Smart.Blazor @using DataAccessLibrary @using DataAccessLibrary.Models @inject IPeopleData _db <h2>Clients Table</h2> @if (people == null) { <p><em>Loading...</em></p> } else { <Grid DataSource="@people" DataSourceSettings="@dataSourceSettings"> <Columns> <Column DataField="Name" Label="Client Name"></Column> <Column DataField="Balance" Label="Acccount Balance"></Column> <Column DataField="City" Label="City"></Column> <Column DataField="Country" Label="Country"></Column> </Columns> </Grid> } @code { GridDataSourceSettings dataSourceSettings = new GridDataSourceSettings() { DataFields = new List<IGridDataSourceSettingsDataField>() { new GridDataSourceSettingsDataField() { Name = "Name", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "Balance", DataType = GridDataSourceSettingsDataFieldDataType.Number }, new GridDataSourceSettingsDataField() { Name = "City", DataType = GridDataSourceSettingsDataFieldDataType.String }, new GridDataSourceSettingsDataField() { Name = "Country", DataType = GridDataSourceSettingsDataFieldDataType.String } }, DataSourceType = GridDataSourceSettingsDataSourceType.Array }; private List<PersonModel> people; protected override async Task OnInitializedAsync() { people = await _db.GetPeople(); } }

Continue from here
Follow the Get Started with Grid guide to learn more about many of the features offered by Blazor Smart.Grid component.
