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

jqxGrid Batch Edit

The next version of jQWidgets is coming soon and will bring a new jqxGrid feature – Batch editing. You can use batch editing to defer saving multiple cell value changes. All edit changes are stored in a buffer and can be discarded before a user clicks the Ok button.

The below image illustrates a jqxGrid with several edits stored in a buffer. All edited cells have a special CSS class ‘jqx-grid-cell-batch’.

jqxGrid Batch Edit

After the ‘OK’ button is clicked, these changes are stored.

jqxGrid Batch Edit

ANGULAR, Grid, JavaScript UI, jQuery, jQuery UI, jQWidgets, jqxGrid, react grid, VUE, VUEJS
, ,

Leave a comment

jQWidgets ver12.1.2

jQWidgets v12.1.2 Release, June-28-2021

What’s Improved:

– Added ‘enableSanitizeAll’ option to jqxGrid. When enabled in combination with ‘enableSanitize’, all html tags within the Grid cells will be escaped.
– Light and Dark Themes for jqxDataTable, jqxTreeGrid and jqxScheduler.
ANGULAR, ANGULAR GRID, Chart, Grid, html elements, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery Plugins, jQuery UI, jQWidgets, jqxWindow, PHP, Pivot Grid, React, react grid, React Javascript Library, REACTJS, typescript, VUE, VUEJS

Leave a comment

jQWidgets ver 12.1.1

jQWidgets v12.1.1 Release, June-23-2021

What’s Fixed:

– Fixed an issue in jqxGrid regarding the ‘cellsformat’, when enableSanitize is true.
– Fixed an issue in jqxGrid regarding the ‘cellsrenderer’ value argument type.
– Fixed an issue in jqxDataTable regarding the HTML sanitization.
– Fixed an issue in jqxTree regarding an error thrown in mobile mode.
– Fixed an issue in jqxPanel regarding the ‘focused’ property behavior.
Uncategorized

Leave a comment

jQWidgets ver. 12.1.0

jQWidgets v12.1.0 Release, June-18-2021

What’s New:

– jqxSplitLayout component for Angular & Javascript

What’s Improved:

– jqxGrid HTML Sanitization.
– jqxDateTimeInput and jqxNumberInput mobile device UX.
– jqxDateTimeInput delete button element which allows you to quickly clear the date.
– Angular 12 integration.

What’s Fixed:

– Fixed an issue in jqxGrid regarding its focus method behavior.
– Fixed an issue in jqxGrid List Filter with DropDown which has filterable enabled and source property set to a custom value. The Grid was not applying the correct filter when the DropDown items were filtered, too.
– Fixed an issue in jqxGrid regarding the XSS attack prevention.
– Fixed an issue in jqxGrid regarding the keyboard navigation when sorting and grouping are applied.
– Fixed an issue in jqxNumberInput which allowed entering of letters when used on mobile device.
– Fixed an issue in jqxNumberInput regarding the percentages and currency editing on mobile device.
– Fixed an issue in jqxDateTimeInput which allowed entering of letters when used on mobile device.
– Fixed an issue in jqxSlider regarding the tooltip hide delay property when the thumb is dragged.
– Fixed an issue in jqxInput regarding the popup closing when Material theme is applied.
– Fixed an issue in jqxDataTable about the “enableBrowserSelection” property set to the “true” value does not work properly.
– Fixed an issue in jqxMaskedInput when the component is used on Android device the input was incorrect.
– Fixed an issue in jqxMaskedInput when the component is used on a mobile device, the default keyboard was shown instead of the numeric keyboard.
ANGULAR, ANGULAR GRID, Chart, Grid, html elements, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery Widgets, jQWidgets, jqxButton, jqxCalendar, jqxChart, jqxCheckBox, jqxComboBox, jqxDateTimeInput, jqxDock, jqxDropDownList, jqxExpander, jqxGrid, jqxInput, jqxListBox, jqxMaskedInput, Pivot Grid, React, react grid, React Javascript Library, REACTJS, typescript, VUE, VUEJS
, , , , , , , , , , , , , , , ,

Leave a comment

jQWidgets ver 12.0.4

jQWidgets v12.0.4 Release, Apr-15-2021

What’s Improved:

– Extended jqxGrid cells styling options with fontFamily and fontWeight options.

What’s Fixed:

– Fixed an issue regarding the val() method for input components using Light, Dark and the Material Themes.
– Fixed an issue regarding the “disabled” property of jqxInput.
– Fixed an issue regarding the placeholder visibility of inputs using Light and Dark themes.
– Fixed an issue regarding the jqxInput popup usage with touchpads.
– Fixed an issue regarding the jqxGrid resources disposal, when re-rendering the component.
ANGULAR, Grid, html elements, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery Widgets, jQWidgets, jqxGrid, Pivot Grid, React, react grid, React Javascript Library, REACTJS, typescript, VUE, VUEJS
, , , , ,

Leave a comment

jQWidgets ver. 12.0.1

What’s New:


– jqxGrid Cardview Custom Value Templates

What ‘s Improved:


– jqxGrid Cardview scrolling UX on mobile devices.

What ‘s Fixed:


– Fixed an issue related to popups in jqxGrid Filter Menu.
– Fixed an issue related to jqxGrid adaptive mode, when the adaptive mode is dynamically switched on/off.

ANGULAR, ANGULAR GRID
, , , , ,

Leave a comment

jQWidgets ver 12.0.0

jQWidgets v12.0.0 Release, Feb-24-2021

What’s New:

– jqxGrid Card View mode.
– Angular v11.2.2 support.

What’s Fixed:

– Fixed an issue regarding the jqxNumberInput component. Using the “val” method with the negative value it behaves inappropriately when is with the “simple” input mode.
– Fixed an issue regarding the jqxKnob component usage with IPad when there are multiple knobs on the page.
– Fixed an issue regarding the grid filtering, when the grid data source is updated dynamically and a filter is applied.
– Fixed an issue regarding the filter menu rendering when row details are enabled.
– Fixed an issue regarding the jqxPivotGrid Drill through functionality and selection events.
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, angular tree, Angular5, angular7, angular8, AngularJS, ASP .NET, Chart, Grid, html elements, JavaScript, jQuery, jQWidgets, jqxGrid, react grid, React Javascript Library, REACTJS, typescript, VUEJS
, , , , , , ,

Leave a comment