Databases
StackOverflow2013
Postsdbo
POWhy does the configured dropdown box not appear within the jqgrid cell?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does the configured dropdown box not appear within the jqgrid cell?
    primarykey
    data
    text
    <p>QUESTION: Why does the dropdown box not appear within the cell, below (i.e., column "value2"). The cell is blank. (the other cells are properly displaying correct values)</p> <p>To my "untrained" eye it seems that I am using the the correct technique, as shown in the jqgrid demo.<br> --But, unfortunately, no dropdown box appears in the column. (i.e., please see column "value2", in my jqgrid configuration, below).</p> <p>What part of the jqgrid table configuration is preventing the dropdown widget from appearing in the cell?</p> <p>Note: I modeled the row definition after that shown in the "Input Types" demo.... i.e., </p> <pre><code> {name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}}, </code></pre> <p>Thank you for any help!!</p> <p>s</p> <hr> <h1>UPDATE:</h1> <p>Here is how I'm handling checkbox (below). I was hoping to handle a dropdown similarly...(snippet follows)</p> <pre><code> $("#xyzgrid").jqGrid({ . . . colModel: [ { name: 'valw', label: 'valw', index: 'valw', width: 50, formatter: 'checkbox', editable:true, edittype:"checkbox", editoptions: {value: 'true:false'}, formatoptions: {disabled:false}}, ], . . . }); $("#xyzgrid &gt; tbody &gt; tr &gt; td &gt; input[type=checkbox]") { $(this).change( function(e){ var t = $(e.target); var row = t.closest("tbody").children().index(t.closest("tr")); //...row index... var rowids = $('#xyzgrid').jqGrid('getDataIDs'); //a zero-based array containing rowids of visible rows... var rowid = rowids[row-1]; var rowdata = $("#xyzgrid").getRowData(rowid); $("#xyzgrid").jqGrid('setRowData', rowid, rowdata); }); }; $("#submit").click(function() { var gridData1 = $("#xyzgrid").jqGrid('getGridParam', 'data'); var gridData1String = JSON.stringify(gridData1); $.ajax({ type: "POST", url: suburl1, data: "gridData1String=" + gridData1String, dataType: "text", async: true, success: function() { alert("Submitted"); }, error: function(xhr, ajaxOptions, thrownError) { alert("xhr status=" + xhr.status); alert("thrownError=" + thrownError); } }); }); </code></pre> <hr> <h1>Here is my JQGrid configuration:</h1> <pre><code> var geturl1 = 'data/getGridData1'; $("#abcgrid").jqGrid({ url: geturl1, mtype: 'POST', datatype: "json", jsonReader: { root: "data", page: "pageNo", total: "pages", records: "rows", repeatitems: false, cell: "", id: "value0" }, colNames: ['value0', 'value1', 'value2'], colModel: [ {name: 'value0', index: 'value0', width: 100}, {name: 'value1', index: 'value1', width: 100}, { name: 'value2', index: 'value2', width: 100, editable: true, edittype:"select", editoptions: {value:"AAA:AAA;BBB:BBB;CCC:CCC"} } ], rowNum:5, rowList:[10,20,30], pager: '#pager', sortname: 'value1', viewrecords: true, sortorder: "desc", caption:"abctest grid...", rownumbers: true, loadonce: true }); </code></pre> <h1>UPDATE#2:</h1> <p>Here is the most recent "working" rendition of my jqgrid. The only problem it has occurs when the user clicks the "submit" button. Apparently, the last dropdown edit made by the user, leaves the row in "edit" mode... Therefore, this value is not include in the post to the server...</p> <p><em><strong>Below, is the "working" code (thanks to AJ and Oleg)...</em></strong></p> <pre><code> &lt;?xml version='1.0' encoding='UTF-8' ?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;abctest&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.2.custom.css" /&gt; &lt;link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /&gt; &lt;script src="js/jquery-1.9.1.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/jquery-ui-1.10.2.custom.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/jquery.json-2.4.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/jquery.validate.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; /* &lt;![CDATA[ */ $(document).ready(function() { var grid = $("#abcgrid").jqGrid({ url: 'data/getGridData1', mtype: 'POST', datatype: "json", cellsubmit: 'clientArray', editurl: 'clientArray', cellEdit: true, jsonReader: { root: "data", page: "pageNo", total: "pages", records: "rows", repeatitems: false, cell: "", id: "value0" }, colNames: ['value0', 'value1', 'value2'], colModel: [ { name: 'value0', index: 'value0', width: 100 }, { name: 'value1', index: 'value1', width: 100 }, { name: 'value2', index: 'value2', width: 100, stype: 'select', formatter: 'select', editable: true, edittype: "select", editoptions: {value: "AAA:AAA;BBB:BBB;CCC:CCC"} } ], rowNum: 5, rowList: [10, 20, 30], pager: '#pager', sortname: 'value1', viewrecords: true, sortorder: "desc", caption: "abctest grid...", rownumbers: true, loadonce: true }); $("#submit").click(function() { var gridData1 = $("#abcgrid").jqGrid('getGridParam', 'data'); var gridData1String = JSON.stringify(gridData1); alert("gridData1String=" + gridData1String); $.ajax({ type: "POST", url: 'data/postGridData1', data: "gridData1String=" + gridData1String, dataType: "text", async: true, success: function() { reloadgrid($("#abcgrid")); alert("Submitted"); }, error: function(xhr, ajaxOptions, thrownError) { alert("xhr status=" + xhr.status); alert("thrownError=" + thrownError); } }); }); }); function reloadgrid(grid) { grid.jqGrid('setGridParam', {loadonce: false, datatype: 'json'}).trigger('reloadGrid', [{page: 1}]); grid.jqGrid('setGridParam', {loadonce: true}); return false; } /* ]]&gt; */ &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form1"&gt; &lt;div&gt; &lt;div&gt; &lt;input type="submit" id="submit" value="Submit Grid Edits" /&gt; &lt;/div&gt; &lt;div&gt; &lt;table id="abcgrid"&gt;&lt;/table&gt; &lt;div id="pager" &gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsairn
    1. USsairn
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhy does the configured dropdown box not appear within the jqgrid cell?
      1. USsairn
      1. VTFavorite
    1. COWhich editing mode you use? The code which you posted don't contains editing of grid. You configured that *during editing* the cells from the column `'value1'` should be displayed as `<select>`, but it will be only after the editing will be started.
      singulars
      1. POWhy does the configured dropdown box not appear within the jqgrid cell?
      1. USOleg
    2. COHi Oleg - I added an update to show a sample of how I'm handling a checkbox. I wanted to handle a dropdown similarly - if possible. Thx s
      singulars
      1. POWhy does the configured dropdown box not appear within the jqgrid cell?
      1. USsairn
 

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