W2UI 1.3 Released: Goodbye Pagination, Hello Infinite Scroll

October 29, 2013

I am happy to announce the release of W2UI ver 1.3. This release has many new features, improvements, bug fixes. New 1.3 version is not backward compatible with 1.2, however, these release notes should help you migrate. I have also back-ported some bug fixes into W2UI ver 1.2.1 that is fully backwards compatible with 1.2 version.

The short story

One of the major changes in 1.3 is deprecation of pagination in favor of infinite scroll. My goal was to make the grid present records in a natural way so that you would not even think that there is any other way. You scroll, you see more records (if any). You engage the scroll bar, you get the records you were hoping to get. And I think it turned out to be an awesome feature.

You can see a demo of Infinite Scroll in the demo section. It works great for local data source, when all records are present in JavaScript, as well as for remote data source when records and retrieved from the server as user scrolls. If your data source is remote, the grid will initially fetch first 100 records and if user scrolls down it will fetch next 100. Fetched records get stored in the records array and if user scrolls up - no server request will be made.

I have gotten an early comment from a user that it might not be satisfying for DB intensive requests. To address this issue a new property has been introduced - autoLoad - that indicates whether to load more records when user scrolls down or display "Load More" button at the bottom of prefetched records.

I have updated demos and documentation to reflect changes in 1.3. The following is the non-exhaustive list of updates in this release:

Infinite Scroll
Buffered Scroll
Pagination is deprecated
Major performance improvements (grid tested with one million records)
Improved cross-widget integration (see demos)
Spreadsheet-like Grids
Ability to lock grid, layout, sidebar and popup content
Improved keyboard navigation in grid and sidebar

The long story

Every widget has been touched in this release. In the list below you can find all improvements and new features for each widget.

Layout

Improved %-based panel size calculations
Improved min/max calculations on window resize
Implemented ability to load CSS into a hidden panel
Implemented ability to defined tabs as array or w2tabs object
Added .el() method
Added .html() method
Added .lock() method
Added .unlock() method
Added .sizeTo() method
Added .showToolbar() method
Added .hideToolbar() method
Added .toggleToolbar() method
Added .showTabs() method
Added .hideTabs() method
Added .toggleTabs() method
Deprecated .doResize() method (made private)
Deprecated .startResize() method (made private)
Deprecated .stopResize() method (made private)
Deprecated .initEvents() method (made private)
Deprecated .initTabs() method (made private)
Deprecated .initToolbar() method (made private)

Grid

Implemented infinite scroll
Implemented grid formatters (number, int, float, money, age, date)
Improved peformance for large number of records
Improved column width distribution
Improved grid data table resize
Improved local search (does not require search field defined to search)
Improved keyboard navigation and selection with keyboard
Improved grid search
Added .onCollapse event
Added .onColumnClick event
Added .onColumnOnOff event
Added .onColumnResize event
Added .onCopy event
Added .onDeleted event
Added .onEditField event
Added .onKeydown event
Added .onPaste event
Added .onReload event
Added .onSaved event
Added .onToolbar event
Added .keyboard property
Added .buffered property
Added .autoLoad property
Added .selectType property
Added .limit propety
Added .offset propety
Added .recordHeight property
Added .show.recordTitles property
Added .records[].changes property
Added .records[].changed property
Added .records[].expanded property
Added .keydown() method
Added .getRecordHTML() method
Added .getSummaryHTML() method
Added .skip() method
Added .columnOnOff() method
Added .columnClick() method
Added .scrollIntoView() method
Added .collapse() method
Added .toggle() method
Added .getCellData() method
Added .status() method
Added .mergeChanged() method
Added .copy() method
Added .paste() method
Added .addRange() method
Added .removeRange() method
Added .getRange() method
Refactored .url property to allow different components
Refactored .set() method
Refactored .getSelection() method
Refactored .lock() method
Refactored .unlock() method
Refactored .columns[].title property (can be string or function)
Refactored .records[].render property (added extra argument column_index)
Deprecated .fixedRecord property
Deprecated .recordsPerPage property
Deprecated .page property
Deprecated .record.hidden property
Deprecated .selectPage() method
Deprecated .goto() method
Deprecated .doAdd() method
Deprecated .doEdit() method
Renamed .doEdit() into .editField()
Renamed .doExpand() into .expand()
Renamed .doClick() into .click()
Renamed .doDblClick() into .dblClick()
Renamed .doScroll() into .scroll()
Renamed .doSort() into .sort()
Renamed .doSave() into .save()
Renamed .doDelete() into .delete()

Toolbar

Renamed .doClick() into .click()
Renamed .doMenuClick() into .menuClick()
Deprecated .getMenuHTML() method

Sidebar

Animated Expand/Collapse
Keyboard Navigation
Implemented Context Menu
Lock/Unlock of the sidebar
Added .keyboard property
Added .menu() property
Added .onKeydown event
Added .onMenuClick event
Added .keydown() method
Added .menuClick() method
Added .scrollIntoView() method
Added .lock() method
Added .unlock() method
Renamed .doClick() into .click()
Renamed .doDblClick() into .dblClick()

Tabs

Renamed .doClick() into .click()
Renamed .doClose() into .animateClose()
Renamed .doInsert() into .animateInsert()

Form

Improved Auto Template Generation
Added .focus property
Added .toolbar property
Added .onToolbar event
Added .onValidate event
Added .submit() method
Renamed .doAction() into .action()
Refactored .url property to allow different components
Refactored .lock() method
Refactored .unlock() method
Deprecated .focusFirst property
Deprecated .init() method

Popup

Keyboard Navigation for w2popup (esc)
Keyboard Navigation for w2alert and w2confirm (esc - no, enter - yes)
Added .onKeydown event
Added .lock() method
Added .unlock() method
Renamed .doKeydown() into .keydown()
Refactored w2alert and w2confirm to work when a popup already opened
Refactored Events to be fully compient with w2event as in all other widgets

Fields

Implemented keybaord increment for number fields
Implemented read only for enums
Added options.url select property
Added options.render method for enum, if returns false, no item show
Added options.onAdd enum event
Added options.onHide enum event
Added options.onItemOut enum event
Added options.onItemOver enum event
Added options.onItemClick enum event
Added options.onRemove enum event
Added options.onShow enum event

Utils

Implemented w2utils.keyboard object for keyboard navigation
Implemented $().w2marker('string') jQuery plugin
Implemented $().w2menu('string') jQuery plugin
Added .formatNumber() method
Added .formatTime() method
Added .formatDateTime() method
Added .lock() method
Added .unlock() method