I have been getting the hang of using jqGrid from with asp.net web forms. So I will to brief walkthru.
first add the following HTML to your page:
<table id="list4"></table>
<div id="gridpager"></div>
Now in your docready function or a function you plan to load the grid in add the following code:
$("#list4").jqGrid({
datatype: "local",
height: 250,
loadtext: "Loading...",
colNames: ['Col1', 'Col2', 'Col3'],
colModel: [
{ name: 'Col1', index: 'Col1', hidden: true },
{ name: 'Col2', index: 'Col2', sorttype: "text" },
{ name: 'Col3', index: 'Col3', width: 100, sorttype: "text" }
],
multiselect: false,
pager: '#gridpager',
pgbuttons: false,
pgtext: null,
recordtext: '',
viewrecords: true,
autowidth: true,
caption: "Summary"
});
$("#list4").navGrid('#gridpager',
{view:false,edit:false,search:true,add:false,del:false,refresh:false}
);
var dArray = "{";
dArray += "'userid': '" + <%=Page.User.Identity.Name %> + "',";
dArray += "'fromdate': '" + $("#<%= txtFrom.ClientID %>").val() + "',";
dArray += "'todate': '" + $("#<%= txtTo.ClientID %>").val() + "'";
dArray += "}";
$.ajax({
type: "POST",
url: "default.aspx/GetGridData",
data: dArray,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (response) {
//$("#list4").clearGridData();
var gd = eval('(' + response.d + ')');
for (row in gd){
$("#list4").jqGrid('addRowData', row, gd[row]);
}
},
error: function (response) {
alert(response.responseText);
}
});
Now I would say to use a web service but Ihave certain pages where this is just a one of so I amusing PageMethods here. Create your Pagemethod to return the data as a JSON string. i will also provide a helper utility to convert a dataTable to a JSON string.
'pagemethod
<WebMethod()> _
Public Shared Function GetGridData(userid As String, fromdate As String, todate As String) As String
Dim result As String = String.Empty
Try
Dim params As New List(Of SqlParameter)
params.Add(New SqlParameter("userid", userid))
params.Add(New SqlParameter("from", String.Format("{0} 12:00 AM", fromdate)))
params.Add(New SqlParameter("to", String.Format("{0} 11:59 PM", todate)))
Using dt As DataTable = SqlHelper.GetDataTable("stp_getSomeGridDataProcedure", CommandType.StoredProcedure, params.ToArray)
result = ConvertDataTableToJSON(dt)
End Using
Catch ex As Exception
End Try
Return result
End Function
and the helper function:
'utility function to convert datatable to json
Public Shared Function ConvertDataTableToJSON(Dt As DataTable) As String
Dim StrDc As String() = New String(Dt.Columns.Count) {}
Dim HeadStr As String = String.Empty
Dim hdrLst As New List(Of String)
For i As Integer = 0 To Dt.Columns.Count - 1
StrDc(i) = Dt.Columns(i).Caption
hdrLst.Add("""" + StrDc(i) + """ : """ + StrDc(i) + i.ToString() + "¾" + """")
Next
HeadStr = Join(hdrLst.ToArray, ",")
Dim Sb As New StringBuilder()
Sb.Append("{""" + Dt.TableName + """ : [")
For i As Integer = 0 To Dt.Rows.Count - 1
Dim TempStr As String = HeadStr
Sb.Append("{")
For j As Integer = 0 To Dt.Columns.Count - 1
Dim replaceString As String = Dt.Columns(j).ToString & j.ToString() & "¾"
Dim newString As String = Dt.Rows(i)(j).ToString()
TempStr = TempStr.Replace(replaceString, newString)
Next
Sb.Append(TempStr + "},")
Next
Sb = New StringBuilder(Sb.ToString().Substring(0, Sb.ToString().Length - 1))
Sb.Append("]}")
Return Sb.ToString()
End Function
Remember to update the column names and the sql to reflect your data. Hope this helps someone else. Oh, this is using the datatype="local", you could easily move the ajax call into the datatype as a fucntion as such:
datatype: function (pdata) {
var dArray = "{";
dArray += "'userid': '" + <%=Page.User.Identity.Name %> + "',";
dArray += "'fromdate': '" + $("#<%= txtFrom.ClientID %>").val() + "',";
dArray += "'todate': '" + $("#<%= txtTo.ClientID %>").val() + "'";
dArray += "}";
$.ajax({
type: "POST",
url: "default.aspx/GetGridData",
data: dArray,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (response) {
//$("#list4").clearGridData();
var gd = eval('(' + response.d + ')');
for (row in gd){
$("#list4").jqGrid('addRowData', row, gd[row]);
}
},
error: function (response) {
alert(response.responseText);
}
});
},