I am following this example http://directwebremoting.org-demo/reverseajax/peopleTable.html
Here it is adding the rows to the end of the table.
But my requirements is i have to add at the top. Every new row should be a first row.
please help me, i was struggling since 2days to get it out.But No use.
Thanks in advance.
It seems that addRows is only adding at the top.
The quickest solution would be to call [in Java] the Util.setValue [after the Util.AddRow] and pass an id of an hidden HTML element. I suggest to use something like current timestamp so it will change byt itselft. This is the method inside Util.Java [have a look at the DWR sources]:
public static void setValue(String elementId, Object value)
Then in javascript you can "watch" for changes in the hidden field and in case push the last row in the first position.
Otherwise if you want to have a cleaner solution without the hidden field, you would have to override the addRows in JS but then one day you want also to add the row ad the end...
But I guess that the solution with the hidden field is fairly simpler
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
Say I want to put a button in an HTML table that gives me the value of the neighbor cell upon clicking it.
I have this sample JQuery code: console.log($(this).parent().parent().children('.name-cell').get(0).innerText);
In which $(this) is a button in a table cell, the rest of the line gets a neighbor cell with a specific class name name-cell and returns its value or text.
This one works but since I'm new to JS I don't know if it's the correct way to do it since it looks very clumsy.
Is there any other way I'm not aware of?
JQuery .siblings() is what you need
$(this).siblings('.name-cell').text();
I want to add empty data row. My requirement is like columns are dynamic. I have tried using dtInstance to add the row. it's throwing some error.
here is the link
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-gvfose?file=app/app.component.ts
Please let me know if more details required.
I dont think that's possible with Angular-datatables out of the box, but you can use Angular-xeditable to achieve that as in this question. A better way to do it in my humble opinion would be, when the user clicks the 'add' button, we show a pop-up, they fill the data, we update the back-end or the reference table and rerender the table.
You gave the Data table wrong model. you are mixing between different models in your code.
I've fixed it as well adding two empty rows, make sure to align with the model defined by columnsDataObj
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-zemuq2?file=app/app.component.ts
There is a simple demo for your requirement that puts the other button to save the empty column you want to access the data.
For easy to use, add DATA button that would be shown the blank row with input, the style you desire to set up the CSS and don't forgot the CSS scope for your by Encapsulation.
DEMO
If the operation field is superfluous, rid it off and place the event for three columns after entering with your logical condition.
Annoying Button
The add DATA could be replaced with the below code, setup the life hook instead for insert the method in the constructor.
ngAfterViewInit (){
this.addData();
}
I know that the practice is that every element has a unique id. I am curious about this case: I have a table (let's call it table1) that has many functions connecting its cells in various ways (ex: editing one cell changes other cells accordingly). Now, I need to have another table (let's call it table2), that will have exact same functions between its cells.
I would like to avoid changing the ids in the table2, and then copy pasting the js functions for the table1 and apply them for the ids from the table2.
The easiest thing for me would be to just copy-paste this table1 (so the cells in the table1 and table2 will have same ids), and adapt the js functions to make sure that whenever a change in table1 happens - only table1 is affected, and not cells in table2, and vice versa.
Example:
$('body').on('keyup', "input[id^='sub_']", function() {
$("[id^='top_']").val(5);
}
Now, I suppose if I have an id that begins with "top_" in both tables that the change in table1 will also change the value of the field "top_" in table2.
How can I make sure to avoid this?
I was thinking to do something like this:
$(this).closest("input[id^='top_']");
But this is not working, the values are changed in both tables... Does anyone have a suggestion?
Try the following code snippet:
$(this).closest("table").find("input[id^='top_']");
This will make sure the changes are made only within the table where the event occurred.
EDIT
Here is a small example that you can modify for your needs if you don't want to provide your HTML: https://jsfiddle.net/fjh0v6m4/10/
Maybe try
$('#sameid')[0].dosomething()
I have a table that has a hidden column that contains ids. I use the value in this column and send it to the server so I can grab the correct record.
I am not using datatables.net and I allow the user to update the row. So they click on an edit button and a dialog pops up and they edit it. Once they hit update I send all the values back including the id(stored in a hidden text field).
So I need to update the datatable and the fast way I found is use a plugin for it that allows you to take an html row and pass it to the datatable(instead of passing each column value in an array).
So first I need to delete the row then add the newly update row.
I have one problem though I don't know how to figure out which row to delete.
I could have some global variable that would store the row object and when it is time to delete it use that object. However I really don't want to do this as I don't want a global variable just flying around if I can help it.
So the hidden column with the value has a class name that I use as a slector(class ="hidden").
So I am wondering how could I do a search to filter down to only table cells that have this class name, has the exact value(say 55 that I can use from the hidden textbox).
I was thinking of using jquery contains but that might get stuff that might have that number. I want an exact match.
I'd suggest:
$('td.hidden:contains("55")')
This will find any td of class 'hidden' that contains the string '55', this is slightly problematic since it will also match the string '555', '055' etc.
Edited to refine the above a little, to make it specific to the required value:
$('td.hidden:contains("55")').filter(
function(){
return $(this).text() == '55';
}).closest('tr').addClass('highlight');
JS Fiddle demo.
Revised JS Fiddle demo, allowing searching.
While filter() would work perfectly well without the :contains() pseudo-selector I retained the :contains() in order to reduce the number of elements that jQuery has to work through.
References:
:contains().
filter().
Well, something like
$('body').find('.hidden').filter(function(elem) { ... } ).remove();
with whatever appropriate test in ....