I have a simple jqgrid.
colModel: [ { name: 'CatId', index: 'CatId', width: 30, align: 'left' }, ...
What I want to do is turn a column into a hyperlink like this example I find on google:
formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}
However I want to put the CatId as the parameter, eg:
formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=<CatId>'}
I can't seem to find any examples of how to do this, other than possibly just hooking into the loadcomplete event and going through and manually updating every row. Is there a nice way to solve this?
The URL used by formatter: "showlink" will be constructed using formatoptions which could be baseLinkUrl, showAction, idName and addParam. The formatter "showlink" uses rowid (the id attribute of <tr> elements of the grid) for constructing the URL. The URL will be built as
baseLinkUrl + showAction + '?' + idName + '=' + rowId + addParam
So the main problem is whether the value of CatId column be used or can be used as the rowid. If you would use key: true option to the definition of CatId column then jqGrid will use the value from CatId as rowid and you could use
formatter: "showlink", formatoptions: { baseLinkUrl: "someurl.php", idName: "action" }
If the value of CatId column can't be used as rowid then I would recommend you to use formatter: "dynamicLink" instead (see jQuery.jqGrid.dynamicLink.js here). I described it in the answer.
Related
I have to display cell content like
Policy
Part
Cert
Separated with next line character
In slickgrid table and so on.
How can I do this?
I searched but nothing worked for me.
What should I do with this is there any way to fit contents by height.
I Have this code written for breaking cells
columnname: <p>+policy+</p><br/>+part......and so on.
Any lead will be highly appreciated.
Better register a new formatter for your column.
Example
function myformatter(row, cell, value, columnDef, dataContext) {
return "<style='text-decoration: underline;color: #669900;height:120px;'>" + value +";
}
And call myformatter into column definition
var columns = [];
columns[0] = { id: "id", name: "columnname", field: "id", sortable: true, width: 5, formatter: myformatter };
I am trying to update the cell value of a particular column in my grid. I am using local JSON for populating the grid datatype: "local".
The column definition of that column is as follows:-
{
name: 'details',
index: 'details',
label: 'Details',
editable: false,
align: 'center',
formatter: function(cellvalue, options, rowObject) {
if (rowObject['verified']) {
return 'sdfsfsd'; // actually hyperlink for the cellvalue
}
return '';
}
}
I am using the following line of code to update the cell value:-
// rowid is 1
grid.jqGrid('setCell', 1, 'details', 'DONE!');
Also tried like this:
// the last parameter true to force update
grid.jqGrid('setCell', 1, 'details', 'DONE!', null, null, true);
However, the cell value is cleared out (cell becomes empty, <td> content is empty). This happens only for this column, and not for other columns in the grid. What am I missing?
Thanks
Vivek Ragunathan
If you use custom formatter you should specify unformatter too. The function formatter will be used to set the value in the cell. At the beginning of cell editing jqGrid need to get the value from the cell. The function unformat do the job.
I have a jqGrid (using inline editing) with an autocomplete column. When the user selects a value from the autocomplete column, an event handler sets a value on another column, and also sets the value on the autocomplete column to something other than the label returned from the autocomplete source. The two column definitions (complete jsFiddle example here):
{
name: 'cartoonId',
index: 'cartoonId',
width: 90,
editable: false},
{
name: 'cartoon',
index: 'cartoon',
width: 200,
editable: true,
edittype: 'text',
editoptions: {
dataInit: function(elem) {
$(elem).autocomplete({
source: autocompleteSource,
select: function(event, ui){
var rowId = $("#inlineGrid").jqGrid('getGridParam', 'selrow');
if(ui.item){
$("#inlineGrid").jqGrid('setCell', rowId, 'cartoonId', ui.item.CartoonId);
$("#inlineGrid").jqGrid('setCell', rowId, 'cartoon', ui.item.Name);
}
return false;
}
});
}
}},
The problem is that whenever the user selects a value from the autocomplete, either by clicking it or using arrows and pressing the tab key, that cell is no longer editable, and the grid appears to lose focus entirely. If I comment out the line that sets the cartoon cell value, it behaves normally. Is there any way I can get around this behavior? I need the entire row to remain in edit mode, including the cartoon column, until the user completes the edit.
jqGrid 4.4.1
jQuery 1.7.2
jQuery UI 1.8.18
You should rename Name property of the items from the autocompleteSource to value because jQuery UI Autocomplete examines the label and value per default (see the documentation).
You can't use setCell of the 'cartoon' column which is currently in the editing mode. You should remove return false; from select callback too. So the code could looks about the following
dataInit: function (elem) {
$(elem).autocomplete({
source: autocompleteSource,
select: function (event, ui) {
var rowId = $("#inlineGrid").jqGrid('getGridParam', 'selrow');
if (ui.item) {
$("#inlineGrid").jqGrid('setCell', rowId, 'cartoonId',
ui.item.CartoonId);
}
}
});
}
See http://jsfiddle.net/27dLM/38/
I.e. I want the field name "Firstname" to have an asterisk in it to denote a compulsory e.g. "*Firstname", but I don't want the main grid column name to have asterisk in it too.
Clicking the Edit button pops up a form with the asterisk it in, but this also appears on the Grid when viewing the resultset.
Can someone advise on a way around this?
Thanks.
This is what I've currently got that doesn't solve my problem.
colNames: ['*Firstname']
colModel:[{ name: 'Firstname', index: 'Firstname', label: 'Firstname', width: 150, editable: true, editrules: { required: true} }]
If you set some prefix or suffix for the column name in the Edit form you should use corresponding formoptions instead of the colNames or label property in the colModel.
I added the resizeStop event to my grid and it gets called, but I need to save the new column widths in the session and then use the new values to maintain the user preferences for column widths. Currently paging in the grid or reloading resets the column widths.
Here is what I have so far.
resizeStop: function(newwidth, index) {
alert(index + " : " + newwidth);
}
OK, I got it. I store all column widths in a HashMap in a bean I use to save session info. When the resizeStop event is fired I submit the new column size to a controller (I'm using Java and Spring) which updates the values in the HashMap.
Here are the code snippets:
resizeStop: function(newwidth, index) {
var colModel = $("#list").jqGrid('getGridParam','colModel');
$.post("/sessionState/columnWidth/update",
{
column: colModel[index].name,
width: newwidth
}
)
}
and in the colModel:
{name:'Title', index:'title', width: ${uiState.columnWidthMap["Title"]}, jsonmap: 'title', sorttype: "text"}