Customer Satisfaction Survey

We would like to ask you to complete a simple anonymous Online Survey that should take no more than 30 seconds. Thank you in advance for sharing your thoughts with us. We appreciate your time and effort in providing feedback to us.
Uncategorized

Leave a comment

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.
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, angular tree
,

Leave a comment

jQWidgets v14.0.0

jQWidgets v14.0.0 Release

We are happy to announce the new version of jQWidgets. It arrives with Barcode & QRcode components, jqxGrid command columns support and bug fixes.

Grid command columns

What’s New:

– jqxGrid command column.
– Barcode component.
– QRcode component.

What’s Improved:

– Light theme is updated with more modern look and feel.

What’s Fixed:

– Fixed an issue in jqxDataTable. 2nd level nested table disappears.
– Fixed an issue in jqxSlider – the “created” event does not fire.
– Fixed an issue in jqxNumberInput – spin buttons unexpected behavior. When decimalDigits and digits properties are set to 2 and the spin buttons are enabled with spinButtonsStep=0.1, the buttons don’t work.
– Fixed an issue in jqxGrid – card view mode – cards change position during scroll
– Fixed an issue in jqxGrid – card view mode – cards are not fully displayed but there is no scrollbar
– Fixed an issue in jqxGrid – rowsheight is not preserved when you switch to cardview mode and then back to grid mode
– Fixed an issue in jqxGrid issue when used within a jqxSplitter component
– Fixed an issue in jqxGrid bug when having pinned columns doesn’t scroll on the next column on key press
ANGULAR, ANGULAR GRID
, , , , ,

Leave a comment

jQWidgets v13.2.0

jQWidgets v13.2.0 Release, Jan-27-2022

What’s New:

– jqxGrid Columns render is enhanced with badges showing the column’s sort index.

What’s Improved:

– jqxSwitchButton events API. Added changeType argument.

What’s Fixed:

– Fixed an issue in jqxKanban. ‘itemMoved’ event returns ‘args.NewColumn’ as null.
– Fixed an issue in jqxKanban. When dropping a card from one Kanban to another Kanban element.
– Fixed an issue in jqxNumberInput. When trying to get negative value.
– Fixed an issue in jqxGrid. Filtering clears the bound data when used with filter row and custom list items.
– Fixed an issue in jqxGrid. Aggregates are not updated when the source of the grid is changed.
– Fixed an issue in jqxGrid. ExportView – xlsx does not format dates if there is any null values.
– Fixed an issue in jqxTabs. Adds new div element every time when ‘setTitleAt’ method is used.
– Fixed an issue in jqxGrid. Filtering issue when the grid is initially loaded( when using show filter row).
– Fixed an issue in jqxGrid. When having localization set and filtering issue.
ANGULAR, ANGULAR GRID, Chart, Grid, html elements, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQWidgets, PHP, Pivot Grid, React, react grid, React Javascript Library, REACTJS, typescript, Uncategorized, VUE, VUEJS
, , , , , , ,

Leave a comment

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:

Basic Grid

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();
  }
}
Grid with new row

The new Person is created in the SQL Table:

SQL with new row

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();
  }
}
Grid with removed row

The last Person is removed from the SQL Table:

SQL with removed row

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);
        }
      
Grid editing

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

SQL with removed row
Uncategorized
, , , , ,

Leave a comment

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>
Uncategorized

Leave a comment

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.


ANGULAR

Leave a comment

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

ANGULAR, Angular 2, angular 4, angular 5, Angular 6, Angular5
,

Leave a comment

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.

  1. To create a table, first you need to create a database for your application. Navigate to View -> SQL Server Object Explorer
  2. 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 People database
  3. 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')
    Table records

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

  1. Inside the Solution Explorer, right-click on your Solution and add a new project of type Class Library and call it DataAccessLibrary Add project Add project menu
  2. Using the Visual Studio NuGet Package Manager, add the following dependacnies to DataAccessLibrary:
    • Microsoft.Extensions.Configuration.Abstractions
    • System.Data.SqlClient
    • Dapper
    NuGet Package Manager
  3. 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; }
        }
    }
    Model folder directory
  4. 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 Quick actions menu Extract interface
  5. 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

    Project directory
  6. 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

    Database properties

    Inside your Blazor Application, navigate to appsettings.json and set ConnectionStrings.Default to the copied value:

    JSON appsettings

Bind Grid to SQL Data

  1. 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>
  2. 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
              
  3. 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();
        }
    }
              
Grid bound to SQL

Continue from here

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

Advanced Grid
Uncategorized
, , , ,

Leave a comment

jQWidgets ver12.2.0

jQWidgets v12.2.0 Release, Sep-21-2021


What’s New:

– jqxGrid Batch Edit mode

What’s Fixed:


– Fixed an issue in jqxGrid Copy paste large numbers in jqxGrid.
– Fixed an issue in jqxGrid. The addrow method when using with rowPosition parameter doesn’t place the row in the right place.
– Fixed an issue in JqxGrid Horizontal Scrolling. When some of the columns are pinned and we try to navigate with tab or keyboard.
– Fixed an issue in jqxInput. Shows native autocomplete popup after entering a value.
– Fixed an issue in jqxGrid with paging and some of the themes. Arrows for next/previous page are displaced.
– Fixed an issue in jqxDropDownButton. It is not focusable on Tab key press.
– Fixed an issue in jqxGrid. Scrolls to top of the grid when deleting row.
– Fixed an issue in jqxGrid Column Chooser about the events raised when the column choosed is opened or closed.
– Fixed an issue in jqxSortable about receive event not raised.
– Fixed an issue in jqxGrid about createeditor callback.
– Fixed an issue in jqxGrid. When dragging a column header it has to be drag it to the line of the filtering box for the grouping to work and it results in bad UI experience.
– Fixed an issue in DockingLayout regarding saveLayout and loadLayout, when a floating dialog is created.


ANGULAR, ANGULAR GRID, angular tree, Chart, Grid, html elements, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQWidgets, jqxGrid, Pivot Grid, React, react grid, React Javascript Library, REACTJS, VUE, VUEJS

Leave a comment