JqxGrid: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
Line 12: Line 12:


<pre>
<pre>
For row=0 to 3
Dim data, source, dataAdapter
  For col=0 to 3
data = generatedata(50);
    Grid1.setValue(row,col,row*col)
source = {localdata: data, datatype: "array"};
  Next
dataAdapter = new $.jqx.dataAdapter(source);
Next
             
Grid1_settings.source = dataAdapter
Function Button1_onclick()
Grid1_settings.columns = [ _
  MsgBox "Grid(3,3)=" & Grid1.getValue(3,3)
    { text: "First Name", dataField: "firstname", width: 100 }, _
End Function
    { text: "Last Name", dataField: "lastname", width: 100 }, _
    { text: "Product", dataField: "productname", width: 180 }, _
Function Grid1_onclick()
    { text: "Quantity", dataField: "quantity", width: 80, cellsalign: "right" }, _
  s=Split(event.target.id, "_")
    { text: "Unit Price", dataField: "price", width: 90, cellsalign: "right", cellsformat: "c2" }, _
  MsgBox "Click on " & s(0) & " at row " & s(1) & " and column " & s(2)
    { text: "Total", dataField: "total", cellsalign: "right", minwidth: 100, cellsformat: "c2" } _
  MsgBox "Value is " & Grid1.getValue(s(1),s(2))
  ]
End Function
</pre>
</pre>



Revision as of 21:35, 27 December 2012

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);
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" } _
  ]

Output