afterSaveCell: function () { $(this).trigger('reloadGrid');},
If I put this in my grid it works well, reloads the grid after a cell edit. Is there an easy or known way to reload only on a specific cell ? something like
//afterSaveCell: function () {
If(the field is budgetyear1){
$(this).trigger('reloadGrid');}
},
First of all you should always place the call of trigger('reloadGrid') inside of setTimeout. It's important because trigger('reloadGrid') works synchronously and the next line after trigger('reloadGrid') will be executed only after reload is finished. If you reload the data from the server, then it's not so critical, but some internal parameters of jqGrid can be already reset (the page number for example).
About you main question: afterSaveCell will be called with 5 parameters: rowid, columnName, cellValue, iRow, iCol. It gives you enough information about the clicked cell and you can use getCell method to get information about any other columns of the row. Thus your could be about the following:
afterSaveCell: function (rowid, columnName, cellValue, iRow, iCol) {
var $self = $(this); // cache this to be used later in `setTimeout`
if (/*test some conditions*/) {
setTimeout(function() {
$self.trigger("reloadGrid");
}, 50);
}
}
Related
I have 2 bootstrap-multiselect boxes. I want to refresh the items in one based on the selections made in the other via an Ajax call.
Everything work except that the that the multiselect uses to disoplay the options is not being populated by either 'rebuild' or 'refresh'.
Code:
Decalring the multiselect"
$('#Groups').multiselect({
onChange: function (option, checked) {
//get all of the selected tiems
var values = $('#Groups option:selected');
var selected = "";
$(values).each(function (index, value) {
selected += $(value).prop('value') + ",";
});
selected = selected.substring(0, selected.length - 1);
//update hidden field with comma delimited string for state persistance
$("#Hidden_Groups").val(selected);
},
includeSelectAllOption: true
});
Updating the options list:
$('#JobCodes').multiselect({
onDropdownHide: function(event) {
console.log("start");
var option = $("#Groups");
//clear out old consolidations
option.empty();
console.log("emptied");
////get consolidation and append to select options list
$.getJSON("/Reports/GetGroups/", { options: $("#Hidden_JobCodes").val() }, function (result) {
$.each(result, function (index, item) {
console.log(item.text);
option.append($("<option />").val(item.id).text(item.text));
});
});
option.multiselect('destroy');
option.multiselect('rebuild');
option.multiselect('refresh');
},
Have left the destroy, rebuild and refresh in just as an example things i have tried. Have used all of these in every order and combination and no luck.
Destroy will "change" my multiselect back to a standard select but no matter what I do after that I cannot get the multiselect to come back with the new list of options, including using the full multiselect call wiht the onchange event present. Its either empty of has the old list. The select list has the correct options present when I make the refresh/rebuild calls.
Thanks in advance.
T
Totally my fault!!
The call to /destroy/refresh/rebuild was outside of the ajax call. so the were executing before my new list had been returned, hence no list to rebuild at that time.
Solution:
////get consolidation and append to select options list
$.getJSON("/Reports/GetGroups/", { options: $("#Hidden_JobCodes").val() }, function (result) {
$.each(result, function (index, item) {
console.log(item.text);
option.append($("<option />").val(item.id).text(item.text));
});
option.multiselect('rebuild')
});
I want to select and unselect a row multiple times by clicking.
My code is so far: (lastSelected is a global var):
beforeSelectRow: function (id)
{
if (lastSelected !== id)
{
grid.setSelection(id);
lastSelected = id;
return;
}
else
{
grid.resetSelection(id);
lastSelected = null;
}
}
The code works fine, but row is highlighted only after first click. The Second click unhighlight it and it keep being unhighlighted when I click it next times, but after 3rd, 5th... clicks it behave like selected (I have modal which pops up when row is selected), but is not highlighted.
Without grid.getSelection(id) it won't highlight at all, but still working like it was selecting and deselecting.
It seems to me that the main error in your code is the returned value of beforeSelectRow. If the returned value in not false then the standard processing will be continued and the row which you previously selected explicitly by usage setSelection can be unselected.
To fix the problem you should return false from beforeSelectRow. Additionally I would suggest to use $(this) instead of grid variable and to use standard selrow parameter of jqGrid instead of usage lastSelected variable. The resulting code could be the following
beforeSelectRow: function (rowid, e) {
var $self = $(this), selectedRowid = $self.jqGrid("getGridParam", "selrow");
if (selectedRowid === rowid) {
$self.jqGrid("resetSelection");
} else {
$self.jqGrid("setSelection", rowid, true, e);
}
return false; // don't process the standard selection
}
The corresponding demo is here.
I am using a custom formatter to create hyperlinks in one of the columns of my grid.
In my code, there are cases when I need to disable the selected row. The row disabling works as I want it to, but the hyperlink for that row is not disabled. I can not select the row and all the other column values are displayed as grey colored to indicate that the row is disabled. The only column whose content does not change color is the one having links.
Any ideas on how to disable links?
This is my loadComplete function:
loadComplete: function (data) {
var ids =jQuery("#list").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var rowId = ids[i];
var mod = jQuery("#list").jqGrid('getCell',ids[i],'mod');
if(mod=='y'){
jQuery("#jqg_list_"+rowId).attr("disabled", true);
$("#list").jqGrid('setRowData',ids[i],false, {weightfont:'bold',color:'silver'});
var iCol = getColumnIndexByName.call(this, 'adate');
$(this).jqGrid('doInEachRow', function (row, rowId, localRowData) {
$(row.cells[iCol]).children("a").click(function (e) {
e.preventDefault();
// any your code here
alert("No Good");
return false;
});
});
}
}
}
I want the links disabled in all the rows where the value of the column mod=y
You can try to use onClick callback of dynamicLink formatter described here, here and here. It gives you maximum flexibility. Inside of onClick callback you can test something like $(e.target).closest("tr.jqgrow").hasClass("not-editable-row") and just do nothing in the case.
I have a table filled with data that I want to sort and filter.
I implemented an auto-refresh function, which loads data from the server each time, but I want to restore sort and filter options, which I can do.
I use trigger("reloadGrid",[{current:true}]), setting the datatype to json so that the data are retrieved from the server, in the autorefresh function, and the sort and filter options are used in the loadcomplete method with a setTimeout, as explained in other stackoverflow questions.
That works, but each time the grid refreshes, I see during one second the grid with the full data, not sorted nor filtered, and then the data are locally sorted/filtered.
Given that I want an 5 seconds auto-refresh, is there a way I can prevent the reloadGrid method from displaying the full data when there is a server request but wait for the reload in loadComplete to refresh the display?
Reload used in the autorefresh function :
$("#MyGrid").jqGrid("setGridParam",{url:"list.php", datatype:"json"}).trigger("reloadGrid",[{current:true}]);
Model :
jQuery("#MyGrid").jqGrid({
url:'list.php',
datatype: "json",
loadonce:true,
...
loadComplete: function(){
if ($("#MyGrid").jqGrid("getGridParam", "datatype") !== "local") {
setTimeout(function () {
$("#MyGrid").jqGrid("setGridParam",{search:srch,postData:post});
})
};
}
You can use setInterval JavaScript function to do automatic refreshing
var grid = $("#list"),
intervalId = setInterval(
function() {
grid.trigger("reloadGrid",[{current:true}]);
},
60000); // Every 1 min
to stop the grid reload you can use one more JavaScript function:
clearInterval(intervalId);
In the "reloadGrid" I use less known parameter current:true which is described here to preserve the current selection in the grid.
You can see the Reload Jqgrid by given interval
When a user selects a cell, I have the following code which goes to a window.location
beforeSelectRow: function (rowid, e) {
var $td = $(e.target).closest("td"),
iCol = $.jgrid.getCellIndex($td[0]);
if (this.p.colModel[iCol].name === 'FlSaved') {
var pagenum = $('#reportList').getGridParam('page');
var rownum = 200;
alert(pagenum);
alert(rownum);
window.location = "/Plt/FileUpload/" + '?id=' + encodeURIComponent(rowid) + '&pagenum=' + pagenum;
}
Note how I am passing the pagenum. The reason why I am passing the page number is because when the user finishes with what they need
to do at window.location, I need the user to go back to the grid page that they were at.
To do this, I am doing the loadComplete where I set the value of the page but does not seem to be working.
loadComplete: function (data) {
if ('#TempData["pageNum"]') {
$("#rpList").trigger("reloadGrid",[{page:pagenum}]);
}
Where is the best place of do the trigger reloadGrid at?
It's unclear for me when '#TempData["pageNum"]' will be set, when it will be cleared and whether the code will be hold in the cache of the web browser. If we forget about the questions I have one important remark to your code: if you use .trigger("reloadGrid", ...) inside of loadComplete you should place the call of trigger inside of setTimeout. It will allows to process till the end the current loadiong of the grid before starting the next loading initialized by .trigger("reloadGrid", ...). So the code could be about the following:
loadComplete: function (data) {
...
if (/*some condition*/) {
setTimeout(function () {
$(this).trigger("reloadGrid",[{page: pagenum}]);
}, 50);
}
...
}
Event the usage of 0 instead of 50 is not the same as the usage of .trigger("reloadGrid",...) without setTimeout.