How to get the particular jqgrid cell value using java script?For example the jqgrid having four columns like id,name,subject1,subject2.now I click the particular row and I need to get the id.how to achieve this?I use the onSelectRow in jqgrid I get the solution but I need to get the javascript?
I use the Jqgrid onSelectRow
onSelectRow: function(id){
var rowData = jQuery(this).getRowData(id);
var temp= rowData['name'];
alert(temp);
}
As #ClydeFlog showed in the example, try this:
var Id = jQuery('#gridName').jqGrid('getGridParam','selrow');
See the result below in the console:
Page example on the 'Get Selected Rows' button click.
Related
I am trying to access an individual row from a grid in Kendo UI so that I can run operations on the selected entries in the row. However, my code is not correctly grabbing the row itself and I do not know how to resolve this.
I've tried binding the grid to an event that, when changed, will fire my method in order to grab whichever row was toggled.
const row = arg.sender.element.closest("tr")
const grid = $("#ECUs").getKendoGrid()
const dataItem = grid.dataItem(row)
Results:
I.fn.init [prevObject: I.fn.init(1)]
length: 0
prevObject: I.fn.init [div#ECUs.k-grid.k-widget.k-display-block]
__proto__: w
(Sorry, I apparently don't have enough reputation to post images)
Ideally, I would expect to get a tr object back in the first method, but I'm getting absolutely nothing instead. Does anybody know how to correct this to access the row?
If you have a click event on one of the columns, you can access the table row using some jquery.
function onClickListener(e) {
e.preventDefault();
var row = this.dataItem($(e.currentTarget).closest("tr"));
}
Option 1:
You can use the edit event of a grid to get the currently selected row model.
edit: function(e) { console.log(e.model); }
Here, e.model contains the row data and you can access the particular column value by e.model.columnName.
Option 2: You can get the row model data like below from the other functions.
https://stackoverflow.com/a/56478061/8733214
Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")
There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.
Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.
I have a users grid. To delete one, select your row and click a button "delete".
But, this not work.
My code is:
var row = userGrid.getSelectionModel().getSelection();
console.log(row.get('dni'))
Firefox says:
TypeError: row.get is not a function
Any idea ?.
It is good practice to always check hasSelection() like -
if (userGrid.getSelectionModel().hasSelection()) {
var row = userGrid.getSelectionModel().getSelection()[0];
console.log(row.get('dni'))
}
perhaps because
getSelection( ) : Ext.data.Model[]
Returns an array of the currently selected records.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.selection.Model-method-getSelection
I'm trying to use the following JavaScript function to get a particular cell value from a jqgrid upon click.
In the below function #datagrid is the table where the jqgrid is stored in.
$("#datagrid").click(function(){
var selr = $("#datagrid").getCol('companyid');
alert(selr);
});
My problem is when I click the jqgrid it will show ALL row id's from the jqgrid in the alert message, but I only need a particular companyid which was selected from the jqgrid. How do I make this work?
You should use getCell function to read the value from the cell identified by row id.
So, You should try something like this:
$("#datagrid").click(function(){
var grid = jQuery('#datagrid');
var sel_id = grid.jqGrid('getGridParam', 'selrow');
var myCellData = grid.jqGrid('getCell', sel_id, 'MyColName');
});
I am using Yahoo UI library, in particular this example.
What I want is to get a particular column's value when clicking (selecting) a row.
I am using this code:
var makis = function() {alert("blabla"); };
myDataTable.subscribe("rowClickEvent", makis);
and works, but I just don't know how to get a column's value in the particular row.
Ok i found it on my own, i am posting if anyone has the same problem.
myDataTable.subscribe("rowClickEvent", function(oArgs) {
var elTarget = oArgs.target;
var oRec = this.getRecord(elTarget);
console.log("value:" + oRec.getData("column_we_want"));
}