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();
});
Related
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 am working with the latest Tianium Appcelerator and my project is using Alloy.
I have a TableView with the id: tblResults
In my controller, I populate this table view with rows like this:
// Dummy data
var results = [];
results.push({
title: 'Hello World',
value: '123456'
});
results.push({
title: 'Bye World',
value: '654321'
});
// Build result data
var resultData = [];
for (var i = 0; i < results.length; i++) {
resultData.push(createResultRow(
results[i].title,
results[i].value
));
}
// Method to create result row
function createResultRow(myTitle, myValue) {
var tableRow = Titanium.UI.createTableViewRow({
height: 160
id: 'row-'+ myValue
});
var tableRowView = Titanium.UI.createView({
layout: 'horizontal'
});
var myButton = Titanium.UI.createButton({
title: myTitle,
btnValue: myValue
});
myButton.addEventListener('click', function(e) {
handleButtonClick(e);
});
tableRowView.add(myButton);
tableRow.add(tableRowView);
return tableRow;
}
// Set table data
$.tblResults.setData(resultData);
// Method to handle button click
function handleButtonClick(e) {
if (e.source && e.source.btnValue) {
// how to select row having a id: 'row-'+ e.source.btnValue ???
}
}
What this will do is, generate a dummy array of objects. Then using that, populate the table view with row that has a view, within it there is a button.
What I am trying to achieve is, when the button is clicked, I want to select the table row having the id like this:
'row-'+ e.source.btnValue
in pure javascript/jquery DOM style, I would have done something like this:
$('#row-'+ e.source.btnValue)
How can I achieve this in Titanium Appcelerator? Is there a element selector functionality of some sort like in jQuery?
This is a very often requested feature that we don't currently support, but should. Right now, you'd have to keep a hash of id -> view reference and look it up that way. However, I opened a Feature Request here https://jira.appcelerator.org/browse/TIMOB-20286
If you have a select method on rows, you can do like this:
$.table.addEventListener('click',function(e) {
if(e.row.select) e.row.select();
//or
if(rows[e.index]) rows[e.index].select();
});
For tables and lists views always use the click and itemclick event on the table/list. These events provide you with both the selected row (e.row) as well as the actual view clicked upon (e.source). It is also more efficient then having a listener on the buttons of all rows.
Your code would look like:
$.tblResults.addEventListener('click', handleButtonClick); // or bind in XML
// Method to handle button click
function handleButtonClick(e) {
// user tapped on button
if (e.source.btnValue) {
var row = e.row;
}
}
I am using jqGRid with subgrid configuration to display my data. I would like to have global expand & collapse button to display or hide all subgrid information. Does jqGrid library provide this feature by any means?
jqGrid has no "Expand/Collapse all". I modified the demo from the old answer which demonstrates creating on grid with local subgrids. The resulting demo you can see here:
and it has additional "+" button in the column header of "subgrids" column. If one clicks on the button all subgrids will be expanded:
I used the following code in the demo:
var subGridOptions = $grid.jqGrid("getGridParam", "subGridOptions"),
plusIcon = subGridOptions.plusicon,
minusIcon = subGridOptions.minusicon,
expandAllTitle = "Expand all subgrids",
collapseAllTitle = "Collapse all subgrids";
$("#jqgh_" + $grid[0].id + "_subgrid")
.html('<a style="cursor: pointer;"><span class="ui-icon ' + plusIcon +
'" title="' + expandAllTitle + '"></span></a>')
.click(function () {
var $spanIcon = $(this).find(">a>span"),
$body = $(this).closest(".ui-jqgrid-view")
.find(">.ui-jqgrid-bdiv>div>.ui-jqgrid-btable>tbody");
if ($spanIcon.hasClass(plusIcon)) {
$spanIcon.removeClass(plusIcon)
.addClass(minusIcon)
.attr("title", collapseAllTitle);
$body.find(">tr.jqgrow>td.sgcollapsed")
.click();
} else {
$spanIcon.removeClass(minusIcon)
.addClass(plusIcon)
.attr("title", expandAllTitle);
$body.find(">tr.jqgrow>td.sgexpanded")
.click();
}
});
You can simply make it to behave like as toggle as follows.
Take a button.
onlick of it call the function, say toggleSubgrid();
function toggleSubgrid(){
if($('#YOURGRIDID td').hasClass('sgexpanded')){
$('.ui-icon-minus').trigger('click');
}
else if($('#YOURGRIDID td').hasClass('sgcollapsed')){
$('.ui-icon-plus').trigger('click');
}
}
This will work for all rows that are already loaded. You might need to scope the selector a bit, as fits your needs.
function expandAll () {
$( ".tree-plus" ).click();
};
function collapseAll () {
$( ".tree-minus" ).click();
};
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 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/