wijgrid jQuery Widget

Interactively select, edit, sort, scroll through, filter, and group data to better understand and visualize it more effectively.

Syntax

Javascript (Usage)
$(function () { var options; // Type: wijmo.grid.wijgrid.options $(".selector").wijgrid(options); });

Javascript (Usage)

$(function () {
    var options; // Type:  wijmo.grid.wijgrid.options
     
    $(".selector").wijgrid(options);
});

Javascript (Specification)
function wijgrid() : any;

Remarks

The c1band, c1basefield, and c1field internal widgets also provide options that you can use to change the behavior of your grid's columns.

Browser Compatibility

Options

	Name	Description
	allowColMoving	Default value: false A value indicating whether columns can be moved.
	allowColSizing	Default value: false Determines whether the column width can be increased and decreased by dragging the sizing handle, or the edge of the column header, with the mouse.
	allowEditing	Default value: false Determines whether the user can make changes to cell contents in the grid. This option is obsolete. Use the editingMode option instead.
	allowKeyboardNavigation	Default value: true Determines whether the user can move the current cell using the arrow keys.
	allowPaging	Default value: false Determines whether the grid should display paging buttons. The number of rows on a page is determined by the pageSize option.
	allowSorting	Default value: false Determines whether the widget can be sorted by clicking the column header.
	allowVirtualScrolling	Default value: false A value that indicates whether virtual scrolling is allowed. Set allowVirtualScrolling to true when using large amounts of data to improve efficiency.
	cellStyleFormatter	This function is called each time wijgrid needs to change cell appearence, for example, when the current cell position is changed or cell is selected. Can be used for customization of cell style depending on its state.
	columns	Type: wijmo.grid.IColumn[] Default value: [] An array of column options.
	columnsAutogenerationMode	Default value: 'merge' Determines behavior for column autogeneration. Possible values are: "none", "append", "merge".
	culture	Default value: "" Determines the culture ID.
	customFilterOperators	Type: wijmo.grid.IFilterOperator[] Default value: [] An array of custom user filters. Use this option if you want to extend the default set of filter operators with your own. Custom filters will be shown in the filter dropdown.
	data	Default value: null Determines the datasource. Possible datasources include: 1. A DOM table. This is the default datasource, used if the data option is null. Table must have no cells with rowSpan and colSpan attributes. 2. A two-dimensional array, such as [[0, "a"], [1, "b"]]. 3. An array of objects, such as [{field0: 0, field1: "a"}, {field0: 1, field1: "b'}]. 4. A wijdatasource. 5. A wijdataview.
	editingInitOption	Default value: 'auto' Determines an action to bring a cell in the editing mode when the editingMode option is set to "cell". Possible values are: "click", "doubleClick", "auto".
	editingMode	Default value: 'none' Determines the editing mode. Possible values are: "none", "row", "cell",
	ensureColumnsPxWidth	Default value: false Determines if the exact column width, in pixels, is used.
	filterOperatorsSortMode	Default value: 'alphabeticalCustomFirst' Determines the order of items in the filter drop-down list. Possible values are: "none", "alphabetical", "alphabeticalCustomFirst" and "alphabeticalEmbeddedFirst"
	freezingMode	Default value: 'none' Determines whether the user can change position of the static column or row by dragging the vertical or horizontal freezing handle with the mouse. Possible values are: "none", "columns", "rows", "both".
	groupAreaCaption	Default value: 'Drag a column here to group by that column.' Determines the caption of the group area.
	groupIndent	Default value: 10 Determines the indentation of the groups, in pixels.
	highlightCurrentCell	Default value: false Determines whether the position of the current cell is highlighted or not.
	highlightOnHover	Default value: true Determines whether hovered row is highlighted or not.
	loadingText	Default value: 'Loading...' Determines the text to be displayed when the grid is loading.
	nullString	Default value: "" Cell values equal to this property value are considered null values. Use this option if you want to change default representation of null values (empty strings) with something else.
	pageIndex	Default value: 0 Determines the zero-based index of the current page. You can use this to access a specific page, for example, when using the paging feature.
	pagerSettings	Type: wijmo.grid.IPagerSettings Determines the pager settings for the grid including the mode (page buttons or next/previous buttons), number of page buttons, and position where the buttons appear.
	pageSize	Default value: 10 Number of rows to place on a single page. The default value is 10.
	readAttributesFromData	Default value: false A value indicating whether DOM cell attributes can be passed within a data value.
	rowHeight	Default value: 0 Determines the height of a rows when virtual scrolling is used.
	rowStyleFormatter	Function used for styling rows in wijgrid.
	scrollMode	Default value: 'none' Determines which scrollbars are active and if they appear automatically based on content size. Possbile values are: "none", "auto", "horizontal", "vertical", "both".
	selectionMode	Default value: 'singleRow' Determines which cells, range of cells, columns, or rows can be selected at one time. Possible values are: "none", "singleCell", "singleColumn", "singleRow", "singleRange", "multiColumn", "multiRow" and "multiRange".
	showFilter	Default value: false A value indicating whether the filter row is visible. Filter row is used to display column filtering interface.
	showFooter	Default value: false A value indicating whether the footer row is visible. Footer row is used for displaying of tfoot section of original table, and to show totals.
	showGroupArea	Default value: false A value indicating whether group area is visible. Group area is used to display headers of groupped columns. User can drag columns from/to group area by dragging column headers with mouse, if allowColumnMoving option is on.
	showRowHeader	Default value: false A value indicating whether the row header is visible.
	showSelectionOnRender	Default value: true A value indicating whether a selection will be automatically displayed at the current cell position when the wijgrid is rendered. Set this option to false if you want to prevent wijgrid from selecting the currentCell automatically.
	staticColumnIndex	Default value: 0 Indicates the index of columns that will always be shown on the left when the grid view is scrolled horizontally. Note that all columns before the static column will be automatically marked as static, too. This can only take effect when the scrollMode option is not set to "none". It will be considered "-1" when grouping or row merging is enabled. A "-1" means there is no data column but the row header is static. A zero (0) means one data column and row header are static.
	staticColumnsAlignment	Default value: 'left' Gets or sets the alignment of the static columns area. Possible values are "left", "right".
	staticRowIndex	Default value: 0 Indicates the index of data rows that will always be shown on the top when the wijgrid is scrolled vertically. Note, that all rows before the static row will be automatically marked as static, too. This can only take effect when the scrollMode option is not set to "none". This will be considered "-1" when grouping or row merging is enabled. A "-1" means there is no data row but the header row is static.A zero (0) means one data row and the row header are static.
	totalRows	Default value: 0 Gets or sets the virtual number of items in the wijgrid and enables custom paging. Setting option to a positive value activates custom paging, the number of displayed rows and the total number of pages will be determined by the totalRows and pageSize values.

Top

Methods

	Name	Description
	beginEdit	Puts the current cell into edit mode, as long as the editingMode options is set to "cell".
	cancelRowEditing	Discards changes and finishes editing of the edited row.
	columns	Returns a one-dimensional array of widgets bound to visible column headers.
	currentCell	Sets the current cell for the grid.
	data	Gets an array of underlying data.
	dataView	Gets an underlying wijdataview instance.
	deleteRow	Deletes the specified row.
	destroy
	doRefresh	Re-renders wijgrid.
	editRow	Starts editing of the specified row, can only be used when the editingMode option is set to "row".
	endEdit	Finishes editing the current cell.
	ensureControl	Moves the column widget options to the wijgrid options and renders the wijgrid. Use this method when you need to re-render the wijgrid and reload remote data from the datasource.
	getCellInfo	Gets an instance of the wijmo.grid.cellInfo class that represents the grid's specified cell.
	getFilterOperatorsByDataType	Returns a one-dimensional array of filter operators which are applicable to the specified data type.
	pageCount	Gets the number of pages.
	selection	Gets an object that manages selection in the grid.
	setSize	Sets the size of the grid using the width and height parameters.
	updateRow	Finishes editing and updates the datasource.
	widget	Returns a jQuery object containing the original element or other relevant generated element.

Top

Events

	Name	Description
	afterCellEdit	The afterCellEdit event handler is a function called after cell editing is completed. This function can assist you in completing many tasks, such as in making changes once editing is completed; in tracking changes in cells, columns, or rows; or in integrating custom editing functions on the front end.
	afterCellUpdate	The afterCellUpdate event handler is a function that is called after a cell has been updated. Among other functions, this event allows you to track and store the indices of changed rows or columns.
	beforeCellEdit	The beforeCellEdit event handler is a function that is called before a cell enters edit mode. The beforeCellEdit event handler assists you in appending a widget, data, or other item to a wijgrid's cells before the cells enter edit mode. This event is cancellable if the editigMode options is set to "cell".
	beforeCellUpdate	The beforeCellUpdate event handler is a function that is called before the cell is updated with new or user-entered data. This event is cancellable if the editingMode options is set to "cell". There are many instances where this event is helpful, such as when you need to check a cell's value before the update occurs or when you need to apply an alert message based on the cell's value.
	cellClicked	The cellClicked event handler is a function that is called when a cell is clicked. You can use this event to get the information of a clicked cell using the args parameter.
	columnDragged	The columnDragged event handler is a function that is called when column dragging has been started. You can use this event to find the column being dragged or the dragged column's location.
	columnDragging	The columnDragging event handler is a function that is called when column dragging has been started, but before the wijgrid handles the operation. This event is cancellable.
	columnDropped	The columnDropped event handler is a function that is called when a column has been dropped into the columns area.
	columnDropping	The columnDropping event handler is a function that is called when a column is dropped into the columns area, but before wijgrid handles the operation. This event is cancellable.
	columnGrouped	The columnGrouped event handler is a function that is called when a column has been dropped into the group area.
	columnGrouping	The columnGrouping event handler is a function that is called when a column is dropped into the group area, but before the wijgrid handles the operation. This event is cancellable.
	columnResized	The columnResized event handler is called when a user has changed a column's size.
	columnResizing	The columnResizing event handler is called when a user resizes the column but before the wijgrid handles the operation. This event is cancellable.
	columnUngrouped	The columnUngrouped event handler is called when a column has been removed from the group area.
	columnUngrouping	The columnUngrouping event handler is called when a column has been removed from the group area but before the wjgrid handles the operation. This event is cancellable.
	currentCellChanged	The currentCellChanged event handler is called after the current cell is changed.
	currentCellChanging	The currentCellChanging event handler is called before the cell is changed. You can use this event to get a selected row or column or to get a data row bound to the current cell. This event is cancellable.
	dataLoaded	The dataLoaded event handler is a function that is called when data is loaded.
	dataLoading	The dataLoading event handler is a function that is called when the wijgrid loads a portion of data from the underlying datasource. This can be used for modification of data sent to server if using dynamic remote wijdatasource.
	filtered	The filtered event handler is a function that is called after the wijgrid is filtered.
	filtering	The filtering event handler is a function that is called before the filtering operation is started. For example, you can use this event to change a filtering condition before a filter will be applied to the data. This event is cancellable.
	filterOperatorsListShowing	The filterOperatorsListShowing event handler is a function that is called before the filter drop-down list is shown. You can use this event to customize the list of filter operators for your users.
	groupAggregate	The groupAggregate event handler is a function that is called when groups are being created and the column object's aggregate option has been set to "custom". This event is useful when you want to calculate custom aggregate values.
	groupText	The groupText event handler is a function that is called when groups are being created and the groupInfo option has the groupInfo.headerText or the groupInfo.footerText options set to "custom". This event can be used to customize group headers and group footers.
	invalidCellValue	The invalidCellValue event handler is a function called when a cell needs to start updating but the cell value is invalid. So if the value in a wijgrid cell cannot be converted to the column target type, the invalidCellValue event is raised.
	loaded	The loaded event handler is a function that is called at the end the wijgrid's lifecycle when wijgrid is filled with data and rendered. You can use this event to manipulate the grid html content or to finish a custom load indication.
	loading	The loading event handler is a function that is called at the beginning of the wijgrid's lifecycle. You can use this event to activate a custom load progress indicator.
	pageIndexChanged	The pageIndexChanged event handler is a function that is called after the page index is changed, such as when you use the numeric buttons to swtich between pages or assign a new value to the pageIndex option.
	pageIndexChanging	The pageIndexChanging event handler is a function that is called before the page index is changed. This event is cancellable.
	rendered	The rendered event handler is a function that is called when the wijgrid is rendered. Normally you do not need to use this event.
	rendering	The rendering event handler is a function that is called when the wijgrid is about to render. Normally you do not need to use this event.
	selectionChanged	The selectionChanged event handler is a function that is called after the selection is changed.
	sorted	The sorted event handler is a function that is called after the widget is sorted. The allowSorting option must be set to "true" to allow this event to raise.
	sorting	The sorting event handler is a function that is called before the sorting operation is started. This event is cancellable. The allowSorting option must be set to "true" for this event to raise.

Top

See Also

Reference

Widgets

Reference