Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>In my tests <a href="http://www.ok-soft-gmbh.com/jqGrid/DynamicColumnBinding.htm" rel="noreferrer">your code</a> worked. Nevertheless, because the subject of your question is interesting for many jqGrid users, I deceide to write you some small errors and optimization in your code and JSON data.</p> <p>The first and the most important problem is with the ids of items. The setting <code>id:"0"</code> inside of <code>jsonReader</code> is wrong. It can be used only if the items of data are array and not objects with named properties (<code>repeatitems:false</code>). Currently as ids of rows will be used integers 1,2,... I strictly recommend you include id information in the items of <code>rootVar</code> of JSON data.</p> <p>Next problem. The property <code>"title": "03-01-11"</code> is wrong. The <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options" rel="noreferrer">"title"</a> property of <code>colModel</code> is <em>boolean</em>, so it should be changed to <code>"title": true</code>. Close problem: the property <code>resizable</code> you use as <code>resizeable</code> which is probably more correct in the English, but it will be ignored by jqGrid. </p> <p>Now small optimizations:</p> <ol> <li>You can change from <code>datatype:'jsonstring', datastr:colD</code> to <code>datatype: 'local', data: colD.rootVar</code></li> <li>Add <code>gridview: true</code> parameter.</li> <li>The setting <code>url: 'SomeUrl/Getdata'</code>, and <code>mtype: 'POST'</code>, will be ignored in case of <code>datatype:'jsonstring'</code> or <code>datatype:'local'</code>. So you should just remove the parameters of jqGrid.</li> <li>Because <code>jsonmap</code> will not used in your data model I suggest you to removed it from the JSON data.</li> <li>It seems to me better to use additional <code>label</code> property of the <code>colModel</code>. In the case you will no more need <code>colNames</code> (<code>columnNames</code> inside your data).</li> </ol> <p>The original your demo you can see <a href="http://www.ok-soft-gmbh.com/jqGrid/DynamicColumnBinding.htm" rel="noreferrer">here</a> (I made only the changes of <code>type</code> to `type:"GET" beacuse I have no active server components and saved the JSON as a text file). The same demo after the modifications which I suggested is <a href="http://www.ok-soft-gmbh.com/jqGrid/DynamicColumnBinding1.htm" rel="noreferrer">here</a>.</p> <p>The main restriction of the way is that all data will be <strong>local</strong>. So you can use local sorting, filtering and paging, but if you do want have server side sorting, filtering and paging than you have to include more additional code in your jqGrid.</p> <p>The resulting code which I suggest you is:</p> <pre><code>$(document).ready(function () { $.ajax({ type: "GET", url: "DynamicColumnBinding1.txt", dataType: "json", success: function(result){ var colD = result.couponStripList, colM = result.colModelList; $("#dataGrid").jqGrid({ datatype: 'local', data: colD.rootVar, gridview: true, colModel :colM, height: "auto", loadComplete: function(data){ alert('loaded'); }, loadError: function(xhr,status,error){ alert('error'); } }); }, error: function(x, e){ alert(x.readyState + " "+ x.status +" "+ e.msg); } }); }); </code></pre> <p>the corresponding JSON data could be for example following</p> <pre><code>{ "colModelList": [ { "index": "prceCM", "label": "CM", "name": "prceCM", "width": 100 }, { "index": "prceCMPlusOne", "label": "CM + 1", "name": "prceCMPlusOne", "width": 100 }, { "index": "prceCMPlusTwo", "label": "CM + 2", "name": "prceCMPlusTwo", "width": 100 }, { "index": "prceCMPlusThree", "label": "CM + 3", "name": "prceCMPlusThree", "width": 100 }, { "index": "coupon", "label": "Coupon", "name": "coupon", "align": "right", "sorttype": "number", "formatter": "number", "formatoptions": { "thousandsSeparator": "," }, "width": 100 } ], "columnNames": [ "prceCM", "prceCMPlusOne", "prceCMPlusTwo", "prceCMPlusThree", "coupon" ], "couponStripList": { "rootVar": [ { "id": 71, "coupon": 5.0, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" }, { "id": 72, "coupon": 5.5, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" }, { "id": 73, "coupon": 6.0, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" }, { "id": 74, "coupon": 6.5, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" }, { "id": 75, "coupon": 7.0, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" } ] }, "deliveredDataTimestamp": null, "requestedTimestamp": null } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POProblem showing jqgrid with dynamic column binding
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USOleg
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POProblem showing jqgrid with dynamic column binding
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThanks Oleg. Saved my time. Started on jquery and jqgrid a few days ago, still learnig. As for the question, I meant to use lable not title, thanks for the detailed answer.
      singulars
      1. PO
      1. USsilpa
    2. CO@silpa: You are welcome!
      singulars
      1. PO
      1. USOleg
    3. CO@Oleg & @Silpa: My jqgrid definition is the same as yours. My JSON is a little bit different. I'm having a hard time using `jsonmap` to map `cells` to each column. Please take a look - http://stackoverflow.com/questions/8618691/jqgrid-how-to-map-cell-data-to-column-model-if-column-model-is-in-json-respons
      singulars
      1. PO
      1. UStechlead
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload