Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
wiki:retrieving_data [2010/06/20 11:06]
tony
wiki:retrieving_data [2012/09/18 15:26]
kompi added a method to specify lastpage in case of a function datatype
Line 1: Line 1:
 ===== Data Manipulation ===== ===== Data Manipulation =====
  
-With the first release of jqGrid, the only possible way to obtain data was via xml as described in the tutorial above. Later, many people requested the ability to obtain data via JSON, then with an array and finally with '​real'​ names. After lot of work and with the help of the community we now have a wide range of methods for obtaining data.+With the first release of jqGrid, the only possible way to obtain data was via XML as described in the tutorial above. Later, many people requested the ability to obtain data via JSON, then with an array and finally with '​real'​ names. After lot of work and with the help of the community we now have a wide range of methods for obtaining data.
  
 The related options (in options array) for manipulating different types of data are: The related options (in options array) for manipulating different types of data are:
Line 9: Line 9:
   * json   * json
   * jsonp   * jsonp
-  * local or clientSide+  * array
   * xmlstring   * xmlstring
   * jsonstring   * jsonstring
Line 17: Line 17:
 <note important>​It is very important to read this chapter, in order to understand how you should work with the data! </​note>​ <note important>​It is very important to read this chapter, in order to understand how you should work with the data! </​note>​
  
-The default mapping for xml data is as follows:+The default mapping for XML data is as follows:
  
 <code javascript>​ <code javascript>​
Line 45: Line 45:
 If your server can provide data in this structure, you need to do nothing more; but if not, there is a way (several ways) to handle the data you are given. See XML Data below. If your server can provide data in this structure, you need to do nothing more; but if not, there is a way (several ways) to handle the data you are given. See XML Data below.
  
-The default mapping for json data is as follows:+The default mapping for JSON data is as follows:
  
 <code javascript>​ <code javascript>​
Line 69: Line 69:
 </​code>​ </​code>​
  
-In colModel, the related options are xmlmap for the description of an xml field, and jsonmap for the description of a json field. For example:+In colModel, the related options are xmlmap for the description of an XML field, and jsonmap for the description of a JSON field. For example:
  
 <code javascript>​ <code javascript>​
Line 79: Line 79:
 </​code>​ </​code>​
  
-will cause jqGrid to search in the xml data for an '​amt'​ tag (when the repeatitems option is set to false. See below.).+will cause jqGrid to search in the XML data for an '​amt'​ tag (when the repeatitems option is set to false. See below.).
  
 ==== XML Data ==== ==== XML Data ====
  
-As mentioned above, if we do not set the datatype and xmlReader parameter in the options array, the grid expects ​xml data, and the structure of this data is as described in our example. But what if we do not have the chance to manipulate the server response? The solution to this problem is xmlReader, again with some additions in colModel. Here is a brief description of xmlReader.+As mentioned above, if we do not set the datatype and xmlReader parameter in the options array, the grid expects ​XML data, and the structure of this data is as described in our example. But what if we do not have the chance to manipulate the server response? The solution to this problem is xmlReader, again with some additions in colModel. Here is a brief description of xmlReader.
  
-Important note: the rules of accessing the element from xml are the same as those used in jQuery library, i.e. CSS patterns. For more information refer to: http://​www.w3.org/​TR/​REC-CSS2/​selector.html+Important note: the rules of accessing the element from XML are the same as those used in jQuery library, i.e. CSS patterns. For more information refer to: http://​www.w3.org/​TR/​REC-CSS2/​selector.html
 <code javascript>​ <code javascript>​
 jQuery("#​gridid"​).jqGrid({ jQuery("#​gridid"​).jqGrid({
Line 109: Line 109:
 }); });
 </​code>​ </​code>​
 +
 +<note important>​As of version 4.3 jqGrid can read any attribute from the XML response. Moreover the tags can be set as function.</​note>​
 +
  
 All the elements in the XML reader will be explained as examples rather than as strong description. All the elements in the XML reader will be explained as examples rather than as strong description.
Line 142: Line 145:
 The next element is the  The next element is the 
   * row element.   * row element.
-This describes the information for particular row. Note that row must be a child of the root element. Here, if the xml looks like this,+This describes the information for particular row. Note that row must be a child of the root element. Here, if the XML looks like this,
 <code xml> <code xml>
 ...  ... 
Line 262: Line 265:
   * id   * id
    
-element. If repeatitems is set to true and **key** option in [[wiki:​colmodel_options | colModel]] is set to false the id, if present in xml data, must be a attribute of the row element. Lets look at the example:+element. If repeatitems is set to true and **key** option in [[wiki:​colmodel_options | colModel]] is set to false the id, if present in XML data, must be a attribute of the row element. Lets look at the example:
  
 <code xml> <code xml>
Line 304: Line 307:
 </​code>​ </​code>​
  
-Let's suppose that the structure of the xml document returned from the server has the following format:+Let's suppose that the structure of the XML document returned from the server has the following format:
  
 <code xml> <code xml>
Line 403: Line 406:
  
 ==== XML String ==== ==== XML String ====
-The xmlstring option has similar features to the xml option (See above). The only difference is that the data is passed as string. In this case we need to have a valid xml data string. To do that we can use a [[:​wiki:​options| datastr]] option. The example from our tutorial can look like this.+The xmlstring option has similar features to the XML option (See above). The only difference is that the data is passed as string. In this case we need to have a valid XML data string. To do that we can use a [[:​wiki:​options| datastr]] option. The example from our tutorial can look like this.
  
-<​note>​If you use an xml string to obtain the data - after the data is retrieved the //​datatype//​ option automatically is set to local - i.e. (currently) the paging will not work!</​note>​+<​note>​If you use an XML string to obtain the data - after the data is retrieved the //​datatype//​ option automatically is set to local - i.e. (currently) the paging will not work!</​note>​
  
 <code javascript>​ <code javascript>​
Line 448: Line 451:
  
 ==== XML Notes and Limitations ==== ==== XML Notes and Limitations ====
-  * Attributes in any xml tag can not be used to obtain the data. The only exception is the id+  * <del>Attributes in any XML tag can not be used to obtain the data. The only exception is the id</​del>​
   * When the option repeatitems in xmlReader is set to true the number of columns defined in ColModel should be equal of the number of cells  in the row element   * When the option repeatitems in xmlReader is set to true the number of columns defined in ColModel should be equal of the number of cells  in the row element
   * When the option repeatitems in xmlReader is set to true the id of the row can be set using the [[:​wiki:​colmodel_options |key option ]] in colModel   * When the option repeatitems in xmlReader is set to true the id of the row can be set using the [[:​wiki:​colmodel_options |key option ]] in colModel
Line 459: Line 462:
 <note important>​As of version 3.6.5 the returned JSON string should a valid JSON string.\\ For more information refer [[http://​json.org/​ | HERE]] and [[http://​www.json.org/​js.html | HERE]] </​note>​ <note important>​As of version 3.6.5 the returned JSON string should a valid JSON string.\\ For more information refer [[http://​json.org/​ | HERE]] and [[http://​www.json.org/​js.html | HERE]] </​note>​
  
-JSON data is handled in a fashion very similar to that of xml data. What is important is that the definition of the jsonReader matches the data being received+JSON data is handled in a fashion very similar to that of XML data. What is important is that the definition of the jsonReader matches the data being received
  
 **[[:​wiki:​options | datatype ]] : json or jsonp, (or jsonstring)** **[[:​wiki:​options | datatype ]] : json or jsonp, (or jsonstring)**
Line 486: Line 489:
 </​code>​ </​code>​
  
-If the parameter datatype is '​json',​ jqGrid expects the following default format for json data.+If the parameter datatype is '​json',​ jqGrid expects the following default format for JSON data.
  
 <code javascript>​ <code javascript>​
Line 654: Line 657:
   "​totalrecords"​ : "​zzz",​   "​totalrecords"​ : "​zzz",​
   "​invdata"​ : [   "​invdata"​ : [
-    ​{"​1","​cell11",​ "​cell12",​ "​cell13"​}+    ​["​1",​ "​cell11",​ "​cell12",​ "​cell13"​]
-    ​{"​2"​,,"​cell21",​ "​cell22",​ "​cell23"​},+    ​["​2",​ "​cell21",​ "​cell22",​ "​cell23"​],
       ...       ...
   ]   ]
Line 710: Line 713:
  
 ==== JSON String ==== ==== JSON String ====
-The jsonstring option has the same features as json. The only difference is that the data is passed as string. In this case we need to have a valid json data string. To do that we can use a datastr option. See the [[:​wiki:​retrieving_data#​xml_string |xmlstring ]]example. ​+The jsonstring option has the same features as json. The only difference is that the data is passed as string. In this case we need to have a valid JSON data string. To do that we can use a datastr option. See the [[:​wiki:​retrieving_data#​xml_string |xmlstring ]]example. ​
  
 <​note>​If you use a jsonstring to obtain the data - after the data is retrieved the datatype option automatically is set to local - i.e. (currently) the paging will not work!</​note>​ <​note>​If you use a jsonstring to obtain the data - after the data is retrieved the datatype option automatically is set to local - i.e. (currently) the paging will not work!</​note>​
  
 ==== JSON dot notation ==== ==== JSON dot notation ====
-When using json data with named values (i.e the repeatitems option is false) we can use so named dot notation and index notation.+When using JSON data with named values (i.e the repeatitems option is false) we can use so named dot notation and index notation.
  
 For example, our colModel definition might be as follows: For example, our colModel definition might be as follows:
Line 754: Line 757:
 </​code>​ </​code>​
 ==== jsonReader as Function ==== ==== jsonReader as Function ====
-In certain situation you will obtain the data from a Web Service. In this case it is not possible to configure all the properties of the response so that the grid will work properly. As of version 3.6.4 it is possible to define the elements of the jsonReader as function. Below is a example on how this can be used: \\+In certain situation you will obtain the data from a web service. In this case it is not possible to configure all the properties of the response so that the grid will work properly. As of version 3.6.4 it is possible to define the elements of the jsonReader as function. Below is a example on how this can be used: \\
  
 <code javascript>​ <code javascript>​
Line 776: Line 779:
 Related methods : getRowData, delRowData, setRowData, addRowData, updateGridRows ​ See [[Methods]]\\ Related methods : getRowData, delRowData, setRowData, addRowData, updateGridRows ​ See [[Methods]]\\
  
-As of version 3.7 we introduce two additional parameters **data** and **localReader**. The data parameter is described in grid options.+As of version 3.7 we introduce two additional parameters **data** and **localReader**. The data parameter is described in grid [[ options ​| options]].
 The localReader has the same sense as jsonReader described above, but applied to array data that is stored locally. \\ The localReader has the same sense as jsonReader described above, but applied to array data that is stored locally. \\
 The initial configuration of the localReader is the same as those from jsonReader The initial configuration of the localReader is the same as those from jsonReader
  
 <code javascript>​ <code javascript>​
-ts.p.localReader = {+localReader = {
    root: "​rows",​    root: "​rows",​
    page: "​page",​    page: "​page",​
Line 837: Line 840:
 int - the data is interpreted as integer, \\  int - the data is interpreted as integer, \\ 
 float - the data is interpreted as decimal number \\  float - the data is interpreted as decimal number \\ 
-date - the data is interpreted as data \\ +date - the data is interpreted as date \\ 
 text - the data is interpreted as text \\ text - the data is interpreted as text \\
  
Line 862: Line 865:
 </​script>​ </​script>​
 </​code>​ </​code>​
-With this line we have added our first row. It is important to note that the order of the name-value pairs is arbitrary. Moreover, we can set a single name-value pair Like this. +With this line we have added our first row. It is important to note that the order of the name-value pairs is arbitrary. Moreover, we can set a single name-value pair, like this. 
 <code javascript>​ <code javascript>​
 <​script>​ <​script>​
Line 871: Line 874:
 </​code>​ </​code>​
  
-with this line we have added second row with only a value in the amount column. ​ \\ +With this line we have added second row with only a value in the amount column. ​ \\ 
  
 To get data from the particular row we should use getRowData method: To get data from the particular row we should use getRowData method:
Line 915: Line 918:
  
 ==== Function ==== ==== Function ====
-This option does not really define the datatype at all, but rather how to handle the data that is provided by the server (which would still come as either xml or json data). The functions defined as a Datatype should (or can) call addXMLData, addJSONData or addRowData once the data has been received. \\ +This option does not really define the datatype at all, but rather how to handle the data that is provided by the server (which would still come as either xml or json data). The functions defined as a Datatype should (or can) call addXMLData, addJSONData or addRowData once the data has been received. If you use a pager, it is useful to call your_grid.setGridParam({lastpage:​ your_number}) to specify the number of pages. \\ 
 Calling Convention: Calling Convention:
 <code javascript>​ <code javascript>​
Line 966: Line 969:
  
 ==== User Data ==== ==== User Data ====
-In some cases we need to have custom data returned from the request that is not automatically displayed by jqGrid, that we use either in a later process or to display additional information somewhere in the html page or associated with the grid. To do that a userdata tag can be used.+In some cases we need to have custom data returned from the request that is not automatically displayed by jqGrid, that we use either in a later process or to display additional information somewhere in the HTML page or associated with the grid. To do that a userdata tag can be used.
  
-in xmlReader this is defined as :+In xmlReader this is defined as:
 <code javascript>​ <code javascript>​
 xmlReader: { xmlReader: {
Line 976: Line 979:
 } }
 </​code>​ </​code>​
-This describes the tag where our custom data is. The important part here is that the xml tag should have a attribute //name// in order to associate data. \\ +This describes the tag where our custom data is. The important part here is that the XML tag should have a attribute //name// in order to associate data. \\ 
 In the data received from the server, this could be structured as follows In the data received from the server, this could be structured as follows
 <code xml> <code xml>
Line 1023: Line 1026:
 userData = {totalinvoice:​240.00,​ tax:40.00} userData = {totalinvoice:​240.00,​ tax:40.00}
 </​code>​ </​code>​
-The data can be accessed ​two ways.+The data can be accessed ​using a getGridParam methodTo do that we need to request this data: \\
  
-1. Using a getGridParam method. To do that we need to request this data: \\ +<code javascript>​jQuery("​grid_id"​).jqGrid('​getGridParam', ​'​userData'​)</​code>​
-<code javascript>​jQuery("​grid_id"​).getGridParam('​userData'​)</​code>​+
  
-2. Using the user contributed ​ [[Post Data Module]] \\  +and using the old API (not preferr
-<code javascript>​jQuery("​grid_id"​).getUserData()</​code>​ +<code javascript>​jQuery("​grid_id"​).getGridParam('​userData'​)</​code>​
-to get the entry array or +
-<code javascript>​jQuery("​grid_id"​).getUserDataItemkey )</​code>​ +
-to get particular value with name = key+
  

QR Code
QR Code wiki:retrieving_data (generated for current page)