wijgrid jQuery Widget

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

Syntax

Javascript (Usage)
Javascript (Specification)

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

function wijgrid() : any;

Remarks

WijGrid IColumn also provides options that you can use to change the behavior of your grid's columns.

Options

	Name	Description
	allowColMoving	Determines whether end users can drag and drop to reorder columns. Default value: false Type: Boolean
	allowColSizing	Determines whether the user can drag a sizing handle at the edge of the column header to change the width of the column. Default value: false Type: Boolean
	allowEditing	Determines whether the user can make changes to cell contents in the grid. This option is obsolete. Use the editingMode option instead. Default value: false Type: Boolean
	allowKeyboardNavigation	Determines whether the user can change the current cell using the keyboard arrow keys. Default value: true Type: Boolean
	allowPaging	Determines whether the grid displays paging buttons that allow the user to navigate between pages of data. Set the number of rows of data on each page using the pageSize option. Default value: false Type: Boolean
	allowSorting	Determines whether users can sort data in the grid by clicking a column header. Default value: false Type: Boolean
	allowVirtualScrolling	Indicate whether to enable the virtual scrolling feature. To improve efficiency, set this option to true when using large amounts of data without paging. Obsoleted, use the scrollingSettings.virtualization.mode option instead. Default value: false Type: Boolean
	calendar	Default value: null A value that indicates calendar's options in grid. It works for calendar in inputdate.
	cellStyleFormatter	Creates a function that is called each time wijgrid changes a cell's appearance, for example, when the current cell position changes or a cell is selected. Use it to customize a cell's style depending on its state. Default value: undefined Type: Function
	columns	An array of column objects. Default value: [] Type: wijmo.grid.IColumn[]
	columnsAutogenerationMode	Determines the behavior for column autogeneration. Default value: merge Type: String (see valid values below)
	culture	Determines the culture ID to use in rendering the grid. You must include a reference to the globalize.culture file that matches the culture ID you use in order for this option to take effect. See Localization and Globalization for more information. Default value: "" Type: String
	cultureCalendar	A value that indicates the culture calendar to use in formatting dates in the grid. This option must match the value used in the culture option. Default value: "" Type: String
	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.
	detail	Type: wijmo.grid.IDetailSettings Determines the detail grid settings in a hierarchy grid, which is used as a template for populating detail grids in a hierarchical grid.
	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	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". Obsoleted, use the scrollingSettings.freezingMode property instead.
	groupAreaCaption	Sets the text to display in the the group area. Default value: 'Drag a column here to group by that column.' Type: String
	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.
	keyActionTab	Default value: 'moveAcross' Determines the action to be performed when the user presses the TAB key.
	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	Determines the zero-based index of the current page. Use this option to display a specific page of records when using the paging feature. Default value: 0 Type: number
	pagerSettings	Determines the pager settings for the grid including the mode (page buttons, or next and previous buttons), the number of page buttons, and the position where the buttons appear. Default: {mode: "numeric", pageButtonCount: 10, position: "bottom"} Type: wijmo.grid.IPagerSettings object
	pageSize	Specify the number of rows to place on a single page when allowPaging is set to true. Default value: 10 Type: number
	readAttributesFromData	Default value: false A value indicating whether DOM cell attributes can be passed within a data value.
	rowHeight	Determines the height of a rows when virtual scrolling is used. Obsoleted, use the scrollingSettings.virtualization.rowHeight property instead.
	rowStyleFormatter	Function used for styling rows in wijgrid.
	scrollingSettings	Type: wijmo.grid.IScrollingSettings Determines the scrolling settings.
	scrollMode	Determines which scrollbars are active and if they appear automatically based on content size. Possbile values are: "none", "auto", "horizontal", "vertical", "both". Obsoleted, use the scrollingSettings.mode property instead.
	selectionMode	Default value: singleRow Determines how many cells, ranges of cells, columns, or rows can be selected at one time. Valid values: none Selection is turned off. singleCell A single cell can be selected. singleColumn A single column can be selected. singleRow A single row can be selected. singleRange A single range of cells can be selected. multiColumn More than one column can be selected at the same time using the mouse and the CTRL or SHIFT keys. multiRow More than one row can be selected at the same time using the mouse and the CTRL or SHIFT keys. multiRange More than one range of cells can be selected at the same time using the mouse and the CTRL or SHIFT keys.
	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 allowColMoving 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	Indicates the index of columns that will always be shown on the left when the grid view is scrolled horizontally. Obsoleted, use the scrollingSettings.staticColumnIndex property instead.
	staticColumnsAlignment	Gets or sets the alignment of the static columns area. Possible values are "left", "right". Obsoleted, use the scrollingSettings.staticColumnsAlignment property instead.
	staticRowIndex	Indicates the index of data rows that will always be shown on the top when the wijgrid is scrolled vertically. Obsoleted, use the scrollingSettings.staticRowIndext property instead.
	totalRows	Default value: -1 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	</> Summary (Javascript source comments) 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
	details	Returns an array which consists of hierarchy nodes in wijgrid.
	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.
	exportGrid	Exports the grid to a specified format. The export method only works when wijmo.exporter.gridExport's reference is on the page.
	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 information about 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.
	detailCreating	The detailCreating event handler is called when wijgrid requires to create a new detail wijgrid.
	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

Widgets

Grid

Reference

wijgrid jQuery Widget