jquery - Why does the configured dropdown box not appear within the jqgrid cell? -
question: why dropdown box not appear within cell, below (i.e., column "value2"). cell blank. (the other cells displaying correct values)
to "untrained" eye seems using the correct technique, shown in jqgrid demo.
--but, unfortunately, no dropdown box appears in column. (i.e., please see column "value2", in jqgrid configuration, below).
what part of jqgrid table configuration preventing dropdown widget appearing in cell?
note: modeled row definition after shown in "input types" demo.... i.e.,
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"fe:fedex;in:intime;tn:tnt;ar:aramex"}}, thank help!!
s
update:
here how i'm handling checkbox (below). hoping handle dropdown similarly...(snippet follows)
$("#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 > tbody > tr > td > 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); } }); }); here jqgrid configuration:
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 }); update#2:
here recent "working" rendition of jqgrid. problem has occurs when user clicks "submit" button. apparently, last dropdown edit made user, leaves row in "edit" mode... therefore, value not include in post server...
below, "working" code (thanks aj , oleg)...
<?xml version='1.0' encoding='utf-8' ?> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>abctest</title> <link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.2.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> <script src="js/jquery-1.9.1.js" type="text/javascript"></script> <script src="js/jquery-ui-1.10.2.custom.js" type="text/javascript"></script> <script src="js/jquery.jqgrid.min.js" type="text/javascript"></script> <script src="js/grid.locale-en.js" type="text/javascript"></script> <script src="js/jquery.json-2.4.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> /* <![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; } /* ]]> */ </script> </head> <body> <form id="form1"> <div> <div> <input type="submit" id="submit" value="submit grid edits" /> </div> <div> <table id="abcgrid"></table> <div id="pager" ></div> </div> </div> </form> </body> </html>
oleg right. created short fiddle using of code (except loads data locally), set editing mode, , works fine. might want work backward version loads locally version loads json, you're not going normal behavior unless set cellsubmit or editurl values @ least.
code below:
<table id="thegrid"></table> <div id="thegridpager" style="text-align: center"></div> $("#thegrid").jqgrid({ datatype: 'local', pager: $("#thegridpager"), viewrecords: true, sortname: 'value1', sortorder: 'desc', cellsubmit: 'clientarray', editurl: 'clientarray', celledit: true, caption: 'the grid', 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" } } ] }); var griddata = [ { value0: 'value0 - 1', value1: '1', value2: 'aaa'}, { value0: 'value0 - 2', value1: '2', value2: 'bbb'}, { value0: 'value0 - 3', value1: '3', value2: 'ccc'} ]; (var = 0; < griddata.length; i++) { $("#thegrid").jqgrid('addrowdata', griddata[i].value0, griddata[i]); }
Comments
Post a Comment