I'm trying to understand why when I click on the button below I get three different objects before it says that invoice is undefined.
<tr :key="invoice" v-for="(invoice, index) in invoices">
<td><button #click.prevent="openEdit(index)" Edit Invoice</button></td>
</tr>
openEdit(index) {
var invoice = this.invoices.splice(index, 1)[0];
this._beforeEditingCache = Object.assign({}, invoice);
console.log(invoice);
Bus.$emit('editting', { invoice: invoice, phase: this.phase, editModalName: this.editModalName });
},
After a long time i think i understood that question
You want to open a modal with the values of table row that gets clicked.
*I made a jsfiddle for this.Take a look here :https://jsfiddle.net/Roland1993/eywraw8t/5415/
That fiddle is very simple.I suggest you to use the modal as child component.
But if you using vue it would be vuetiful to use vuetify.Take a look to this table which includes edit,delete and add new item. click here to see
Related
I would like to populate a table with visible rows in Svelte.
My current attempt relies on a {#if variable} test, where the rendered row updates the variable. Unfortunately, the test does not appear to react to changes to the variable. Perhaps this is as designed but the documentation does not appear to address this. Essentially:
<table>
<tbody>
{#each rows as row}
{#if renderIt==true}
<tr use:updateRenderIt>
<td>cell</td>
</tr>
{/if}
{/each}
</tbody>
</table>
I think my understanding of the timing is lacking :(. Perhaps the {#if} block cannot react to each renderIt change. There are quite a few examples of {#if} blocks, but none appear to rely on a variable which is changed within the block.
There is a running example in the Svelte playground. The console divider can be moved vertically to change the viewport dimensions.
If someone knows of a way to achieve this it would be appreciated! I can do it in traditional Javascript, but my Svelte expertise is limited :).
What I'm assuming you want is to have a state on each row when it is visible.
To do so you will need to store some data with your row, so instead of your row being a list of numbers and a single boolean to say if all rows are visible or not, it will be a list of objets that have a property visible:
let rows = [];
for (let i = 0; i < 100; i++) {
rows.push({
index: i,
visible: false,
});
};
Next, to capture when visibility changes on those rows, use Intersection Observer API:
let observer = new IntersectionObserver(
(entries, observer) => {
console.log(entries);
}
);
And use a svelte action to add that observer to elements:
<script>
...
let intersect = (element) => {
observer.observe(element);
};
</script>
<table>
<tbody>
{#each rows as row (row.index)}
<tr
use:intersect>
<td>{row.visible}</td>
</tr>
{/each}
</tbody>
</table>
To pass the intersecting state back to the element throw a custom event on it:
let observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
entry.target.dispatchEvent(
new CustomEvent("intersect", { detail: entry.isIntersecting })
);
});
}
);
And finally capture that event and modify the state:
<tr use:intersect
on:intersect={(event) => (row.visible = event.detail)} >
<td>{row.visible}</td>
</tr>
To render rows up to how many can fit on screen you could make the defaut state visible: true, and then wrap the element with an {#if row.visible}<tr .... </tr>{/if}. After the first event you would then remove the observer from the element using observer.unobserve by either updating the svelte action or in the observer hook.
I have datatable with action onclick delete function that deleting the row.
How can i display "no data available" in case i delete all the row?
Here's my code.
{
"data": "Action",
render: (data, type, row) => {
return `<div class="actionIcon"><a id="viewExamination" onclick="individualDetails('${row["NAME"]}', '${row["BIRTHDAY"]}', '${row["Phone Number"]}')" data-toggle="modal" data-target="#asdffdsddd" data-backdrop="false" data-keyboard="false"><i class="fa-solid fa-outdent"></i></a><a id="delThisData" onclick="deleteDetailsNewHired()"><i class="fas fa-trash-alt"></i> </a> </div>`;
}
}
function deleteDetailsNewHired() {
$("#delThisData").closest('tr').remove();
}
There is a difference between the data stored inside the DataTables object and the data you can see displayed in the web page. If you only delete a <tr> from the HTML, you have not deleted that row from the underlying DataTable.
See the DataTables API function row().remove().
Note the use of the draw() function as well, to re-draw the table data so you actually see the resuts of the remove() operation reflected in the HTML.
After that, you can take a look at the language.emptyTable option (which you set once as part of the table definition) if you want to use a custom message. By default, the message you see is:
No data available in table
But it can be anything you want.
This is a similar overall issue as noted here. It is important to understand the difference between the data stored in your DataTable and the data which happens to be rendered on the currently visible web page.
I have an Angular2 application which is getting Json data and displaying it as a table. When I try to refresh / Update it with new data, table is showing old data only.
getting data through service like below:
#Input()
participants:Participant[];
testClasses: TestClass[] = [];
ngOnChanges() {
let codes="";
for (let item of this.participants)
{
codes = codes.concat(item.Id).concat(",");
}
this.buildTable(codes);
}
buildTable(codes){
let url = this.serverUrl + "api/test?codes=" + codes;
// passing input participants as parameter in url
this.testService.getData(url)
.subscribe(data => this.onDataUpdate(data));
}
onDataUpdate(data: any) {
this.testClasses = data;
// here I am getting new/refreshed data.
}
displying in table like below:
<table id="testGrid">
<tr *ngFor="let testClass of testClasses">
<td>{{testClass.name}}</td>
<td *ngFor="let t of (testClass.Score)">
{{ t }}
</td>
</tr>
</table>
When page loads data first time, table is showing data, but when I try to refresh data, I can see new refreshed data in onDataUpdate funcion, but html table is not refreshing view with new data.
Any idea or help would be much appreciated.
I tried below link:
https://github.com/swimlane/ngx-datatable/issues/255
Angular 2 - View not updating after model changes
I made my own example and I was able to reproduce the behaviour.
So what going on here it's that you use an array as input. (participants:Participant).
And after what you said about your checkboxes its seems that you mutate your array. It has for effect that the reference of the array is still the same therefor angular don't detect a change. (by the way I don't know if it's an expected behaviour).
A solution to your problem could be to create a new array of participants at each change on checkboxes.
Something like that:
this.participants = this.participants.slice(0)
You could also look at this answer: Angular2 change detection: ngOnChanges not firing for nested object
I have two components inside a parent, one component shows me a list, and I want the other component to show me the details of an item of the list. I'm using the List of this demo https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages
since I have these two components
<list-view data="[[fileData]]" on-item-click="_onItemClick"></list-view>
<full-view on-close="_onClose"></full-view>
I would like to pass the Id of an item clicked on list-view to the full-view. So what would be the best way to execute an event on "full-view" when an item of "list-view" is clicked? I need to pass information from list-view to full-view.
Thank you.
What about of databinding? #SG_ answer is ok, but it can does using simple databinding, as follows:
<list-view data="[[fileData]]" on-item-click="_onItemClick" selected-id="{{idSelected}}"></list-view>
<full-view on-close="_onClose" selected-id="{{idSelected}}"></full-view>
Each element models should have a property "Selected ID", to make it possible to perform databinding. In <full-view> you must need to add a property as follows:
selectedId:{type:String, observer:"selectedIdChanged"}
So, when selectedId changes in <list-view> will also change in <full-view>
Now, you only need to add a new function in <full-view> to do something with this changed selectedId
selectedIdChanged: function(newValue, oldValue){
if(newValue!= undefined && newValue!=null){
//do something with selected Id
}
},
You could give an id for both list-view and full-view, then define & set data attribute/property for <full-view> from the _onItemClick.
<list-view id='l_view' data="[[fileData]]" on-item-click="_onItemClick"></list-view>
<full-view id="f_view" data="{}" on-close="_onClose"></full-view>
And in the script of parent.
_onItemClick: function() {
this.$.f_view.data = this.$.l_view.selected;//or any attribute of the selected item
this.$.pages.selected = 1;
},
I've loaded an ASP.NET MVC viewModel into KnockoutJS using ko.mapping.fromJS(Model).
My viewModel looks something like this:
public IEnumerable<FunkyThing>funkyThings;
public FunkyThing selectedFunkyThing;
I've then got in my HTML View a table which looks something like this
<tbody data-bind="foreach: funkyThings">
<tr>
<td data-bind="text:name"></td>
<td data-bind="text:funkiness"></td>
<td>
</td>
</tr>
</tbody>
and all is good with this table. Clicking the select funky thing link happily calls the selectFunkyThing function:
model.selectFunkyThing= function (funkyThing) {
window.location = '#Url.Action(MVC.FunkyThingController.Index())' + "?funkyThingID=" + funkyThing.funkyThingID();
};
which in turn refreshes the page. The MVC viewmodels is reloaded and selectedFunkyThing is populated with the selected FunkyThing and the knockout view models are then re-read from the MVC viewmodel. So far so good.
I then wanted to update the table to highlight the selected entry.
So I updated the tr line as follows:
<tr data-bind="css:{'selected': $root.isSelected()}">
and created the new knockout function:
model.isSelected = function (funkyThing) {
return funkyThing.funkyThingID== model.selectedFunkyThing.funkyThingID;
};
but... it's not working.
Chrome throws a javascript exception stating that the FunkyThing parameter is undefined.
Technically I figure I could solve it by changing the MVC viewModel to actually set a isSelected on each FunkyThing within the array. However I figure there's got to be away of doing this from Knockout?
You were close! I added the ko.utils.unwrapObservable call because I bet the funkyThingID is an observable and not just a straight property - you did this yourself in your selectFunkyThing function. You could just execute them as well. I like the verbosity of unwrap though.
model.isSelected = function (funkyThing) {
var thisId = ko.utils.unwrapObservable(model.selectedFunkyThing.funkyThingID);
return ko.utils.unwrapObservable(funkyThing.funkyThingID) == thisId;
};
and then in your document you actually have to execute this function when ko parses the binding
<tr data-bind="css:{'selected': $root.isSelected($data)}">
Are those properties not both observables, so you need to reference them as functions? You also need to make your function a computed observable, I think:
model.isSelected = ko.computed(function (funkyThing) {
return funkyThing().funkyThingID() == model.selectedFunkyThing().funkyThingID();
});