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();
}
Related
I want to add multiple textfield on to a specific row inside a table whenever the specific row add button is clicked, currently I am able to add text field onclick of add button but whenever the add button is clicked the textfield is getting added in every row of the table. Also the add icon needs to be next to the last text field but currently I could only achieve it having it on the 1st text field. Please someone help me out here. Image of what i have achieved so far.
As you can see I'm trying to add textfields on 1st row ,but it is automatically adding textfields in every row of table.
Working codesandbox:
https://codesandbox.io/s/broken-dream-7nncc?file=/src/App.js
There are a few ways to do it. A quick way is to (as Muhammad said) handle the button click for each row.
Meaning that you need to pass to the addCustomFile method the row Id and store this in your array.
Then when you map the customRow array in your main TableBody make sure to add the two custom columns only if there is a match between the customRow.rowID and the row ID you are currently rendering.
I`ve modified your sandbox https://codesandbox.io/s/infallible-resonance-qn64l?file=/src/App.js:1807-1820
you have to handle button click for each row. right now just one state so therefore it is showing in each cell
Maybe give this a try
https://www.w3schools.com/code/tryit.asp?filename=GQP3C100TJZH
hopefully it solves what you are looking for, if not please provide me with a bit more detailed issue of what exactly you want
This at the moment just works for one row and maybe for two rows you can try it by adding a it is not exactly a text field area but it should be a similar fix.
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 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 am creating a grid using the ng-repeat directive. I need to be able to edit inline, which I achieved using the same idea provided here.
I now also need to be able to add new rows to this grid on click of a button. I am doing this by pushing a new entry to my collection on each button click, which inserts a new row into my grid. I want this new row to get added in editable mode. However, to do that, I need to be able to set the editMode property to true dynamically while pushing the new row. How can I achieve this?
JSFiddle: http://jsfiddle.net/Thw8n/69/
You did everything right, except binding to editMode field. Just change
data-ng-show="editMode"
to
data-ng-show="entry.editMode"
if i understand your problem in right way the following will be answer .
Just replace editMode with enty.editMode in your html handlebars.
I was applied this solution to the your jsfiddle it is working fine for me.
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 ....