In jqGrid ,if multiselect: true then there will be some the checkbox control.I used the jQuery Selector to choose these checkbox but failed.
My coders areļ¼
jQuery('input[type="checkbox"][name^="jqg"][checked]').each(function(){...});
In general the code which you use is correct. I would rewrite it better as
jQuery('input:checkbox[name^="jqg"]:checked').each(function(){...});
because 'checked' must be not attribute, just a property. It's of course important that you use the code after the grid is filled and some rows are selected.
More better way would be to get the array of rowids of selected rows with respect of getGridParam method:
var selRowIds = $("#list").jqGrid('getGridParam', 'selarrrow');
Then you can get the checkbox of any from the items of selRowIds array by id. If the gridid is "list" for example and the id of selected row is "2" then the id of the corresponding checkbox is "jqg_list_2" ("jqg_" + gridid + "_" + rowid). In the way you can select every checkbox.
Add code event.stopPropagation() will resolve this issue.
Ex jQuery('xxxx').click(function(event){event.stopPropagation();});
Related
I am using a JQGrid, and have designed the grid such that the first column is a checkbox. I am using the property of multiselect:true, and I am not writing any code other than this to get the checkboxes. How do I fetch the values from the rows where the checkboxes are checked?
To get the selected rows, use:
var selected = $("#tableid").jqGrid('getGridParam', 'selarrrow');
selected will be set to an array of IDs of the selected rows.
To get column values from the rows, use the getCell method. See How to get the selected row id in javascript?
I am using a WebGrid to display a list of items,
I like to set the background color of the rows based on a condition. I want to set the background color of the entire row, not just one cell.
Any example?
thank you
This is an old question, but I just stumbled upon it and have an answer that I don't think is too hacky. The previous answer supplied only works if the value you're using to conditionally change the background color is the value of a table cell.
If that's not the case, you can set a data- attribute for the first cell in your table rows using the Format property of a WebGridColumn. Here, the first column of my table contains hyperlinked IDs. I'm defining it in my code-behind (controller action in MVC) and I've added a data-in-error attribute from the IsInError property of my object. You can set the value of this attribute in whatever way makes sense for your application.
new WebGridColumn
{
ColumnName = "Id",
Header = "ID",
Format = (x) => new HtmlString(String.Format("{1}", x.Value.IsInError, x.Value.Id))
});
Then, using jQuery, I find all of the rows in my table that have an anchor in the first cell of the row, and set the class of that row to 'error'.
$(document).ready(function () {
$('table tbody tr td:first-child a[data-in-error="True"]').each(function () {
$(this).parent().parent().addClass('error');
});
});
Hope this helps.
Is jQuery an option? If so, check out: http://devpinoy.org/blogs/keithrull/archive/2010/06/09/how-to-change-table-cell-color-depending-on-its-value-using-jquery.aspx
I have a in-line delete button, I want to append more data to the delete message pop-up like this:
"Delete selected row with code = 7 ?"
I'm using the following in the delOptions:
beforeShowForm: function ($form) {
var sel_id = $("#list").jqGrid('getGridParam', 'selrow');
$("td.delmsg", $form[0]).html("Delete record with <b>code=" + $("#list").jqGrid('getCell', sel_id, 'cd') + "</b>?");}
The problem is If I click on the delete button without first clicking on any part of the row, the selrow is either null or it gets the previously selected row not the currently selected!
How do I make the row selected when clicking on the trash bin icon?
Any help is appreciated
I suppose that you use the example which I posted in the old answer. It was written in case of usage of the Delete button (the part of form editing) from navigator bar.
There are one hidden row in the Delete dialog which could help you. Try this one
beforeShowForm: function ($form) {
// get comma separated list of ids of rows which will be delete
// in case of multiselect:true grid or just id of the row.
// In the code below we suppose that single row selection are used
var idOfDeletedRow = $("#DelData>td:nth-child(1)").text();
$form.find("td.delmsg").eq(0)
.html("Delete record with <b>code=" +
$(this).jqGrid('getCell', idOfDeletedRow, 'cd') + "</b>?");
// REMARK: in old versions of jqGrid you can't use $(this) and
// will have to use something like $("#list")
}
I am facing problem in Jqgrid. I have a column with hyperlink and on the click of that hyperlink I want row data. Is this possible using Jqgrid. when I am using "getGridParam" I am getting row id as null.
There are two possibilities you can try here:
1) You can use a custom formatter to create the hyperlink, and have a custom attribute on the link where you put in the rowid (prefix the custom attribute name with 'data-' to keep it html5 compatible). Alternatively you could call a javascript function explicitly passing the row id.
2) Instead of the hyperlink's event itself, try using the onCellSelect event of jqGrid where you get the row and column id of the clicked cell, even if its a hyperlink. But this would trigger the event even if the user clicks anywhere inside the cell, not just on the link!.
I'm sure you found the answer to this by now but for some of you using ASP.NET WebForm here is what I used.
Create the Custom Formatter and add it to the column where you want the link to appear:
My columns are from a database I use a Select statement as so:
switch (jqGrdCol.DataField)
{
case "xxx":
CustomFormatter hypLinkxxx = new CustomFormatter();
hypLinkxxx.FormatFunction = "xxxformatOperations"; --> **JavaScript Function**
jqGrdCol.Formatter.Add(hypLinkxxx);
break;
}
Then in the Javascript function:
function xxxformatOperations(cellvalue, options, rowObject) {
return "<a href=somefile.aspx?xxx=" + rowObject[0] >" + cellvalue + "</font></a>"
}
I get the value of the column as a hyperlink.
I had a similar issue and was did look into your question to figure out a solution and I have found out a solution to this.
The solution is by using onCellSelect: function(rowid, index, contents, event)
this gives the rowid and contents ie the content of the cell you have clicked or selected
therfore you can get the entire row of contents which includes your hyperlink as well
how to get a value of a (hidden) column, from the selected row. that is, the cell value needs to be from the cell identied by colName, and the selected row (not using multi select). From the API i see the method getGridParam("selrow") for reading the row, may be able to combine with other methods.. but, any convenient method available? a code snippet would save lot of time... \
thanks.
You should use getCell function to read the value from the cell identified by row id. So if you need a data from the column 'MyColName' of selected row you can do this with the following code:
var grid = jQuery('#list');
var sel_id = grid.jqGrid('getGridParam', 'selrow');
var myCellData = grid.jqGrid('getCell', sel_id, 'MyColName');
If you need read full data of a row you can use getRowData instead of getCell. More about methods supported by jqGrid you can read in the documentation (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods).