i have table with 4 rows and when i click on any row then a new is getting added just after row where i clicked. here i am giving my code just to show how i achieve it with jquery.
my jquery by which i adding a new row just after the row where i clicked.
$(document).ready(function () {
$("table#Table1 tr").click(function () {
var $tr = $(this).closest('tr');
var myRow = ($tr.index() + (++counter));
$(this).after("<tr ><td>" + myRow + ") </td><td><img src='Images/closelabel.png' id='imgExpandCollapse' alt='ABC' style='cursor:pointer'/></td><td>Name : New one</td><td>Desig : CEO</td></tr>");
});
});
the problem is that i am adding new row with jquery but click event is not getting attach with new. so please guide me for the best approach to attach click event with new row.
You want to use .live(..) to bind the event. This will allow dynamically generated DOM elements to use the same event.
$("table#Table1 tr").live( 'click', function () {
var $tr = $(this).closest('tr');
var myRow = ($tr.index() + (++counter));
$(this).after("<tr ><td>" + myRow + ") </td><td><img src='Images/closelabel.png' id='imgExpandCollapse' alt='ABC' style='cursor:pointer'/></td><td>Name : New one</td><td>Desig : CEO</td></tr>");
});
Try $.fn.delegate
http://api.jquery.com/delegate/
Try changing -
$("table#Table1 tr").click(function () {
to
$('table#Table1 tr').live('click', function() {
That should ensure jQuery binds the click event to all table rows, including those that are created dynamically.
Working demo - http://jsfiddle.net/w5Atk/
Related
I can add row dynamically with this script
$(document).ready(function(){
var t = $('#entryJurnal_table').DataTable({});
var delete = function (){
//this function won't run
//delete selected row code goes here
}
$('.add').on('click', function () {
var credit = '<td><input type="numeric" name="kredit[]" class="form-control"></td>';
var debit = '<td><input type="numeric" name="debet[]" class="form-control"></td>';
var opt= '<td>Delete row</td>';
t.row.add($('<tr>' + credit + debit + opt + '</tr>')[0]).draw();
});
});
How I can delete row dynamically?
When I click Delete Row it say delete is not defined
Thanks in advance.
Try to use event propagation instead of defining handlers within onclick attribute.
$('#entryJurnal_table').on('click', '.del', function() {
t.row( $(this).parents('tr') ).remove().draw();
});
Note, it uses .del class for delete button. And if the <a> elements are used to act as buttons, then they should also be given an appropriate role="button".
Thanks #alexander
add row with array
table.row.add(['input tag', 'input tag', 'delete button tag with delete class']).draw();
delete row with this
$("#entryJurnal_table tbody").on("click", ".delete", function () {
t.row($(this).parents('tr')).remove().draw();
});
I would like to remove row from Treelist after click in button. I bind function in event "click: remove". Firstly , I choose a row and next try remove object from DataSource. And this point is not correct.
remove: function () {
var that = this;
if (this.isGridSelected) {
var arr = [];
arr = this.selectedRow.toJSON();//this line show selected row
this.roleDataSourcePrzypisane.remove(this.arr);//I think this row is wrong ...Remove no work
console.log(this.roleDataSourcePrzypisane);
this.set("roleDataSourcePrzypisane", this.roleDataSourcePrzypisane);
} else {
iwInfo('Please choose row', 'warning');
}
}
function removeRow(e) {
var treelistCurrentInstance = $("#treelist").data("kendoTreeList");
var currentRow = $(e).closest('tr');
treelistCurrentInstance.removeRow(currentRow);
}
I have tried something similar, i'm taking reference of current row by instance of button and using removeRow method of kendo treelist.
Assume a button control:
<button id="btn">Remove selected row</button>
The click event removes a selected row in the kendoUI jQuery TreeList control:
$("#btn").click(function()
{
let Treelist = $("#treelist").data("kendoTreeList");
let Row = Treelist.select();
Treelist.removeRow(Row);
});
Ensure that the TreeList is editable, e.g. with:
"editable": true
in the TreeList creation definition, otherwise the .removeRow() method won't work.
I have a two level jqGrid (grid/subgrid) implementation that works very fine.
Now I have a requirement that push me to implement a third level subgrid in only some of the second level rows.
Is there any way to exclude the opening of the third level if any condition on the row does not permit it?
Thanks very much
EDIT as per #Oleg answer
I have implemented the more complex logic example as in the referenced answer, that is
loadComplete: function() {
var grid = $("#list");
var subGridCells = $("td.sgcollapsed",grid[0]);
$.each(subGridCells,function(i,value){
[...]
var rowData = grid.getRowData( ??? );
});
}
Can I use any field to retrieve the rowData in the each loop?
If I understand your question correctly you can do the same like I described in the answer, but do this on the second level of subgrids. To hide "+" icon in some rows you need just execute .unbind("click").html(""); on "td.sgcollapsed" elements of the second level subgrids.
UPDATED: The demo demonstrate how you can get rowid and use getLocalRow (alternatively getRowData) to hide selective subgrid icons ("+" icons). I used the following loadComplete code in the demo:
loadComplete: function () {
var $grid = $(this);
$.each($grid.find(">tbody>tr.jqgrow>td.sgcollapsed"), function () {
var $tdSubgridButton = $(this),
rowid = $tdSubgridButton.closest("tr.jqgrow").attr("id"),
rowData = $grid.jqGrid("getLocalRow", rowid);
if (rowData.amount > 250 ) {
$tdSubgridButton.unbind("click").html("");
}
});
}
In my asp.net MVC 3 application am using Jqgrid as my grid. It contains a checkbox and i managed the event as below
$("#list").find('input[type=checkbox]').live('change', function () {
if ($(this).is(':checked')) {
var _row = $(this).parent().parent();
}
});
i got the row using $(this).parent().parent() i want to get the id of the _row . How can i get the id? Is there any method please share
This should do the trick:
$('#list').find('input[type=checkbox]').live('change', function () {
if ($(this).is(':checked')) {
var row = $(this).parent().parent();
var rowId = row.attr('id');
}
});
If you are using default value of idPrefix option of jqGrid (which is empty string) otherwise the id will prepend with value of this option.
On select row you can get the id of selected row. In fact when you check a checkbox you also select a row so:
onSelectRow: function(id){
yourId = $("#yourGrid").jqGrid('getGridParam', 'selrow');
alert("The id of checked row is: "+yourId);
}
I have inplemented a JQGrid alog with a subgrid.
I have a requirement of hiding only the subgrid headers(the outer main grid headers should still be visible).
I tried using the following code $(".ui-jqgrid-hdiv", "#gbox_" + subgrid_id).hide() on subGridRowExpanded , which did not solve the problem.
Any help on this will be deeply appreciated.
Try to hide the header in the gridComplete function from the main grid:
gridComplete: function() {
var rowIds = $("#grid").getDataIDs();
$.each(rowIds, function (index, rowId) {
var subgridNameBasedOnRowId = "somesubgrid_" + rowId; //the name of my subgrid
$(".ui-jqgrid-hdiv", "#gbox_" + subgridNameBasedOnRowId).hide();
});
}