Develop Reference

How to force Datatables to re-render or re-load static dat?

I have a Datatable that uses static data from an HTML file.
Using either the "columnDefs data" function, or the "columnDefs render" function, I can perform some output adjustment - blanking out some of the TD's based on their content, and their position on the currently displayed page (without altering the data source).
However, when a user changes the number of displayed rows, I then need to reset & redo my adjustments on the data, as different cells will now need blanking, and previously blanked entries may need showing again.
So, what I want to do is in the "length.dt" event (number of display rows just changed), call something that causes the Datatable to either re-render the entire table, or re-load the entire data (which would thereby call my columnDefs render or columnDefs data functions)
Is this possible? Or is my approach flawed and I need to find another way?

Use rows().invalidate() to invalidate data for all rows and draw() to redraw the table.
Please note that 'data' in rows().invalidate('data') is required if you use Javascript data structure (with data or columns.render options).
$('#your_table').DataTable()
.rows().invalidate('data')
.draw(false);

You can redraw the entire DataTable on the length.dt event.
$('#your_table').on('length.dt', function (){
setTimeout(function() {
//draw('page') redraws your DataTable and preserves the page where it was
$('#your_table').DataTable().draw('page');
}, 100);
});
Edit
Here you can see more info and other parameters to pass to the draw method: https://datatables.net/reference/api/draw%28%29

Use 'destroy': true.
$("#your_table").dataTable({
'destroy': true
})

Dynamicaly input values into webdatagrid rowadding

I'm attempting to input some values into the grid's new row template from outside the grid since selecting this particular input would be more than impractical to get done from inside de webdatagrid.
How can I reach the to be added row via javascript from outside the control? According to the documentation ig_controls.wdgTransaccion.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row(); should do the trick, but it fails to return any row at all
Thank you

Are you sure you calling this from the right place? Can't really tell without more context, however I think i can help you get the functionality you need. Have a look at this sample:
ASP.NET Data Grid: Add New Row - Client Events
The best place I can think of doing this is probably at the time of actual editing happening, so have a look at the EnteringEditMode event and you can do the following inside:
function WebDataGridView_EnteringEditMode(webDataGrid, evntArgs) {
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
}
Or if you want to do it on your own flow you can grab the grid client object and use the same code as the event above:
var webDataGrid = $find('<%=WebDataGrid1.ClientID%>');
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
Both of those methods work and allow you to fill in a cell value.

Is there any CallBack function which is called before/after data is loaded in Angular Js ng-Grid?

Presently i have a Angular Js Grid which is pagination Enabled say 5 records per page for example and total number of records is 2000, so there are going to be 400 pages in All.
when pagination in ng-grid is handled the gridOption data is specified per page which means for 1st page the gridOption will be 1-5 rows for 2nd 6-10 rows and so on........
Here i have implemented a selection functionality through checkboxes thus whenever a row is selected[checkBox becomes selected] and it's stored in selectedItems array and i show selected items in another grid like this.....
Now when i move on to second page[pagination] and select further rows like this ...
The real trouble lies here when i again go back to the previous page i.e page 1 the checkboxes will not be checked because in pagination we load data runtime thus the pages shows following result...
Hope you must have understood my problem....
what i need here is a callback before/after data is loaded so that i can select the checkboxes as i have the number of selection preserved
OR any other workaround for my problem will be much helpful too.
Thanks!.

Can you store the checked value on the data model where you are storing the row values? Then you come back and its just checked by Angular bindings?
I am not sure of your setup, but I do this in a similar situation.

I have been working on this for a couple days now.
While I am still unable to preserve selection across pagination, I am able to clear selections while simultaneously "deselecting" the select all checkbox.
The allSelected variable is not exposed in the gridScope but you are able to grab it and address it using the following code.
// Use this to deselect all options.
$scope.gridOptions.$gridScope.toggleSelectAll(null, false);
// use this to find the allSelected variable which is tied to the
// (the ng-model related to the select all checkbox in the header row)
var header = angular.element(".ngSelectionHeader").scope();
// use this to turn off the checkbox.
header.allSelected = false;
I'll follow up again if I manage to get the "reselecting" to work as documented, but for now I might remain content with this.

How do I hide jQuery changes to the page until all processing is complete?

I have a page with a large table. At the top of the table I've added several filters for eliminating rows in the table. When someone changes a filter, jQuery processes the changes and shows/hides rows in the table that match the filters.
The processing code starts by showing all the rows in the table. Then, it steps through each filter, and wherever necessary, it hides rows in the table. So, each time the user changes a filter, they will see the entire table momentarily and then watch as the rows disappear until the filtering is complete.
Is there a JavaScript or jQuery function for delaying output to the browser until all processing is complete?

You can clone the table, perform whatever operations you need to on the clone, and replace the original table once you're done:
var newTable = $("#yourTable").clone();
//Do whatever you need to do to newTable
$("#yourTable").replaceWith(newTable);
Here's a working example.

Here is a crude example: http://jsfiddle.net/YNZJf/
Basically use jquery to change the html, then once finished set it back to you table.
$tmp = $( $('#table').html()));
$tmp.filter(); // do work;
$('#table').html($tmp.html());

I know you've already accepted an answer, but cloning the table is not how I would choose to implement this. I'd prefer to change the code that modifies the table to not modify it directly. Instead, create an output array that contains the list of modifications you will make to the actual visible table. Then, run your code and have it create this output array (which rows are shown and hidden or any other modifications). Then, when the lengthy part of the code is all done and you have this output array, you simply loop through the final output array and apply the changes. If this last part is all done in one synchronous piece of JS, the viewer will not see the intermediate steps, just the final result.
You should note that there are some characteristics of cloning and operating on it before it's inserted into the document to be aware of:
There could be issues cloning and operating on something with ids assigned to elements in it (since you can only have one object with a given id).
Non-jQuery event handlers may not get copied onto new objects.
You should specify the appropriate parameters to the .clone([withDataAndEvents], [deepWithDataAndEvents]) function
If your table is large, cloning might be slow (lots of duplicate objects and properties to create).
If any of your operations to modify the table assume it's in the document, they might not work on the cloned table until it's inserted.

Can EditTextCell's text be reset in a CellTable?

I'm working with GWT-2.1.0 and I've draw a table through CellTable which contains a column, the third, of EditTextCell. I'm trying to modify the value of that cell for each visible rows by code using:
table.getRowElement(i).getCells().getItem(2).setInnerHTML("<div style=\"outline:none;\" tabindex=\"-1\">0</div>");
Window.alert("Pause");
Thanks the alert I can see that all the rows have been updated correctly to the new value, but, once the cycle ends, a refresh of the table restore the user's input nullify the job done.
Is there some temporary cache that EditTextCell uses to mantain the data? Can I erase the text inserted by the user in another way? Can I reach the Column of the CellTable so allowing me to use the setValue(...) field?
Anyone can help?
Thanks in advance!
P.S. Using *.setInnerText("0"); fails too.
P.P.S I've read that GWT2.2.0 should have a CellTable.getColumn(int index) method to do so, but I don't know if it's useful to me - and, more important, when it should comes out.

EditTextCell is a subclass of AbstractEditableCell, which has the clearViewData method. You can call that method for all objects in the table for which you want the data to be cleared.