I am trying to add new rows on cell click using DataTables API.
Currently, I am able to add the row for the first time. But from second time on-wards, it is acting a bit weird. I was able to create this example for any of you to give it a shot.
After much work throughout the day, this is what I could accomplish.
EXAMPLE TO WORK UPON
Doing indexing manually is not the best idea considering that Datatables does this internally anyway.
Here's the official how-to for the index column: https://datatables.net/examples/api/counter_columns.html
The only problem here is that row.add() can only append a row (i.e. can't insert into arbitrary position). To overcome this you can retrieve the internal table data, modify it and put it back again. E.g.
var newRowData = [
"",
'New Name',
'New Position',
'New Office',
26,
'New Date',
'New Salary'];
tableApi.row.add(newRowData);
var data = datatable.fnGetData(); // get data
datatable.fnClearTable(false); // erase the data in the table
data.splice(currentRowIndex + 1, 0, data.pop()); // move the row of interest into desired position
datatable.fnAddData(data); // put data back
Full example: JSFiddle
That code of yours is somewhat off a mess. Here are some of the problems:
The AddNewRows() function is called by an onclick event in the html of the td (but not for all rows?). This also means is does not work with the newly added rows.
In the AddNewRows() function you use alot of $('#example').DataTable() instead of (re-)using the variable table.
In each new call to AddNewRows() you add a jQuery click event to all rows of the table (before adding the new row, so the event is not bound for the new row). After the e.g. fifth call to the function all rows have five events bound and so there are two times five alerts ...
The AddNewRows function is called with an onclick event on the td and after the function finished the click event propagates to the tr and the newly bound event for the tr is immediately called (plus all the events from previous calls, see previous point). Why not just use one event? Also the newly added event on the tr also works for click on other tds then the one which original hat the call to AddNewRows().
Try to simplify your code, maybe even build it up from scratch so that it only does what it is supposed to do. After that, come back here if you have still problems left.
Related
In a Slickgrid cell, i click and enter a value. Once i move out of this cell using a mouse click the value entered disappears. But if i enter the value in the cell and tab out then the value stays in the cell. I would like to know if this should be manually handled.
OnClick event i am calling
grid.updateRow(grid.getDataItem(args.row));
grid.invalidate();
grid.render();
Thanks,
Asha
You're doing something wrong, updateRow() argument is a row index in the grid but you're passing an item object so that won't work, also if I remember correctly updateRow is only used for re-rendering or refreshing a specific row index, it's not for updating the data but more for rendering purposes (perhaps the naming is confusing).
I personally only use the SlickGrid DataView and the functions to call for updating items are different, you can see how to that in this other Stack Overflow answer Change slickgrid cell data after edit
If you're using the grid object, as it's written in the other SO answer I referenced earlier, then it would be
grid.invalidateRow(args.row);
data[args.row][grid.getColumns()[args.cell].field] = a.msg;
grid.render();
Personally I always use the SlickGrid DataView as it's much more user friendly and comes with a lot more benefit like data grouping and many other functionalities. Again take a look at the other SO answer that I wrote in previous paragraph, that is the correct way to do it
I have an html table stuffed with data that is sorted by the awesome plugin datatables. Now I wan't each row to be clickable, so I added the following piece of jquery:
$( document).ready( function() {
$('.clickable').click(function () {
$(location).attr('href', $(this).data("href"));
})
}
);
This only works however, for the piece of the table that is initially shown (so the first 10 rows). If I extend the number of entries that are show with the default button: , my new entries are not clickable. How do I load the javascript in such a way, that also new entries are clickable?
please try to use the handler for table row click as written below :
$('body').on('click', '.clickable tbody tr', function () {
As #Michael pointed out always try use separate function for Event Handling as its easy maintain and modify.
The JavaScript that makes rows clickable is run once when the page first loads. It would be better to make it a separate function that gets called immediately after any new rows from the table load.
As #Prakash Thete pointed out, using .on('click') instead of click should add the effect to dynamically added elements, even when called once.
I used twitter bootstrap for my system. For displaying all of my data from the database, I used dataTables for it. I've added a new column as "Action" that contains 2 buttons, edit and delete. But when the record reaches more than 10 for the first pagination, all of the rows which contains my buttons on the second pagination and next pagination does not execute my jQuery code that handles the delete and edit function.
Can anyone help why is this happening? What are the possible solution for this problem? Really need it. Thanks.
Supposing you bind your delete and edit function on $(document).ready() then the explanation is simple: at that point only the first page is available in the DOM and only the buttons on the first page will bind.
What you need to do is to rebind your events every time you change the page. For this, you need to call your binding jQuery code (let's say you have a method named BindEvents() that does that) on the fnDrawCallback event of your DataTable:
var dataTable = $("#YourTable").dataTable({
// additional data table params,
"fnDrawCallback": function () {
BindEvents();
};
See http://legacy.datatables.net/usage/callbacks#fnDrawCallback for more details.
I have a working multiplication of textbox, however, when I added a new textbox, the function will not performed. Only the first textboxes is being executed of the js function that I made. Sorry for asking this but I am pretty new to jsquery/javascript.
here's my working script: JS FIDDLE
What it does is, I have a table and 2 TR on it. it multiply the cost(3rd td) and the quantity(fourth td) and send the results to the line total (fifth td). Then I have a button, that will add another set of tr to the existing table, however, the multiplication wont work on the newly added tr.
Can you help me here?
TIA,
Nimitz
Just add these two lines as two last lines of your .click(...) handler:
$(".qty :input").off('keyup',byPrice).on('keyup',byPrice)
$(".price :input").off('keyup',byQty).on('keyup',byQty);
Here is updated JSFiddle
The reason for that is - you have to re-register event listeners for the line newly created.
You can use same selectors, but then you have to "off" previous event listeners.
Update
Another approach, is you can bind events only on newly created row:
Here is another JSFiddle for that
You have to put contents of newly created row into some variable:
$('#myinvoice tr:last').after($newRow = $('<tr><td>...'));
And then add events for the selectors inside this $newRow only:
$(".qty :input",$newRow).keyup(byPrice);
$(".price :input",$newRow).keyup(byQty);
I'd use second
I have a panel that contains two grids, both of which are editable using the cell editing plugin. Within the grids, users can use the tab key to move between editable fields. However, I can not seem to find the right way to get the tab key to allow the user to move from the last editable cell in the first grid to the first editable cell in the second (there are no components between the two grids). The user is just stuck in the last editable field of the first grid.
I tried using FocusManager, but this made keyboard navigation far more complex, rather than less, requiring use of the arrow keys to get into and out of each form element and grid.
I added this code to the parent panel:
var nav = new Ext.util.KeyNav(Ext.getDoc(), {
tab: function(e) {
console.debug('TAB HIT!', arguments);
},
scope: this
});
nav.enable();
just to see what tabs were detected, but it only activated when the tab key was clicked and a form element in the parent panel itself had focus.
I guess there are a few elements I need to learn, how to I pass focus from element to element, and how do I detect the first and last element in a grid? Or is there some way to do this built into ExtJS? Any suggestions or advice would be greatly appreciated.
I would use the new cellkeydown event for grid panels.
Implement a handler for that event which checks the key type, and whether the cell is the last column in the grid, then starts a cell edit in the first column of the corresponding row in the other grid.
You can find out if it was a TAB key from the 7th argument passed by this event.
You can find out if it is the last cell in the grid from the 3rd argument passed by the event.
The rowIndex is the 6th argument - use that so you know which row to start editing in the other grid.
Event handlers can be added to components using the on method by the way.
You can also look up the functions that need to be called to start cell editing in the API here.
If you had more code and maybe a bounty I might be able to get more specific but that's the gist of how I would do it.