Smart UI R1 2023

We are happy to announce that a new version of Smart UI is now available. It brings a brand-new 3D Chart component and many other updates which will help you to create better web apps.







What’s New:

  • 3d Chart component.
  • Grid Save/Load state(persist state).

What’s Improved:

  • Scheduler Available & Restricted options. You can define availablity for specific periods and restrict user input.
  • Scheduler Resources Legend Mobile friendly mode. When there are multiple legends, they are displayed in a dropdown component.
  • Scheduler Performance with many events.
  • Help documentation about Blazor, Angular & React. More than 20 new help topics are added.

What’s Fixed:

  • Gantt: Week number calculation.
  • Grid: Fixed an issue about the tags template of Cells.
  • Grid: Fixed an issue about the Grid column editing for color and checklist column types.
  • Grid: Fixed an issue about the Grid cell styling with custom css class names.
  • Grid: Fixed an issue about CSS rules applied to grid cells.
  • Grid: Fixed an issue about escape content.
  • Grid: Fixed an issue about labelTemplate with horizontal scrolling.
  • Grid: Fixed an issue about Multicomboinput dropdown editor positioning.
  • Grid: Fixed an issue about column reorder.
  • Grid: Fixed an issue about localization of filtering dropdown when the filter mode is excel.
  • Form: Fixed an issue about the Form’s showButtons, backButtonLabel and nextButtonLabel properties when the label is used as a html tag.
  • Kanban: Fixed an issue about add new button and multiple columns layout.
  • DropDownList: Fixed an issue about Tab key behavior when Filtering is enabled.
ANGULAR, ANGULAR GRID, Chart, Grid, html elements, JavaScript, JavaScript UI, JavaScript Widgets, React, react grid, React Javascript Library, REACTJS, VUE, VUEJS

Leave a comment

jQWidgets v15.0.0

jQWidgets v15.0.0 Release, Nov-15-2022

What’s New:

– jqxCheckBoxGroup Component.
– jqxRadioButtonGroup Component.

What’s Improved:

– jqxGrid support for Ctrl+Click when sorting by multiple columns.
– jqxGrid – cardview mode – add support for cellclassname.

What’s Fixed:

– Fixed an issue in jqxChart. saveAsJPEG does not work with annotations.
– Fixed an issue in jqxPasswordInput (Angular). The change event not triggering properly.
– Fixed an issue in jqxGrid. The cellvaluechanged event is beinged trigger when cell’s type is date.
– Fixed an issue in jqxGrid. A Charting error with datafields array results in incorrect rendering.
– Fixed an issue in jgxGrid. updaterow with array does not update the grid when filter is applied.
– Fixed an issue in jqxGrid. Export without provided file name does not work.
– Fixed an issue in jqxGrid. clears state on disabling.
– Fixed an issue in jqxGrid .filter working incorrectly when using localization with filterchoosestring.
– Fixed an issue in jqxGrid. export to xlsx not working with some themes.
– Fixed an issue in jqxScheduler. Month Days > 31 Bug in edit dialog.
– Fixed an issue in jqxDropDownList. Angular missing scrollBarSize property.
– Fixed an issue in jqxScheduler. editDialogOpen ‘dialog’ variable reference.
– Fixed an issue in jqxScheduler. Recursive appointment does not get added.
– Fixed an issue in jqxNumberInput. When spinButtonsStep>10 and min<0, the spinButtons stop working.
– Fixed an issue in jqxNumberInput. Incorrect cursor placement editing negative number.
– Fixed an issue in jqxListBox. Getting wrong selected item when filter is applied.
– Fixed an issue in jqxDateTimeInput. Mobile mode with time popup.
– Fixed an issue in jqxDateTimeInput. Month only input. Padding on buttons not applied initially.
– Fixed an issue in jqxMaskedInput about not updating value on ‘Delete’ key press.
ANGULAR, ANGULAR GRID
, , , ,

Leave a comment

Artavolo – Cloud collaboration service for everyone

We are happy to announce that we launched our new product called Artavolo. Artavolo puts the power of building a custom database in everyday user’s hands. Artavolo is a modern online database service created for everyone, and it gives people the simplicity of a spreadsheet, tools for team collaboration, and a seamless mobile experience. We are just getting started on our mission to expand productivity by giving people simple and useful tools to organize their world. Artavolo is perfect for project management, collecting customer information, creating surveys, and planning events. All of this without any technical expertise. To learn more about Artavolo – https://artavolo.com/
Uncategorized

Leave a comment

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