jqGrid: Form isn't showing checkbox values - jqgrid

I have the following call to load a grid:
$("#searchlist").jqGrid({
url:'./searchlibrary',
datatype: 'json',
mtype: 'POST',
postData: {
type: function(){return $('select[name="searchtype"]').val();},
criteria: function(){return getSearchData();}
},
colNames:['Resource Name','Unit', 'Topic','Document Type','Content Type','Select'],
colModel :[
{name:'resourceName', index:'resourceName', width:380, align:'left'},
{name:'unit', index:'unitID', width:40, align:'center',sortable:true,
sorttype:'text'},
{name:'topic', index:'topicID', width:220, align:'center',sortable:true},
{name:'docType', index:'docTypeID', width:97, align:'center',
sortable:true},
{name:'contentType', index:'contentTypeID', width:97, align:'center',
sortable:true},
{name: 'select', width:55, align: "center", sortable: false, editable: true,
edittype: "checkbox", editoptions: { value:"Yes:No" },
formatter:"checkbox",formatoptions: {disabled : false}}
],
rowNum:20,
sortname: 'resourceName',
sortorder: 'asc',
viewrecords: true,
gridview: true,
width:878,
height:251
});
Notice the last item in the colModel section. Notice the editoptions section. When the grid is loaded it seems to be ignoring this. Checking the element in chrome shows the following code being generated:
<input type="checkbox" value=" " offval="no">
Am I doing something wrong in the declaration?
UPDATE
Here's the JSON returned:
{"total":1,"page":"1","records":"4","rows":[{"id":"1","cell":["Test Resource 1","1","Topic 1","pdf","course","1"]},{"id":"2","cell":["Test Resource 2","1","Topic 1","pdf","course","2"]},{"id":"3","cell":["Test Resource 3","1","Topic 2","mp4","course","3"]},{"id":"4","cell":["Test Resource 4","1","Topic 2","wmv","course","4"]}]}
This still gives me 4 results all checked by default. This is what's in my colModel for select now:
{name: 'select', index:'resourceID', width:55, align: "center", sortable: false, editable: true, edittype: "checkbox", editoptions: { value:"Yes:No", defaultValue:"No" }, formatter:"checkbox",formatoptions: {disabled : false}}
The first generated html for one of the select cells is this:
<input type="checkbox" checked="checked" value="1" offval="no">

If you loads the data in the grid the values for the select column will be filled as the checkbox with respect of the formatter:"checkbox". If the value is "" the default value can be used. So one can use defaultValue of the formatoptions to specify the default value. The HTML fragment
<input type="checkbox" value=" " offval="no">
with " " value shows that you have probably wrong data with the space instead of empty string. If you need to fill the data correctly you need return from the server the data having true, false, 1, 0, yes, no, on or off (the case of all values are not important). See the source code for more details.
So you should one more time verify your data returned from the server. I personally prefer to use 1 and 0 as the input values for checkboxes.

Related

jqGrid Frozen Columns in a Subgrid

I know that frozen columns does not work if Sub-Grid is enabled from http://www.trirand.com/jqgridwiki/doku.php?id=wiki:frozencolumns.
My understanding is that frozen does not work in the parent grid but it should work in the Sub-grid?
But when I try frozen column in sub grid it does not work? Does it mean frozen columns does not work in both the parent and Sub-grid.
If you use subgrid as grid then jqGrid just creates empty <div> in the "subgrid row" where any information can be placed. So you can create for example new grid with any features in the div. You can create grid with frozen columns of cause.
I created the demo for you by modifying the demo from an old answer. The results looks like below
I marked the header of frozen columns using CSS
.ui-jqgrid .frozen-div .ui-th-column { background: #f0dcdd; color: black; }
The code of subgrid is the following
subGrid: true,
subGridRowExpanded: function (subgridId, rowid) {
var $subgrid = $("<table id='" + subgridId + "_t'></table>");
$subgrid.appendTo("#" + subgridId);
$subgrid.jqGrid({
datatype: "local",
data: $(this).jqGrid("getLocalRow", rowid).files,
colNames: ["Name", "Filetype", "col3", "col4"],
colModel: [
{name: "name", width: 130, key: true, frozen: true},
{name: "filetype", width: 130, frozen: true},
{name: "col3", width: 130},
{name: "col4", width: 130}
],
height: "100%",
rowNum: 10,
sortname: "name",
shrinkToFit: false,
autowidth: true,
idPrefix: "s_" + rowid + "_"
}).jqGrid("setFrozenColumns");
}
I use shrinkToFit: false to prevent default shrinking of columns of subgrids together with autowidth: true which set the width of the subgrid.
The code works in jqGrid 3.7 or free jqGrid 3.8 which I published recently (see here and here), but in case of usage more old versions of jqGrid you can need to trigger jqGridAfterGridComplete event (see the answer).

jqgrid - predefined formatter actions - change the default action of edit selected row button

Can we change the default action of the "edit selected row" button?
Here is my code for the grid
jQuery("#detFlex62_1").jqGrid({
url: root + mod + '/detaillistview',
datatype: "clientSide",
colNames:[' ', '<?=lang("users_company_code")?>', '<?=lang("users_company_name")?>', ' ', ' '],
colModel:[
{name:'myac', width:50, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true,delOptions: {reloadAfterSubmit:false},editOptions: {reloadAfterSubmit:false}}},
{name:'company_code',index:'company_code', width:100},
{name:'company_name',index:'company_name', width:100},
{name:'company_id',index:'company_id', width:100,hidden:true},
{name:'company_access_id',index:'company_access_id', width:100,hidden:true}
],
width: $('.body').width()-40,
height: 120,
pager: '#pagerFlex62_1',
sortname: 'user_id',
sortorder: "desc",
editurl: root + mod + '/detailpost',
caption:"<?=lang("users_title")?>",
onSelectRow: function(id){
activedf = "#detFlex62_1";
}
});
jQuery("#detFlex62_1").jqGrid('navGrid','#pagerFlex62_1',{edit:false,del:false,search:false, addfunc: df_add_1});
I know I should put something in the editOptions part of the code. Right now I only put reloadAfterSubmit:false. What is the option to execute our own custom function ?
If you need just calling custom function when you press 'Edit' button in navigation bar, your navgrid should look like this:
jQuery("#detFlex62_1").jqGrid('navGrid', "#mainGridNavi", { edit: true, add: false, del: false, editfunc: function() { alert('test'); }})
Regards.

JQGrid Edittype: 'select' using dataurl returns <select> with <optgroup> not saving select value

I have a JQGrid column with edittype:'Select' using dataUrl to return a list of Accounts with groups for the different Account groups.
My issue: when saving the row no value is passed to the editurl for my Select column. If i remove the 's a value is passed to editurl for my Select column.
Description: For my column data I return the Account Name, not the value, so when the grid loads the name is displayed.
When a line is edited (in-line editing), the dataUrl is called and the select list is displayed and my Account is selected for the rows data.
I then select a new Account from the Select list and press enter to save. The selected Account value is not passed to the editurl function for the column. if i remove the 's from the the Account value is passed to the editurl function.
I'm not sure if I'm doing something wrong, ie not setting a grid parameter,
Hoping you can help me out.
Thanks in advance,
Chris
My Grid code:
$(document).ready(
function () {
var lastSelection;
var grid = jQuery("#BankTransactions");
grid.jqGrid({
url: '/DropDown/GridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['TransactionLineId', 'TransactionId', 'BankTransactionId', 'Number', 'Amount', 'Category'],
colModel: [
{ name: 'transactionLineId', index: 'transactionLineId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
{ name: 'transactionId', index: 'transactionId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
{ name: 'bankTransactionId', index: 'bankTransactionId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
{ name: 'Number', index: 'Number', width: 100, align: 'left', sortable: false },
{ name: 'Amount', index: 'SubAmount', editable: true, width: 100, align: 'right', sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'class="BankTranEdit"' }, formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: ' '} },
{ name: 'CategoryIdURL', index: 'CategoryIdURL',
editable: true,
edittype: 'select',
//formatter: 'select',
editoptions: { dataUrl: "/DropDown/CategorySelectList" },
width: 220,
align: 'left'
},
],
pager: jQuery('#pager'),
rowNum: 100,
rowList: [25, 50, 100],
editurl: "/Dropdown/GridSave",
sortname: 'Number',
sortorder: "desc",
viewrecords: true,
width: 1250,
height: 450,
onCellSelect: function (rowid, iCol, cellContent, e) {
grid.restoreRow(lastSelection);
grid.editRow(rowid, true, null, null, null, null, null);
lastSelection = rowid;
}
});
});
Output of /Dropdown/GridData:
{"total":1,
"page":1,
"records":6,
"rows":[
{"id":165,"cell":["165","249","125","DM000249","1500.00","Sales"]},
{"id":145,"cell":["145","229","105","SM000229","100.00","Rent"]},
{"id":153,"cell":["153","237","113","SM000237","38.07","Bank Fees"]},
{"id":185,"cell":["185","269","145","SM000269","750.00","Cash Discounts"]},
{"id":194,"cell":["194","278","154","SM000278","13.29","Rent"]},
{"id":211,"cell":["211","295","171","SM000295","100.00","Rent"]}]
}
Output of /Dropdown/CategorySelectList
<select>
<optgroup label='Expenses'>
<option value='42'>Accounting Fees</option>
<option value='60'>Bank Fees</option>
<option value='23'>Bank Service Charges</option>
<option value='24'>Books and Publications</option>
<option value='25'>Cash Discounts</option>
<option value='43'>Rent</option>
</optgroup>
<optgroup label='Income'>
<option value='19'>Sales</option>
<option value='20'>Services</option>
<option value='21'>Interest Income</option>
<option value='22'>Other Income</option>
</optgroup>
</select>
The current version of jqGrid don't works with <optgroup> inside of <select>.
I find that the usage of <optgroup> could be helpful in some cases. So I debugged the jqGrid code a little and found out that one need to change only two lines of code of jqGrid (the lines 143-144 of the grid.inlinedit.js or the lines 8262-8263 of the jquery.jqGrid.src.js from jqGrid 4.1.1) from
tmp[nm] = $("select>option:selected",this).val();
tmp2[nm] = $("select>option:selected", this).text();
to
tmp[nm] = $("select>option:selected,select>optgroup>option:selected",this).val();
tmp2[nm] = $("select>option:selected,select>optgroup>option:selected",this).text();
or just to
tmp[nm] = $("select option:selected",this).val();
tmp2[nm] = $("select option:selected",this).text();
to fix the problem.
If one need have support of selects having multiple: true attribute:
one should modify in the same way as above one more line (line 149) of the grid.inlinedit.js having the "select>option:selected". To make jqGrid with multiple: true attribute working with dataUrl property one have to fix one more line (the line 67) of the grid.inlinedit.js. One need change
if(cm[i].edittype == "select" && cm[i].editoptions.multiple===true && $.browser.msie){
$(elc).width($(elc).width());
}
to for example the following
if(cm[i].edittype === "select" && typeof(cm[i].editoptions)!=="undefined" &&
cm[i].editoptions.multiple===true &&
typeof(cm[i].editoptions.dataUrl)==="undefined" && $.browser.msie) {
$(elc).width($(elc).width());
}
This change will prevent setting of the very small width of the select before it is loaded by the $.ajax request from dataUrl. Probably one should place the same fix of the width inside of success event handler of the corresponding $.ajax call from grid.common.js where the data for dataUrl will be loaded. I tested my demos in IE9 and it is not needed to make the fix for IE9.
You can see the demos with the fixed jqGrid code here: the single select demo, the multiselect demo. You should take in the consideration, that there are no code for the "/Dropdown/GridSave" on the server which will be used in the editurl. Nevertheless you will see in Fiddeler of Firebug that the posted data, which will be send to the server, do contain the information about the selected item. If you want make the demo working locally you should modify the editurl to 'clientArray' and probably set additionally loadonce:true.

jqGrid and Firefox autocomplete conflict

I have a jqGrid constructed as it follows in the code below:
function radio(value, options, rowObject){
var radio = '<input type="radio" value=' + value + ' name="radioid" />';
return radio;
}
function reloadOnEnter(){
jQuery(':input[name=field1]').keyup(function(e){
if(e.keyCode == 13){
var fieldValue = jQuery(':input[name=field1]').attr('value');
jQuery(':input[name=field1]').attr('value', fieldValue);
jQuery("#listTable").jqGrid().trigger("reloadGrid");
}
});
}
jQuery(function(){
jQuery("#listTable").jqGrid({
url: '$content.getURI("myURI")' + '?userId=$userId&pageNo=0&locale=' + '$locale',
datatype: 'json',
mtype: 'POST',
colNames:['column1', 'column2', 'column3', 'column4', 'column5'],
colModel :[
{name:'name', index:'field', width:'8%', search:false, align:'center', formatter: radio, editable:false, sortable: false, resizable:false},
{name:'name1', index:'field1', width:'23%', sortable: false, resizable:false},
{name:'name2', index:'field2', width:'23%', sortable: false, resizable:false},
{name:'name3', index:'field3', width:'23%', sortable: false, resizable:false},
{name:'name4', index:'field4', width:'23%', sortable: false, resizable:false}
],
width:'768',
height: 500,
pager: '#pagerDiv',
gridview: true,
rowNum: $rowNr,
rowTotal: 500,
sortorder: 'desc',
viewrecords: true,
loadComplete: loadCompleteHandler,
ignoreCase: true
});
});
jQuery(function(){
jQuery("#listTable").jqGrid('filterToolbar',{
stringResult: true,
searchOnEnter: false });
});
I start typing 'he' and the autocomplete window shows me 'hello' (because I previously typed hello). I select 'hello' and hit enter, and still 'he' is submitted in the ajax request.
My reloadOnEnter function is called by the loadCompleteHandler. The interesting thing is that when I query the search field (field1) value is the selected value, but only the typed value is being sent in the request. I would like to send the selected value. How can i achieve this?
EDIT:
The loadCompleteHandler looks like this:
function loadCompleteHandler(){
reloadOnEnter();
jQuery("#listTable").jqGrid('setGridHeight', Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
}
(I use Apache Velocity as a template engine! That is why I have variables like $variable in the javascript code!)
To your main question: you should use jQuery.val function instead of jQuery.attr('value').
Many other things in your code seams me strange or unclear. It is not clear for me how you use reloadOnEnter in the loadCompleteHandler. If would be good if you include the corresponding code fragment. The value for the url seems me also very strange. You use additionally searchOnEnter: false option of filterToolbar but in the reloadOnEnter you wait for the 'Enter' key. Inside of the body of if(e.keyCode == 13) you get jQuery(':input[name=field1]').attr('value') and then set the same value back. Why?
Probably you could describe in the text of your question a little more what you want to archive with the code?

Fill jqgrid with data from visualforce page

I have a visualforce page and I am using jqgrid to display data on this page. The url that the jqgrid points to is a visualforce page(https://test.visual.force.com/apex/GridResults) which outputs only JSON data. This page does not have any header or html information.
The problem is that when I run this page, the grid renders with column names but no data.
When I run the url it outputs JSON data. I have pasted below the code.
jQuery("#list").jqGrid({
url:"https://test.visual.force.com/apex/GridResults",
datatype: "json",
colNames: [{!fieldNames}], -- property in controller which outputs fieldnames
colModel: [{!colModel}], -- property in controller which outputs column definition
rowNum: 10,
rowTotal:10,
rowList: [20, 40, 60],
loadonce:true,
mtype:"GET",
gridView:true,
pager: '#pager',
sortname: 'Record ID',
sortorder: "desc",
width: 1200,
height: 400,
caption: "Accounts"
});
jQuery("#list").jqGrid('navGrid', "#pager", { edit: true, add: true, del: false })
};
Any ideas on why the data from the page is not consumed by the jqgrid? Help much appreciated.
Have you look into Visualforce remoting?

Resources