I want to get the number of row by mouseover. This is my code :
gridComplete: function() {
var myGrid = $('#list2'),
x = myGrid.jqGrid('getGridParam', 'reccount');
//here I get the total number of rows in jqgrid
$('#list2 #popupData').mouseover(function(e) {
//here I dont know what to write and i how to get the current row number, not the ID
});
},
thx
This will work, in general, though i imagine it would not behave well with paging enabled.
beforeSelectRow:function(rowid,e)
{
alert("Row [" + rowid + "] is row number [" + $("#" + rowid)[0].rowIndex + "]");
return false;
},
But the exact code would depend on what #popupData is. are you trying to find the row number of the selected row ?
UPDATE: per discussion in comments, this is how it can be handled , changing the alert for whatever display mechanism you want
$("#popupdata").mouseover(function() {
alert( $(this).parents('tr')[0].rowIndex);
});
Related
In my KendoUI datasource, I have the following defined:
change: function (e) {
if (e.action === "itemchange") {
// auto-format Display As
var geoDisplay, geoUrl;
if (e.items[0].GeoState.length > 0) {
geoDisplay = e.items[0].GeoCity + ", " + e.items[0].GeoState;
} else {
geoDisplay = e.items[0].GeoCity;
}
//this.dataItem(this.select()).GeoDisplay = geoDisplay;
e.items[0].GeoCity = "updated: " + e.items[0].GeoCity; // visually updates if editing this field
e.items[0].GeoDisplay = geoDisplay; // field is not updated
}
console.log("change: " + e.action);
console.log(e);
// do something else with e
},
Essentially I want to update other fields on a row being edited based on a field's input.
In this example, GeoCity is updated. The itemchange event is fired and only the GeoCity field gets updated with the new value. However I can see from the data that the other fields' data have been updated.
I have tried doing a .sync() and a few other methods to get this to appear, but no luck so far.
Incidentally, my grid is defined within an AngularJS directive and it's onEdit event isn't what I'm looking for, as I want the events that fire when each field is updated, not the whole row.
How can I get the other fields to visually update?
I managed to solve the issue by placing the following code in the data source code:
change: function (e) {
if (e.action === "itemchange") {
// auto-format Display As
var thisRow = $("#accountGeoLocationEditorGrid tbody").find(".k-grid-edit-row");
// update geo display
if (e.field === "GeoCity" || e.field === "GeoState") {
var geoDisplay, geoUrl;
if (e.items[0].GeoState.length > 0) {
geoDisplay = e.items[0].GeoCity + ", " + e.items[0].GeoState;
} else {
geoDisplay = e.items[0].GeoCity;
}
if (e.items[0].GeoDisplay.length == 0) {
e.items[0].GeoDisplay = geoDisplay;
thisRow.find("input[name=GeoDisplay]").val(geoDisplay);
}
}
}
I was really looking for another way to do this, as I don't really want to be doing DOM lookup, etc in a defined datasource.
Other suggestions welcome.
Did you try the grid refresh() method? At the end of your changes in the change event, call this line (with your grid's correct id):
$("#grid").data("kendoGrid").refresh();
I've tested this on my grid and kendo's samples and it works fine like this. You are editing the datasource but the grid is not aware of the extra changes you have done, except the cell that was edited. Calling refresh will update all the cells on the grid to reflect the datasource.
I have a jqgrid with inline edit and few frozen columns. I gathered some information on how to make this work from here. The answer in the link has a frozen column which is multi-select.
But what I wanted to know is if there is any way or a work around to edit a frozen column in inline edit.
I have been trying to figure this one out for a little while now, and was finally able to come up with something that works for my situation. Hopefully you can do something similar.
I created the following function to be called when the edit button is clicked:
var editRow = function(rowId) {
$('#' + gridId).editRow(rowId);
$('#' + gridId + '_frozen').editRow(rowId);
};
This will make the frozen columns appear editable to the user.
I created the following function to be called when the save button is clicked:
var saveRow = function(rowId) {
$('#' + gridId + '_frozen' + ' #' + rowId + ' > td').each(function () {
var col = $(this).attr('aria-describedby');
$('#' + gridId + ' #' + rowId + ' > td[aria-describedby="' + col + '"]')
.children(':first')
.val($(this).children(':first').val());
});
$('#' + gridId).saveRow(rowId);
};
This code will take the value from the frozen cell and copy it to the underlying hidden cell - which is the cell whose value is submitted on save.
I also have a cancel option, which calls the following method:
var cancelRow = function(rowId) {
$('#' + gridId).restoreRow(rowId);
$('#' + gridId + '_frozen').restoreRow(rowId);
};
UPDATE:
I found that this solution only works in IE(8), not in Chrome or Firefox. The web application I am working on only needs to be compatible with IE8, but I will try to find a solution for the other browsers as well.
I call the following function before the add dialog is shown; after clicking [+] on the JqGrid.
MVC Controller grid configuration
ordersGrid.ClientSideEvents.BeforeAddDialogShown = "initAddDialog";
The function makes an Ajax call to create a new order record either with or without a linking id, dependent on whether an existing order was selected when the [+] button was clicked.
The purpose is to make available the id necessary to make another Ajax call to retrieve additional linked information from another service, and to pre-populate the new record with date/time information and (where applicable) common information from an existing record.
function initAddDialog() {
var newOrderId = 0;
var newOrderLinkId = 0;
var selRow = jQuery('#clientOrderGrid').jqGrid('getGridParam', 'selrow');
var selRowData = jQuery('#clientOrderGrid').jqGrid('getRowData', selRow);
Get linking ID from selected row (if any)
var curOrderLinkId = (selRowData.OrderLinkId == null) ? 0 : selRowData.OrderLinkId;
Ajax call to create new 'Holding' Order
$.ajax({
url: '/Order/ajaxNewOrder?OrderLinkId=' + curOrderLinkId,
success: function (newOrderResponse) {
arr = newOrderResponse.split("|");
newOrderId = arr[0];
newOrderLinkId = arr[1];
},
error: function () { alert("There was an error creating an Order record"); }
});
If I break the code here using Firebug in Firefox, I can see that the variables newOrderId and newOrderLinkId have been set correctly with the id's from the newly created record, and if I hit F8 the (already displayed) dialog is populated with these //values.
If I don't break the code the dialog is displayed, but displays the values with which the variables were initialised i.e. newOrderId = 0, newOrderLinkId = 0.
$('#' + 'OrderId').val(newOrderId);
$('#' + 'OrderLinkId').val(newOrderLinkId);
$('#' + 'Stock').val(stock);
$('#' + 'SettlesTs').val(settlesTs);
$('#' + 'ReceivedTs').val(dtThis);
$('#' + 'ReceivedHHmm').val(dtTime);
I've tried calling the same function after the add dialog is shown, but get the same results.
Any thoughts as to why this is, or is there a better way of achieving the same result?
Thanks
I have taken the native add/edit dialog out of the equation and am using my own 'add' form along with the native inline editing of JqGrid. I'm sure with more research it would have been possible to find a solution, but with deadlines looming I had to find a workaround.
onSelectRow: function (id) {
var row = jQuery('#list').jqGrid('getRowData', lastSel)
...
lastSel = id;
},
Specified in the [Docu]: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods it will not give the actuall value. What can I use instead? The eventually changed data is not submited.
You posted too few code. So it's unknown how you implemented inline editing. In any way you will have the value of the editing cell as the value of the corresponding HTML control. One uses typically <input> or <select> for editing. So to get the value you need find the corresponding HTML element and get directly its value. For example you can use
$("#" + rowid + ">td:nth-child(" + (i + 1) + ")>input").val()
to get the value from the input of the cell from the i-th column or the row having id equal to rowid.
The old answer demonstrate a little other way to do the same. In any way you have to get the value of the corresponding cell directly.
function getTextFromCell(cellNode) {
return cellNode.childNodes[0].nodeName === "INPUT" ?
cellNode.childNodes[0].value :
cellNode.textContent || cellNode.innerText;
}
;
function getActualRowData(rowid) {
var row = [];
$('#' + rowid).find('td').each(function () {
row.push(getTextFromCell(this));
});
return row;
}
I have been working with the jqGrid a lot and everything works (sorting, reordering of columns, adding/remove columns in the columnChooser, reordering columns in the columnChooser, ...). However there is one minor thing.
It appears, the initial list of the colModel that I pass to the grid contains the columns in the order they are displayed including a list of the possible hidden columns, e.g. columns:
Id, Name, Date(hidden), AValue, BValue, CValue(hidden)
Now when I open the columnChooser, the visible columns are shown on the left in the expected order as they appear in the grid. The not visible columns appear on the right as: Date, CValue. If I remove all columns from the grid, then the order of the unselected columns on the right of the column chooser dialog is as defined in the colModel: Id, Name, Date, ...
I would like to see the selected columns in the order as they appear on the screen for reordering, but I would like to have the unselected columns on the right always appear in alphabetical order - is that somehow possible?
I had trouble getting this to work but eventually decided to add my own event handlers to the dialog to manually sort the right side.
//Add the button to the jqGrid toolbar
$('#MyGridId').jqGrid('navButtonAdd', '#MyGridToolbar', {
buttonicon: 'ui-icon-transferthick-e-w',
caption: 'Select Columns',
title: 'Select Columns',
onClickButton: function () {
$(this).jqGrid('columnChooser', {
done: function (perm) {
if (perm) {
this.jqGrid('remapColumns', perm, true);
}
}
});
//Setup custom event bindings and give the right side an initial sort
BindColPickerActions($.jgrid.jqID(this.id));
SortColPickerAvailable($.jgrid.jqID(this.id));
}
});
//function to add click event bindings to the dialog actions
function BindColPickerActions(gridId) {
var colpickerId = 'colchooser_' + gridId;
//When moving an item from selected to available (Hiding)
$('#' + colpickerId + ' .selected a:not(.SortModifier)').bind('click', function(){
SortColPickerAvailable(gridId);
BindColPickerActions(gridId);
});
//When moving an item from available to selected (Showing)
$('#' + colpickerId + ' .available a:not(.SortModifier)').bind('click', function(){
BindColPickerActions(gridId);
});
//add a class to the actions that have been modified to keep track
$('#colchooser_' + colpickerId + ' .available a:not(.SortModifier), #' + colpickerId + ' .available a:not(.SortModifier)').addClass('SortModifier');
}
//function to sort the available list
function SortColPickerAvailable(gridId) {
//get the list of li items
var colpickerId = 'colchooser_' + gridId;
var available = $('#' + colpickerId + ' .available .connected-list');
var li = available.children('.ui-element');
//detatch and sort the li items
li.detach().sort(function(a, b) {
return $(a).attr('title').toUpperCase().localeCompare($(b).attr('title').toUpperCase());
});
//re-attach the li items
available.append(li);
}