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

Sample Code (Read from XML to JqxGrid

Dim gedata, source, dataAdapter, row, req, err, data
  gedata=[]
  source=[]  
  

Function Form1_onshow()

  xmlDatei = "ipadSpeisekarte.xml"
  req = Ajax("http://www.erkankaplan.de/ipad.php/?urlToGet=" & xmlDatei, "", "", xmlLesen)
  
End Function


Function xmlLesen

  If !req Then Exit Function
  If req.readyState<>4 Then Exit Function 'ignore progress reports
  If req.status<>200 Then 'failure
    Exit Function
  End If
  If Left(req.responseText,5)<>"<?xml" Then
    console.log("XML not received" & req.responseText)
    Exit Function
  End If
  
  data = $.xml2json(req.responseText)
  Call fillListFirstSpeisekarte
End Function

Function fillListFirstSpeisekarte
   Dim M1, M2, M3, M4, M5, M6, M7, M8, M9, M10, M11, M12, M13
   gedata=[]
   
    ' For i=0 To UBound(data.row)
     For i=0 To 20
        activity=data.row[i]
        M1 = activity.Menue
        M2 = activity.Scout
        M3 = activity.Text_D 
        M4 = activity.Text_C            
        M5 = activity.Beschreibung_D
        M6 = activity.Beschreibung_C
        M7 = activity.Preis3
        M8 = activity.Sort
        M9 = activity.Gruppe
        M10 = M1 & ".png"
        M11 = activity.WarenGruppe
        M12 = activity.SabuSabu
        M13 = activity.IpadZeitZone
        row=[]
            row["menue"] = M1
            row["textd"] = M3
            row["beschreibung"] = M5
            row["eksi"] = "-"
            row["anz"] = 1
            row["arti"] = "+"
            'row["preis"] = M7
'            row["epreis"] = tmpPreis3; 
'            row["summe"] = tmpSumme;
'            row["status"] = tmpStatus;
'            'row["bild"] = "<img width='50' height='41' src='speisenimg/1.png' >";
'            row["bild"] = "" ;
            gedata[i] = row
    
    Next
    
    source={localdata: gedata, datatype:"array"};
    dataAdapter=new $.jqx.dataAdapter(source);
  
  Grid1_settings.source = dataAdapter
  Grid1_settings.columns = [ _
    { text: "Nummer",           dataField: "menue",     cellsalign: "right",    width: 30 }, _
    { text: "Artikel",          dataField: "textd",     cellsalign: "left",     width: 165 }, _
    { text: "-",                dataField: "eksi",      cellsalign: "center",   width: 70 }, _
    { text: "Anz",              dataField: "anz",       cellsalign: "center",   width: 50, columntype: "textbox" }, _
    { text: "+",                dataField: "arti",      cellsalign: "center",   width: 70 }_
  ]
  

  $("#Grid1").jqxGrid(Grid1_settings);
  $("#Grid1").jqxGrid("setcolumnproperty", "menue", "editable", False)
  $("#Grid1").jqxGrid("setcolumnproperty", "textd", "editable", False) 
  $("#Grid1").jqxGrid("setcolumnproperty", "eksi", "editable", False)
  $("#Grid1").jqxGrid("setcolumnproperty", "anz", "editable", True)
  $("#Grid1").jqxGrid("setcolumnproperty", "arti", "editable", False)
  
     
End Function

Function Grid1_oncellselect(event)
  Dim Header , SecilenSira
  Header = $("#Grid1").jqxGrid("getcolumn", event.args.datafield).text
  Label1.textContent = "Row: " + event.args.rowindex + ", Column: " + Header
  
  SecilenSira = event.args.rowindex
  If Header = "+" Then
    Label2.textContent= "Plus Cell clicked..."
     'MsgBox ("Row: " + ( event.args.rowindex) + ", Value: " + event.args.value)
  End If
  If Header = "-" Then
    Label2.textContent = "Minus Cell clicked"
  End If
  
  Rem calisiyor
  ' var index = $("#Grid1").jqxGrid("getcolumnindex", "arti")   'Sonuc -> 4
   Dim args 
   args = event.args
   Dim Degeri
   Degeri = $("#Grid1").jqxGrid("getcolumnindex", "anz")
   

    Rem calisiyor   var details = $("#Grid1").jqxGrid("getrowdata", SecilenSira);
    Rem calisiyor MsgBox details["anz"]
    var details = $("#Grid1").jqxGrid("getrowdata", SecilenSira);
     
    Label3.textContent = "Readed Datas from selected Row : " + details["menue"] + " / " + details["textd"] + " / " + details["eksi"] + " / " + details["anz"] + " / " + details["arti"]

End Function

Output

See above.