I have a Jqgrid, and I am trying to show some fields on the grid, but when I Form Editing it, and show all Fields, which is having more columns than showing on the Grid.
For Example: I have a Document table, which have ID, Name,Size, Description, Date
on the Grid I only show ID, Name, and Size
when user click on the Edit, which is Form Editing, then let the users Edit all the Columns.
How can I do it?
well first you gotta put some code here, from what i can understand here, you have a grid with lets say 5 columns and when you want to go with form editing then you want to edit and show only 3 columns, right? so what you need to do, put editable:false with your colModal
for example
{ name: 'Id', index: 'Id', align: 'right', editable: false, hidden: true}
this will hide the Id column in grid and if you try to go for form editing Id will not be editable and it will not be there in edit form dialogue..
In a column a of a grid panel I use a combobox as editor and a renderer to display values :
editor: {
xtype: 'combobox',
alias: 'bienTypeCombobox',
store: 'BienTypesStore',
valueField: 'id_bien_type',
displayField: 'nom',
autoHeight: true,
editable: false,
autoSelect: true,
allowBlank: false
},
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
var display = '';
Ext.data.StoreManager.get("BienTypesStore").each(
function (rec) {
if (rec.get('id_bien_type') === value) {
display = rec.get('nom');
return false;
}
});
return display;
}
So, when the cells are edited the combo box is displayed and when the cells are not edited the displayField of this combo box is displayed.
My problem is that for now,, when I click on the header of this column, the rows are sorted by the valueField of the combo box.
I would like to make the user able to sort this column by the displayedField of the combo box.
Please help, thanks
I don't think there is easy solution for this. The only one way I can think of is the following:
Create a virtual field in your model (with display field basically). Create convert function for this virtual field, so when it's set real value field is get updated.
Use this virtual field in the grid without additional rendered
Use editor for this field with both valueField and displayField pointing to this field.
While both autocomplete and select in jqgrid editform place the selected label into the cell, select will place the value (id) in the postdata array where autocomplete will place the label into the postdata array.
is there a way to get the editoption's autocomplete to post the item value (id) instead of the label?
here is the jqgrid code segment i'm using autocomplete in...
$('#tab3-grid').jqGrid({
colNames:['Workorder', 'wo.CUID',.....],
colModel:[
.
.
.
{name:'wo.CUID', index:'cu.LastName', width:120, fixed:true, align:'center', sortable:true, editable:true, edittype:'text',
editoptions:{dataInit:function(el){$(el).autocomplete({ source: 'php/customer-ac-script.php'
, minLength: 1
})
}
},
formoptions:{rowpos: 1, label:'Customer', elmprefix:'* '},
editrules:{required:true}
},
.
.
.
$('#tab3-grid').jqGrid('navGrid', '#tab3-pager',
{view:true, closeOnEscape:true, cloneToTop:true}, // general parameters that apply to all navigation options below.
{jqModal:true, navkeys:[true,38,40], savekey:[true,13]}, // edit options.
{jqModal:true, navkeys:[true,38,40], savekey:[true,13], reloadAfterSubmit:false, afterSubmit: addRecordID}, // add options.
{jqModal:true, afterSubmit: serverMessage}, // del options.
{jqModal:true}, // search options.
{jqModal:true, navkeys:[true,38,40]} // view options.
);
The php code segment:
// construct autocomplete select.
$i = 0;
while($row = mysql_fetch_assoc($result)) {
$output[$i][$crudConfig['id']] = $row['CUID'];
$output[$i][$crudConfig['value']] = $row['LastName'];
logMsg(__LINE__,'I','cu.CUID: '.$row['CUID'].', cu.LastName: '.$row['LastName']);
$i++;
}
// encode to json format and send output back to jqGrid table.
echo json_encode($output);
logMsg(__LINE__,'I','Send json output back to jqGrid table: '.json_encode($output));
Would it be as simple as calling a function under the autocomplete select event or the grid before or after editform submit?
Also, i noticed this note in the jqgrid doc's for datainit: that says...
Note: Some plugins require the position of the element in the DOM and
since this event is raised before inserting the element into the DOM
you can use a setTimeout function to accomplish the desired action.
Would the lack of including the settimeout function be causing the problem?
The server code which provide the JSON response on the autocomplete request has id and value properties. On the other side the standard behavior of jQuery UI Autocomplete is to use label and value properties (see "Datamodel" in the documentation). The value of label property (if any exist) will be used to display in the contextmenu. The value of value property will be placed in the <input> field after the user choose the item from the contextmenu. The value of label property can has HTML markup, but the value of value property must be the text.
So I see the problem as pure problem of the usage of jQuery UI Autocomplete independent on jqGrid. If I understand correct your question you can solve your problem by modification your server side code.
Oleg's answer clarifying the data model for jquery UI's autocomplete, has allowed me to move forward and understand that autocomplete has nothing to do with constructing and sending the postdata array to the server, jqgrid's editform handles it. With that knowledge, i was able to answer my original question and successfully integrate autocomplete into jqgrid. So, in the interest of sharing, i'd like to show you all my motivation and solution.
By default, selecting a label from the autocomplete list put's the value of the selected label/value pair into the text box. All the editform cares about when you submit is what's in the edit fields. So when you submit the editform, the cell's postdata element value will again contain the value of the autocomplete text box. But what if while wanting to post the value of the label/value pair, you want the label of the label/value pair displayed in the text box? You have a problem! How do you get the value of the label/value pair posted to the server?
Well, after spending a few days on it, it turns out to be quite simply. While i'm sure there is more than one solution, here is mine:
add a hidden id column in the grid
define the select: and focus: events in the autocomplete function
in the select: function; insert the selected label into the text box (optional), disable the default behavior of autocomplete, then set the cell of the hidden column to the value of the selected label/value pair
in the focus: function; insert the selected label into the text box(optional), disable the default behavior of autocomplete
add an "onclickSubmit:" event to the navgrid edit options with function name something like "fixpostdata"
in the "fixpostdata" function; get the cell value of the hidden column and insert it into the postdata element associated with the cell.
The following are the grid and javascript code segments i used…
grid segments
{name:'wo_CUID', index:'wo_CUID', width: 70, hidden: true},
{name:'wo.CUID', index:'cu.LastName', width:120, sortable:true, editable:true, edittype:'text',
editoptions:{
dataInit:function(el){ // el contains the id of the edit form input text box.
$(el).autocomplete({
source: 'php/customer-ac-script.php',
minLength: 1,
select: function(event, ui){event.preventDefault();
$(el).val(ui.item.label);
var rowid = $('#tab3-grid').getGridParam('selrow');
// set the hidden wo_CUID cell with selected value of the selected label.
$('#tab3-grid').jqGrid('setCell', rowid,'wo_CUID',ui.item.value);},
focus: function(event, ui) {event.preventDefault();
$(el).val(ui.item.label);}
})
}
},
formoptions:{rowpos: 1, label:'Customer', elmprefix:'* '},
editrules:{required:true}
},
.
.
$('#tab3-grid').jqGrid('navGrid', '#tab3-pager',
{view:true, closeOnEscape:true, cloneToTop:true},
{jqModal:true, navkeys:[false,38,40], onclickSubmit: fixpostdata}, // edit options.
.
.
javascript function
// define handler function for 'onclickSubmit' event.
var fixpostdata = function(params, postdata){
var rowid = $('#tab3-grid').getGridParam('selrow');
var value = $('#tab3-grid').jqGrid('getCell', rowid,'wo_CUID');
postdata['wo.CUID'] = value;
return;
}
The fixpostdata function fires when you submit the editform but befor the postdata array is sent to the server. At this point you replace the cell's postdata element value with whatever you want. In this case, the value of the label/value pair stored in the hidden column cell. When the function returns, the modified postdata array is sent to the server.
Done!
Add toolbar button is used to add new row to jqgrid.
Add form which appears contains all filed vlaues empty.
How to set add form field values from column values from row which was current/selected when add command was issued ?
json remote data is used. Or if this is simpler, how to call server method passing current/selected row to retrieve default values for add form from server ?
jqgrid contains also hidden columns. If possible values from hidden columns from current row should also sent to add controller if add form is saved.
Update
I tried to use Oleg great suggestion by using
afterShowForm: function(formID) {
var selRowData,
rowid = grid.jqGrid('getGridParam', 'selrow');
if (rowid === null) {
// todo: how to cancel add command here
alert('Please select row');
return;
}
selRowData = grid.jqGrid('getRowData', rowid);
if (selRowData === null) {
alert('something unexpected happened');
return;
}
$('#' + 'Baas' + '.FormElement', formID).val(selRowData.Baas);
}
Application keeps add form open after saving. After first save Baas field is empty. It looks like afterShowForm event runs only once, not after every save. How to fix this so that multiple rows with default values can added without closing add form?
How to cancel or not allow Add command if there is no selected row ?
If you need to make some initialization actions only for Add form you can use at least two approaches:
the usage of defaultValue property as function inside of editoptions. The callback function defaultValue can provide the value for the corresponding field of the Add form based of the data from selected row. For optimization purpose you can read the data from the current selected row once in the beforeInitData callback/event. You can just read the data which you need or make an synchronous call to the server to get the information which you need. The only disadvantage of the usage of defaultValue property is that it uses jQuery.val method to set the default value for all fields of Add form with exception 'checkbox' edittype. For the checkboxs jqGrid set checked property of the checkbox of false, 0, no, off or undefined are not found in the value returned by defaultValue property. So the approach will not work for other edittypes. For example it can fail for the custom edittype.
the usage of beforeShowForm or afterShowForm. Inside of the callback functions you can set any value of the form. You can find the filed of the corresponding column of the grid by id of the field which is the same as the value of name property of the corresponding column.
Like you already knows you can get the id of the current selected row with respect of getGridParam and get the data from the selected row
var selRowData, rowid = grid.jqGrid('getGridParam', 'selrow');
if (rowid !== null) {
// a row of grid is selected and we can get the data from the row
// which includes the data from all visible and hidden columns
selRowData= grid.jqGrid('getGridParam', 'selrow');
}
where grid is jQuery object like $('#list') which selects the main <table> element of the grid.
In the demo you can see how works the first approach described above.
I am using jqGrid v 4.0 in my application to display tabuler data with Inline edit feature. One of the column in the Grid is a type of "Select". I have populated this select with following server side code:
//get all Departments
HRDept = $.ajax({
url: '../../PerformanceReview/GetHRDepartments/',
async: false,
success: function(data, result) {
if (!result)
alert('Failure to retrieve the HR Departments.');
}
}).responseText;
I have populated the Grid column with following sysntax:
name: 'HRDepartment', index: 'Department', align: 'left', editable: true, edittype: 'select', editoptions: {value: HRDept}
But on click of edit button (inline), it shows dropdown on on top of cell but the value is not equal to current cell value. it is always first value of drop down. I had compared the text which i am populating while loading Grid with the text of Dropdown and they are matching.
Could some one help me to set dropdown value similar as cell value.
Your edit options look wrong, it should be "value:text;" and the value should match your data results.
{ ... editoptions: {value: "HRDept:HR Department;" }}
You can checkout the demo of Row Edition -> Input Types at the jqGrid Demo site., which includes a dropdown list edit cell.
If you get the select values from the server you should use dataUrl option of the editoptions instead of value. Then the jqGrid will make the Ajax request at the beginning of the editing and fill the select element with the server response. It is important to understand that the server response should be in another form:
<select>
<option value='101 - Equity Partners'>101 - Equity Partners</option>
…
</select>
If you have already the code on the server which provide the information in another format and you can't change the server code you can define additional buildSelect function which get as the parameter the server response and should return the data in the above format ('...'). See UPDATED part of the answer for the code example.