Add extra HTTP variables
This help article illustrates how to send data to the server. The Grid builds a Data object to be sent to the server which contains data about the Grid's current page number, sort columns, sort order, etc.
You can also add your custom data to be sent. The data object is automatically converted to a query string by jQuery and it is appended to the url.
In the following example code, we define a data object with three members. The members and their values defined in the data object will be sent to the server.
// prepare the data
var source =
{
datatype: "jsonp",
datafields: [
{ name: 'countryName' },
{ name: 'name' },
{ name: 'population', type: 'float' },
{ name: 'continentCode' }
],
url: "http://ws.geonames.org/searchJSON",
data: {
featureClass: "P",
style: "full",
maxRows: 50
}
};
The data is converted into a query string using jQuery.param() before it is sent. The above code is appropriate for static data sent to the server.
By default, the Grid sends the following data to the server:
- sortdatafield - the sort column's datafield.
- sortorder - the sort order - 'asc', 'desc' or ''
- pagenum - the current page's number when the paging feature is enabled.
- pagesize - the page's size which represents the number of rows displayed in the view.
- recordstartindex - the index in the view's first visible record.
- recordendindex - the index in the view's last visible record
- groupscount - the number of groups in the Grid
- group - the group's name. The group's name for the first group is 'group0', for the second group is 'group1' and so on.
- filterscount - the number of filters applied to the Grid
- filtervalue - the filter's value. The filtervalue name for the first filter is "filtervalue0", for the second filter is "filtervalue1" and so on.
- filtercondition - the filter's condition. The condition can be any of these: "CONTAINS", "DOES_NOT_CONTAIN", "EQUAL", "EQUAL_CASE_SENSITIVE",
NOT_EQUAL","GREATER_THAN", "GREATER_THAN_OR_EQUAL", "LESS_THAN", "LESS_THAN_OR_EQUAL", "STARTS_WITH",
"STARTS_WITH_CASE_SENSITIVE", "ENDS_WITH", "ENDS_WITH_CASE_SENSITIVE", "NULL", "NOT_NULL", "EMPTY", "NOT_EMPTY"
- filterdatafield - the filter column's datafield
- filteroperator - the filter's operator - 0 for "AND" and 1 for "OR"
Before the data is sent to the server, you can use the 'formatData' function of the jqxDataAdapter. The result that the 'formatData' function
returns determines the parameters which will be sent to the server. The 'formatData' function is appropriate for scenarios with dynamic parameters.
Here's how to override the data object and send the "my data" string to the server:
var source =
{
datatype: "jsonp",
datafields: [
{ name: 'countryName', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'population', type: 'float' },
{ name: 'continentCode', type: 'string' }
],
url: "http://ws.geonames.org/searchJSON"
};
var dataAdapter = new $.jqx.dataAdapter(source,
{
formatData: function (data) {
$.extend(data, {
featureClass: "P",
style: "full",
maxRows: 50
});
return data;
}
}
);
The parameter passed to the 'formatData' function represents the data object which includes all settings defined by you in the source object's data member and all settings by the Grid('sortdatafield', 'sortorder', etc.).
Sending data to the server when using the jqxGrid with PHP
jQuery will automatically convert the data object into a string and send in the following format:
"pagenum=0&pagesize=10&featureClass=P&style=full&maxRows=50"
Then, in your PHP code, you can get the values of the pagenum and pagesize by using this code:
$pagenum = $_GET['pagenum'];
$pagesize = $_GET['pagesize'];
Sending data to the server when using the jqxGrid with ASP .NET
ASP.NET AJAX script services and page methods understand and expect input parameters to be serialized as JSON strings. These parameters are parsed out of the POST data and used as arguments to the method you’ve called.
However, as the Grid provides a JSON object as a data parameter for an $.ajax call, jQuery will convert the object into a query string using jQuery.param().
Take this sample request, for example where data is defined as {featureClass: "P", style: "full", maxRows: 50};:
$.ajax({
type: "POST",
url: "WebService.asmx/WebMethodName",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json"
});
jQuery will automatically convert the object into a string and send it as:
"featureClass=P&style=full&maxRows=50".
This is OK, if you are using the Grid with PHP, but in ASP .NET, the server will respond with "Invalid JSON primitive" error.
The solution in ASP .NET application scenarios is to make sure that you’re passing a string for the data parameter, like this:
$.ajax({
type: "POST",
url: "WebService.asmx/WebMethodName",
data: "{'featureClass': 'P', 'style': 'full', 'maxRows': '50'}",
contentType: "application/json; charset=utf-8",
dataType: "json"
});
With jqxGrid, the above data string can be achieved exactly by using the 'formatData' function.
formatData: function (data) {
return "{'featureClass': 'P', 'style': 'full', 'maxRows': '50'}";
}
To make a GET, we need to set the data object as follows: "{}".
formatData: function (data) {
return "{}";
}