I'm currently editing an application which uses YUI 2.5. I haven't used it before and could use some help.
I want to be able to add a dropdown editor for a particular column's rows using datatable, but I only want it to appear if specific values appear in another column in the corresponding row.
Is it possible to add some kind of If statement in the column definitions? Would I have to use a custom formatter?
eg.
var eventColumnDefs = [
{key:"event_id", sortable:false},
{key:"event_name", sortable:true},
{key:"extended", sortable:true, formatter: function (o) {
if (event_name=type1||event_name=type4||event_name=type5) {
editor:"dropdown", editorOptions:{dropdownOptions:eventData.extendedList}
}
}
}];
I know this code wouldn't work, by the way, I would just appreciate a bit of guidance.
You are close. In the column definition you add the information about the dropdown editor as if you always wanted it to show up. Now, going to the code sample here: http://developer.yahoo.com/yui/datatable/#cellediting
See the last line that attaches onEventShowCellEditor to whatever event you want to make the editor pop up? That is where you put the conditional. Instead of just asking to show the cell editor under any circumstance, you put some code there, like:
myDataTable.subscribe("cellClickEvent", function (ev) {
if ( ** whatever ** ) {
this.myDataTable.onEventShowCellEditor.apply(this, arguments);
}
});
I haven't been doing YUI2 for quite some time now so I don't remember the details on the arguments received by the event listener. I believe that you might also use showCellEditor() instead of onEventShowCellEditor, the later only massages the arguments as received from the event listener and ends up calling showCellEditor so you might as well skip it.
Found a hacky solution as follows
In Column Definitions:
var eventColumnDefs = [
{key:"player_name", sortable:true, editor:"dropdown", editorOptions:{dropdownOptions:currenteam}}
];
Then later on in initialiseTables:
eventDataTable.subscribe("cellClickEvent", function(ev) {
var target, column, field;
target = ev.target;
column = this.getColumn(target);
if (column.key === "player_name") {
field= this.getRecord(target).getData("team_id");
}
if (hometeamlistID == field) {
currenteam=hometeamlist;
} else if (awayteamlistID == field) {
currenteam=awayteamlist;
}
eventDataTable._oColumnSet._aDefinitions[8].editorOptions.dropdownOptions = currenteam;
});
hometeamlist, awayteamlist, hometeamlistID and awayteamlistID are pulled from an XML string. I haven't included that code above, but some of it is included in my question here:
YUI 2.5. Populating a dropdown from XML
Related
I read all the posts regarding freezing column. But still I am unable solve my problem.
When I called setFrozenColumns my column has frozen but along with another column header is added to the grid. So the column headers one more than the columns. How to resolve this. Here is my over view of code.
makeJqueryGridInstance(grid, gridSettings);
window.prepareSortableColumns(grid);
makefrozenColumns(grid);
function makeFrozenColumn( grid )
{
var colmodel = grid.jqGrid('getGridParam', 'colModel');
if (colmodel[0].name === 'cb')
{
grid.jqGrid('setColProp', colmodel[0].name, { frozen: true });
grid.jqGrid('setFrozenColumns');
fixPositionsOfFrozenDivs.call(grid[0]);
}
}
function prepareSortableColumns(grid)
{
var gridSettings = grid.data('settings');
var gridId = gridSettings.gridId;
var columnHeaders = $("#" + "gview_" + gridId.replace("#", "")).find(".ui-jqgrid-htable > thead > tr > th");
var colModel = grid[0].p.colModel;
$.each(columnHeaders, function (index, columnHeader)
{
if (colModel[index].sortable == false)
{
$(columnHeader).find("div").removeClass("ui-jqgrid-sortable");
}
});
}
For the first time, it is working fine and the column has frozen.
But second time when the call made to prepareSortableColumns(grid), the columnHeader having one more than colModel (I debugged through devTools). So I am getting error for that particular columnHeader sortable is undefined.
Can anybody help me with this. Thanks in advance.
The code of prepareSortableColumns seems be wrong. Its not oriented on dives added in case of usage of frozen columns (see the answer for more details and use Developer Tools to examine the structure of the grids). You can try to use grid[0].grid.headers array instead of selecting columnHeaders in the way like you do this.
Additionally it's in general wrong to remove ui-jqgrid-sortable class. The meaning of the class will be frequently misunderstood because of the name. Non-sortable columns have to have the class too. What you need to do instead is to set CSS style cursor: default on the headers. See the old answer for the corresponding code example.
Just after editing a row (mode inline) I try to change some css properties of cells according the new value.
Typically : After editing of one row all cell of this row that contains the letter "D" I update the cell with a new css property : background-color: grey (using setCell method)
For that I use inline editing :
grid.jqGrid('navGrid',"#pager",{edit:false, add:false, del:false});
grid.jqGrid('inlineNav',"#pager",{edit:true, add:false, del:false, editParams: myEditParam});
For change the background after editing I use the method aftersavefunc
myEditParam :
...
aftersavefunc: function(rowId, dataFromServer)
{
var rowData = $("#list").jqGrid("getRowData", rowId);
for (var key in rowData)
{
if (rowData[key] == "D")
{
key++;
$("#list").jqGrid("setCell",rowId, key, "", {"background-color": "#ECECEC"} );
}
}
},
...
This code works but unfortunatly, when I sort one column of the grid the setCell method is not perserved ! (the cell lost it's background-color: grey)
Does it exist a better method for change the background after editing in function of the new value ?
Thx for your help ;)
I would suggest removing the Style from that event and rather move it to the more general function below. If the style isn't applied you can always trigger a refresh on the jqGrid as part of your after edit code.
The following function will examine each column cell value and if the TestValue is matching add the class to the row.
rowattr: function (rd) {
if (rd.ColumnName == TestValue) { return {"class": "RowBoldClass"}; }//if
},
and the matching class
RowBoldClass { font-weight:bold; .....
My answer from Making a row bold, changing background color - dwr
If you really need to change the format/color/style of the cell in the column which can the value "D" then you should use cellattr (see the answer or this one).
If you need to change the format/color/style of the row then you should use rowattr (see the answer).
One thing is important to understand: neither cellattr nor rowattr will be called at the end of row editing. So you will still have to use aftersavefunc callback.
The current code of aftersavefunc seems me a little strange. First of all I never had requirements to mark the value in any column of the grid based on the value ("D" in your case). Typically one need to test only specific column or columns for the value and then mark the cell or mark some other cell in the row.
In any way one need typically not just add the class in the value will be "D", but remove the class if the value is not "D".
I modified the demo from the answer to support inline editing (one should use double-click to start editing and press Enter to stop editing). The modified demo uses the following code of aftersavefunc additionally to cellattr used in the old demo:
aftersavefunc: function (rowId) {
var closed = $(this).jqGrid("getCell", rowId, "closed"), indexOfColumn;
if (closed === "Yes") {
// add CSS classes to the cell used to mark
$(this).jqGrid("setCell", rowId, "name", "",
"ui-state-error ui-state-error-text");
} else {
// remove CSS classes from the cell used to mark
indexOfColumn = getColumnIndexByName.call(this, "name");
$(this.rows.namedItem(rowId).cells[indexOfColumn])
.removeClass("ui-state-error ui-state-error-text");
}
}
Edit formatter action button is placed to jqgrid column:
colModel: [{"fixed":true,"label":" change ","name":"_actions","width":($.browser.webkit == true? 37+15: 32+15)
,"align":"center","sortable":false,"formatter":"actions",
"formatoptions":{"keys":true,"delbutton":false,"onSuccess":function (jqXHR) {actionresponse = jqXHR;return true;}
,"afterSave":function (rowID) {
cancelEditing($('#grid'));afterRowSave(rowID,actionresponse);actionresponse=null; }
,"onEdit":function (rowID) {
if (typeof (lastSelectedRow) !== 'undefined' && rowID !== lastSelectedRow)
cancelEditing($('#grid'));
lastSelectedRow = rowID;
}
}}
New row is added to jqgrid in loadcomplete event
var newRowData = {};
var newRowId = '_empty' + $.jgrid.randId();
$('#grid').jqGrid('addRowData', newRowId, newRowData);
and its id is updated if save action button is clicked:
function aftersavefunc(rowID, response) {
restoreActionsIcons();
$('#grid').jqGrid('resetSelection');
var json = $.parseJSON(response.responseText);
$("#" + rowID).attr("id", json.Id);
lastSelectedRow = json.Id;
$("#grid").jqGrid('setSelection', lastSelectedRow);
}
After clicking save action button edit action button clicks are ignored. It is not possible to re-enter to edit mode after first editing.
How to fix this so that row can edited by edit button click again after saving ?
Update
I added $(this).focus() as suggested in Oleg answer and also wrapped id change into setTimeout as Oleg recommends in other great answer:
function aftersavefunc(rowID, response) {
restoreActionsIcons();
$(this).focus();
$('#grid').jqGrid('resetSelection');
var json = $.parseJSON(response.responseText);
setTimeout(function () {
$("#" + rowID).attr("id", json.Id);
lastSelectedRow = json.Id;
$("#grid").jqGrid('setSelection', lastSelectedRow);
}, 50);
}
Problem persists. The problem may related to row id change since:
It occurs only in last row (where id is changed after save). It does not occur for saved rows where responseText returns same id and row id is actually not changed.
It does not occur if cancel action button is pressed.
Maybe row id needs additional reset id addition to resetSelection or needs updated in somewhere other place also.
Update2
I added code form updated answer to errorfunc and used only english characters and numbers id ids. This allows to click multiple times but introduces additional issue:
extraparam is no more passed. If rowactions() calls are commented out, extraparam is passed with with rowactions calls extraparam is not passed.
I changed jqGrid source code and added alert to rowactions method:
alert( cm.formatoptions);
if (!$.fmatter.isUndefined(cm.formatoptions)) {
op = $.extend(op, cm.formatoptions);
}
In first clicks alert outputs 'Object'. In succeeding clicks to Save button it outputs undefined. So for unknown reason formatoptions is cleared.
Remarks to comment:
Absolute url in testcase is not used. Datasource is set to localarray.
I verified that testcase works in IE and FF without external url access.
For extraparam issue I can create new testcase.
Without image directory buttons are shown in cursor is moved over them.
Missing image directory still allows to reproduce the issue.
FormData function is defined in js file.
Since new issue occurs after adding rowactions() calls and does not occur if those calls are removed, this seems to be related to the code proposed in answer.
I suppose that the problem exist because one hide a button which has currently focus. Look at the code from the answer. If one remove the line $(this).focus(); // set focus somewhere one has the same problem as you describes. So I suggest that you just try to set somewhere, for example in restoreActionsIcons the focus to any the table element of the grid after hiding the button having currently the focus. I can't test this, but I hope it will help.
UPDATED: I examined your problem one more time and I hope I can suggest you a solution.
You problem can be divided on two sub-problems. The main your problem is the the changing of the id of the row. So it is not common problem which everybody has.
The problem is that "actions" formatter create onclick functions directly in the HTML code (see for example here):
ocl = "onclick=$.fn.fmatter.rowactions('"+rowid+"','"+opts.gid+"','edit',"+opts.pos+");..."
So the functions will contains the original rowid. To fix the problem you can modify the code fragment of your aftersavefunc inside of setTimeout from
$("#" + rowID).attr("id", json.Id);
lastSelectedRow = json.Id;
$("#grid").jqGrid('setSelection', lastSelectedRow);
to something like the following:
var $tr = $("#" + rowID),
$divEdit = $tr.find("div.ui-inline-edit"),
$divDel = $tr.find("div.ui-inline-del"),
$divSave = $tr.find("div.ui-inline-save"),
$divCancel = $tr.find("div.ui-inline-cancel");
$tr.attr("id", json.Id);
if ($divEdit.length > 0) {
$divEdit[0].onclick = function () {
$.fn.fmatter.rowactions(newId,'grid','edit',0);
};
}
if ($divDel.length > 0) {
$divDel[0].onclick = function () {
$.fn.fmatter.rowactions(newId,'grid','del',0);
};
}
if ($divSave.length > 0) {
$divSave[0].onclick = function () {
$.fn.fmatter.rowactions(newId,'grid','save',0);
};
}
if ($divCancel.length > 0) {
$divCancel[0].onclick = function () {
$.fn.fmatter.rowactions(newId,'grid','cancel',0);
};
}
lastSelectedRow = json.Id;
$("#grid").jqGrid('setSelection', lastSelectedRow);
The second problem is that you use special characters inside of ids. I found a bug in the $.fn.fmatter.rowactions which need be fixed to support special characters in ids. The problem is that in the line 407 of jquery.fmatter.js the original rowid parameter rid will be changed:
rid = $.jgrid.jqID( rid )
and later everywhere will be used modified id. For example in the id is my.id the encoded version will be my\\.id. It's correct for the most places of the $.fn.fmatter.rowactions code (see here), but it' s incorrect as the rowid parameter of the editRow, saveRow, restoreRow, delGridRow, setSelection and editGridRow (see the lines 433-453). So the code must be fixed to use the original not escaped (not encoded) rid value with which the $.fn.fmatter.rowactions was called.
I think I will post tomorrow the corresponding bug report with the suggestions in the trirand forum.
UPDATED 2: The code $.fn.fmatter.rowactions(newId,'grid','edit',0); which I wrote above is just an example. I took it from the test demo which you send me. You should of course modify the code for your purpose. How you can see for example from the line the second parameter of the $.fn.fmatter.rowactions in the id of the grid which you use: 'grid', 'list' of something like myGrid[0].id. The last parameter should be the index of the column having formatter:'actions' in the colModel. You can use getColumnIndexByName function from the answer on your old question to get the index by column name.
I'm using inline editing in my grid , I have some cases which i want to change the value of a cell inside a column. I'm changing it with setCell ,and it works good. my problem is that after the change the cell losts it's edit mode while all other cells of the row are in edit mode. I want to keep the cell in edit mode after i changed it.
for now what i did is saved the row and then selected it again and made in in edit mode - but i don't think it is a good solution - Is there a way to keep in edit mode while changin it?
Thank's In Advance.
If you need to implement the behavior of dependency cells which are all in the editing mode you have to modify the cell contain manually with respect of jQuery.html function for example. If the name of the column which you want to modify has the name "description", and you use 'blur' event on another "code" column then you can do about the following
editoptions: {
dataEvents: [
{
type: 'blur',
fn: function(e) {
var newCodeValue = $(e.target).val();
// get the information from any source about the
// description of based on the new code value
// and construct full new HTML contain of the "description"
// cell. It should include "<input>", "<select>" or
// some another input elements. Let us you save the result
// in the variable descriptionEditHtml then you can use
// populate descriptionEditHtml in the "description" edit cell
if ($(e.target).is('.FormElement')) {
// form editing
var form = $(e.target).closest('form.FormGrid');
$("#description.FormElement",form[0]).html(descriptionEditHtml);
} else {
// inline editing
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
$("#"+rowId+"_description",row[0]).html(descriptionEditHtml);
}
}
}
]
}
The code will work for both inline and form editing.
The working example of dependent <select> elements you can find here.
blur does not fire if value is changed and enter is pressed immediately without moving to other cell. So better is to use
editrules = new
{
custom = true,
custom_func = function( val, col ) { ... }
},
and move this code from blur to custom_func as described in
jqgrid: how send and receive row data keeping edit mode
In our application we are using a jqGrid which supports hiding and reordering of columns. When the columns are hidden or reordered we want to store the new settings into our database. But to do this we somehow need to capture the hiding or reordering event. Or possibly to capture when the colModel changes.
Is there any way to capture and handle these events?
Thanks.
You can use 'done' event of the columnChooser. Here is an example:
var grid = $("list");
grid.navButtonAdd(
'#pager',
{caption:"", buttonicon:"ui-icon-calculator", title:"Column choose",
onClickButton: function() {
grid.jqGrid('columnChooser',
{
"done": function(perm) {
if (perm) {
this.jqGrid("remapColumns", perm, true);
}
// here you can do some additional actions
}
});
}
});
UPDATED: If you define sortable option as
sortable: {
update: function (permutation) {
alert("sortable.update");
}
}
and not as sortable:true you will receive the notification about the new order of columns. See the source code of jqGrid for details. The array permutation with integers has the same meaning as in remapColumns functions (see my old answer for details).
You can capture column changes via the sortable parameter as mentinoed in Oleg's "update" above, or as discussed on jqGrid's message board.
However, please note that the array passed to your callback will be relative to the current column order. In other words, saving the array as is after moving multiple columns will not produce the desired results. See my answer on this other stackoverflow question.