JqxGrid

Description

The Grid is a powerful jQuery widget that displays tabular data. It offers rich support for interacting with data, including paging, grouping, sorting, filtering and editing.

Properties and Methods

See the complete documentation at jqWidget's site: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-getting-started.htm

Example

Dim data, source, dataAdapter
data = generatedata(50)     'generatedata is a function which returns grid data
source = {localdata: data, datatype: "array"}
dataAdapter = new $.jqx.dataAdapter(source)
              
Grid1_settings.source = dataAdapter
Grid1_settings.columns = [ _
    { text: "First Name", dataField: "firstname", width: 100 }, _
    { text: "Last Name", dataField: "lastname", width: 100 }, _
    { text: "Product", dataField: "productname", width: 180 }, _
    { text: "Quantity", dataField: "quantity", width: 80, cellsalign: "right" }, _
    { text: "Unit Price", dataField: "price", width: 90, cellsalign: "right", cellsformat: "c2" }, _
    { text: "Total", dataField: "total", cellsalign: "right", minwidth: 100, cellsformat: "c2" } _
  ]

Change the font size of a grid:

$("#Grid1 .jqx-widget-content").css("font-size","30px");

Respond to a cell getting selected:

Function Grid1_oncellselect(event)
   Dim Headername, HeaderIndex
   Headername = $("#Grid1").jqxGrid("getcolumn", event.args.datafield).text
   Label1.textContent = "Row: " & event.args.rowindex &", Column: " & Headername
   HeaderIndex = $("#Grid1").jqxGrid("getcolumnindex", Headername )   
   'Result -> Index from Headername
   Label2.textContent = "Header Index: " + HeaderIndex
End Function

Value from Selected Row and Result in JSON Format

Function Grid1_oncellselect(event)
 Dim SelectedRow, dataFromSelectedRow
 SelectedRow =  event.args.rowindex

 // Result in JSON-Format   
 dataFromSelectedRow =  $("#Grid1").jqxGrid("getrowdata", SelectedRow);
 
 MsgBox dataFromSelectedRow["firstname"]
 MsgBox dataFromSelectedRow["lastname"]
 MsgBox dataFromSelectedRow["productname"]
 MsgBox dataFromSelectedRow["quantity"]
 MsgBox dataFromSelectedRow["price"]
 MsgBox dataFromSelectedRow["total"]

End Function

Output

See above.