What’s New #

  • React Grid: rows from React state

    The rows prop takes the grid’s rows as an array from React state, with no information adapter, and rowKey names the sphere that identifies a row. A brand new array updates solely the rows that modified (discovered by rowKey), or binds the info once more when rows had been added, eliminated or moved; both means the type, filters and teams keep. The rows can begin empty and be stuffed as soon as the info has been fetched. fieldTypes names a discipline’s kind when its values don’t inform. Rows given this fashion are sanitized by default (enableSanitize), so a worth with a script handler or a harmful tag reveals as textual content; open row particulars keep open when rows are added or eliminated; altering many rows of a giant desk is one replace.

  • React Grid: React elements in cells, editors, headers, bars and row particulars

    A column’s cellComponent renders a React element in every of its cells, with the cell’s worth and row; the cells comply with the grid because it scrolls, kinds, teams and pages, get the app’s context, and preserve their state whereas their row is proven (via sorting, refreshing and modifications to the row). A column’s editorComponent is a customized editor written as a React element: it will get the worth and onChange, onCommit and onCancel, and Enter, Esc and Tab work as with the built-in editors. A column’s headerComponent renders its header; toolbarComponent and statusbarComponent fill the toolbar and the standing bar (they get the grid, to name its strategies); rowDetailsComponent renders every row’s particulars, for a master-detail view contained in the grid.

  • React Grid: choice and type as React state

    selectedRowKeys units the chosen rows by their keys and onSelectionChange experiences the consumer’s modifications; type and onSortChange do the identical for the type. The app can preserve them in its state or the URL, and share them with different elements; like a managed enter, the grid reveals what the props say, so the app may also refuse a change.

  • React Grid: server mode

    With totalRows, the rows prop is the web page the server despatched: the grid pages, kinds and filters via onQueryChange, which will get the web page, web page dimension, type and filters to fetch, and loading reveals the grid’s loading indicator whereas a request runs. A server-side grid takes these three props as a substitute of an information adapter with callbacks.

  • React Grid: varieties

    JqxGrid<T> takes the rows’ kind from the rows prop, so a cellComponent, an editorComponent and the columns know the row’s fields. IGridEvents<T> varieties every occasion’s arguments, for handlers that title them: (occasion: IGridEvents<Order>[‘cellendedit’]) => … .

  • React elements: props in contrast by content material

    All React elements evaluate their array and object props by content material: an inline columns={[…]} now not rebuilds the grid on each render (which sure its information once more and dropped the type). The grid’s column capabilities (cellsrenderer, validation…) at all times name the most recent operate, so an inline renderer reveals the present state. In growth, a element warns as soon as when a prop is made once more on each render (a brand new jqx.dataAdapter over the identical supply, an inline element in a column). prepared, and occasions raised whereas a element is created (the grid’s first bindingcomplete), now attain the app after React has set its refs.

  • React elements: server rendering

    A web page rendered on a server (Subsequent.js) hydrates with out warnings; the grid modules load on a server.

  • jqxGrid: grouping with digital scrolling

    A grid in digital mode with out paging can now be grouped (earlier than, it threw “grouping in virtualmode with out paging is just not supported”). The brand new rendergroups operate returns the teams and the variety of rows in every, for the grouping in use (a GROUP BY with COUNT on a server); rendergridrows returns the rows within the teams’ order. The grid lays out the group headers and asks just for the rows of the expanded teams in view, so 1,000,000 rows are grouped with out being loaded. Teams develop and collapse with the mouse and with expandgroup, collapsegroup, expandallgroups and collapseallgroups; columns dragged to the group panel or faraway from it regroup the grid; a groupsrenderer will get the group’s row depend (groupdata.depend). Demo: jqxGrid, Digital Scrolling with Grouping.

  • API definitions

    About 400 members that the elements had however the API definitions lacked at the moment are within the TypeScript definitions, the Angular, React and Vue elements and the API pages: for instance jqxWindow autoFocus, jqxSlider tickMode and tickNumber, jqxListBox checkboxSize, jqxTabs lockAt and getEnabledTabsCount, jqxKanban expandColumn and selectItem, jqxGrid hiderow, showrow, isrowhiddenat and scrollto, jqxChart getPlotAreaRect, and trace within the enter widgets. Defaults that differed from the widgets’ are corrected; in Vue they modified the widgets’ behaviour: week numbers in jqxCalendar and jqxDateTimeInput, dropping in jqxListBox and jqxTree, and jqxGantt’s timeline header.

What’s Mounted #

  • Pages with out jQuery

    jqWidgets’ personal jQuery-compatible core, used when a web page masses no jQuery, now behaves like jQuery 3 the place the widgets and apps depend on it: sizes are now not rounded, :seen and :hidden, offset and place, present and conceal, prepared handlers, pointer, contact and key occasion properties, and focus, blur and click on raised from code. $.when waits for native Guarantees and .css() units CSS variables; bind, unbind, one and end are there. Of 931 jQuery demos, 49 now behave in a different way with out jQuery (508 earlier than).

  • Widgets destroyed by a framework

    destroy removes all the things a widget made: jqxBarGauge’s animations, jqxScrollView’s slide present and dimension watcher (and refresh now not begins one other slide present), jqxLoader’s modal overlay, jqxDragDrop’s handlers and occasion, jqxKnob’s dimension watcher. A widget watching its dimension now not leaves a timer working after it’s destroyed.

  • jqxGrid

    Cancelling an edit raised cellendedit with the editor’s worth as the brand new worth, so an app saving from that occasion saved the cancelled worth. A customized editor on a column with a cellsformat saved an empty worth. Characters typed shortly right into a quantity cell editor had been misplaced, and Enter then threw. Unmounting the grid proper after an edit threw. isrowhiddenat didn’t see rows hidden with hiderow. Updating a row (updaterow) closed each open row particulars and forgot the rows hidden with hiderow and the heights set with setrowheight. With enableSanitize set when the grid was created, a sanitized worth confirmed its HTML entities as textual content (escaped twice). autoselectfirstrow chosen the primary row when a mouse click on on a column header moved the main target into the grid, and on a sorted grid it might choose one other row than the primary one proven. The title of a sorted or filtered column ran below its type icon when it was right-aligned or lengthy (a “Whole” column confirmed “Tota”), in all themes. With selectionmode ‘checkbox’, columns whose share widths add as much as 100% overflowed the grid by the examine field column’s width and confirmed a horizontal scrollbar; the chances at the moment are of the width left beside it, as with row particulars. Within the Fluent, Gentle and Tailwind themes (and their darkish and blue variants), React elements within the grid (cells, editors, headers, bars and row particulars) preserve their very own textual content color in a particular row and their very own enter padding. CSV, TSV, JSON, XML, HTML and XLS exports with out an exportServer (jqxGrid, jqxDataTable, jqxTreeGrid and the opposite widgets that export via jqxdata.export.js) at the moment are made within the browser: the info is now not despatched to an export server on the web (outdoors jqwidgets.com that was http://jquerygrid.internet, over plain http). Move exportServer to maintain utilizing a server of your individual. A quantity column with no cellsformat is exported because the grid reveals it (39, 10248), now not with two decimals and group separators (“39.00”, “10,248.00”); give the column a cellsformat for a formatted export.

  • Drop-down popups behind the web page

    The popups of jqxDropDownList, jqxComboBox, jqxDateTimeInput and jqxDropDownButton (the grid pager’s “Present rows” record amongst them) opened behind the web page when the widget sat in a container with a z-index above 9999, as in an utility shell that may be a mounted, full-page layer: the popups’ z-index was a hard and fast 9999 (!essential, so popupZIndex couldn’t change it). A popup now opens one above the very best z-index amongst its widget’s containers.

  • Different fixes

    jqxKanban expandColumn and selectItem threw. jqxTreeMap clearSelection left sectors chosen. jqxChart clear() made cleared charts share their sequence. jqxSortable raises take away with removeItem. jqxGauge and jqxKnob settle for kinds, the title the Vue and Angular elements use.