Can EditTextCell's text be reset in a CellTable? - javascript

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.

Related

Callback Function .html(), and .val() together possible?

back again! been a while.
So this is my question.
I have a datatable set up that gets the information from the database and shows this in a modal (bootstrap4).
That works fine by the way, but now I wan't to add a dropdown option.
This dropdown needs to have information that is stored in the database (just one table with all the rows).
success:function(data){
$('#Modal').modal('show');
$('#Id').val(data.id);
$('.number').html("<select><option>".val(data.number)"</option></select>");
$('#skills').val(data.skills);
$('.modal-title').html("<i class='edit'></i> Edit ");
$('#action').val('Data');
$('#save').val('Save');
}
as you can see I tried to do this little trick but sadly it didn't take so I was wondering if something like this is even possible?
Thanks so much for the help/info.
Assuming that your modal already contains a select box in a .number div with several options in it then the following would add the extra option into it, generated from the data object:
$('.number select').append(`<option value="${data.number}">${data.number}"</option>`);

Reloading or Refreshing JSON and HTML div load order

I am trying to create some code that will allow me to pull and display stock data for a Smart Mirror Project that I am building.
I have gotten it to display all the information but am not able to update the stock data. I want it to update the information every 5 seconds but when I do this, it basically goes on repeat and continues to output all the stocks over and over, off the page.
How can I get it to reload the data without reloading the entire page and how can I tell that it is working? Is it possible add a css element that flashes the prices yellow whenever the price changes?
Here is my code in fiddle: https://fiddle.jshell.net/Aurum115/2kbpt91z/17/
Edit: To clarify the second part. I basically want to still store the old price and compare it to the new price temporarily and quickly flash the text yellow if it has changed.
The problem you have is that you are appending the new HTML to the existing HTML.
To solve your problem, you need to delete the existing contents of the divs that your are updating. You should add the following code after the setInterval(,,, line:
$("#title").html("");
$("#livePrice").html("");
$("#stockTicker").html("");
$("#livePercent").html("");
$("#liveData").html("");
Unfortunately, it does result in a "flicker" each time you reload. To reduce this, in cases where you have a fixed number of rows, you can label each row 1-X (and use the same number for the cells in each row) and then simply overwrite the contents of each cell on each row as you update...
In my view, if you aren't worried about the order that the stocks appear, you should use a table and give id's to the cells that relate to each stocks price and change (e.g. for Apple the cell ids could be: price_NASDAQ:AAPL, change_NASDAQ:AAPL). You then simply use $("#price_NASDAQ:AAPL").html(...) to update the price and $("#change_NASDAQ:AAPL").html(...) to update the change.
If you want something to happen (like a flash) use $("#price").css("background-color", "...") to change the color and use setInterval(...) to wait for a short time before changing the color back...

Handsontable getCell empty on invisible cell

When using handsontable's functionality to get the data of a cell:
hot.getCell(2,2) It normally will return the DOM element.
When using a table that is larger than the screen it will unload the data of the cells that are not visible even if you access them by their index.
I have added a fiddle below, where if you scroll right and then click the get value button it will fail to retrieve the data of the cell.
http://jsfiddle.net/JammyDodger231/x7dLwu6f/1/
Is this just a limitation to handson or is there an option to cache all results for access later without taking the functionality outside of handson?
Looking at the available functions, there is an option to get the raw data from handson:
http://jsfiddle.net/JammyDodger231/syukz3uL/
hot.getData()[2][2]
By using getData with two array pointers it will retrieve the same data get getCell should

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.

HTML- Altering Input Value

I recently posted a similar question, but after some discussion, the question turned out to be quite a bit different than it was originally stated, so I thought it best to post this as a new question. I am trying to use an input field to show a total (I would consider using another element type, but I need to do the same thing in other places where an input field is actually required, so I may as well fix the problem now). The problem is that the HTML of the table containing these fields needs to be reloaded on occasion, i.e. in table creation, I use the Jquery $('#table1').html($('#table1').html() + <next_table_line>);. This causes the input field to revert to the value displayed in its value attribute, which doesn't change when I use the $('#input1').val(<some_value>); setter or when I enter data manually. Does anyone know of a solution to my problem? I need to be able to add rows to the table without loosing my data, but I can't figure out how to do this.
You're reloading your entire table with the line $('#table1').html($('#table1').html() + <next_table_line>);. You should be appending to your table instead. Take the following sample small table:
<table id="test">
<tr><td>test</td></tr>
</table>
Now, to add a new row, dont re-write the entire table HTML, just append!
$("#test").append("<tr><td>See im new!</td></tr>");
Demo: http://jsfiddle.net/uB2Rq/1/

Categories

Resources