Adding dynamic row to ngTable not displaying - javascript

I have created an application with ngTable using grouping functionality, The application is working fine but the problem is that when I add dynamic data (rows) to the table, its not reflecting dynamically, unless or otherwise when we click the table title for sorting or when we click the pagination
I have recreated the problem within a plunker, there you can find a button, when clicked one Dynamic row is added but not reflecting within the table
PLUNKER
<body ng-app="main" ng-controller="DemoCtrl">
<button ng-click="addDynamicDatas()">Add Datas</button>
<table ng-table="tableParamsOne" class="table">
<tbody ng-repeat="group in $groups">
<tr class="ng-table-group" ng-hide="group.data[0].role==='None'">
<td>
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
<span ng-class="{'bold-text': user.role=='None'}" ng-show="user.role==='None'"> {{user.name}}</span>
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
</body>
add function
$scope.addDynamicDatas = function()
{
$scope.myDataOne.push({name: "Abcd", age: 10, role: 'Administrator'});
}
Can anyone please tell me some solution for this?

This is probably not an ideal solution but is the only one that I could find.
You can add $scope.tableParamsOne.reload(); after you update your array.
Also currently when your grid is updating when you click a header it is not updating the amount of pages in the pagination. To solve this you can add $scope.tableParamsOne.total($scope.myDataOne.length);

I am also using ng-table(#4.0.0) to make local/client-side insertion/deletion after a successful server submit and got the similar problem of update ng-table. #Bradley's answer above does not work directly. So I chased the source code and found that the reload() called the getData(). After insert a row into the target rowset (ctrl.tbContents.rows in my case), I have to add bellow line in mytbParams definition to make ctrl.tbParams.reload() work:
getData: function() {
return ngTableDefaultGetData(ctrl.tbContents.rows, ctrl.tbParams);
}
Note to inject the ngTableDefaultGetData.

Related

How can my users click a button while it's parent component is re-rendering frequently?

I am having the following setup (the below is simplified pseudocode):
<table>
<tr *ngFor="let upload in uploads">
<td>
<app-progress-bar [progress]="upload.progress"></app-progress-bar>
</td>
<td>
<button (click)="cancelUpload(upload.id)>x</button>
</td>
</tr>
</table>
now, upload will change frequently while progress is being updated. This causes a re-render of the entire row including the button, which makes it very hard to actually trigger the buttons click event. If I click multiple times I'd eventually make it, but I don't think this would make for a good ux...
I think I am must be missing something simple, because I would believe I am not the only person with a similar use case, but I was not able to find any solution - except for moving the button out of the table and having a separate loop through only the array of upload-ids to build the buttons.
I'd highly appreciate if someone could send me on the right track again!
In the end adding the trackBy-function - or in my case trackByRow because I am working with a primeng-table did the trick. I don't fully understand why, because I though trackBy is there to ensure that no other rows are being updated, by my problem was that the actually affected row re-rendered.
But with the trackBy-function in place, when I inspect the dom I see that only the progress-parameter passed to my app-progress-bar component changes, nothing else. And my cancel button works :)
<table>
<tr *ngFor="let upload of uploads; ; let id = index">
<td>
<app-progress-bar [progress]="upload.progress"></app-progress-bar>
</td>
<td>
<button (click)="cancelUpload(id)>x</button>
</td>
</tr>
</table>
If your upload.id is the same as the index , you can use the index to get the id.

X-Editable re-enable after partial re-render

I have the following table on a laravel blade that uses x-editable to update some of its fields (note, this is my first ever PHP project so if there are better ways to do this, please share):
<table id="LinksTable" class="table table-bordered">
<thead>
<tr>
<th>Display</th>
<th>Link Display Name</th>
</tr>
</thead>
<tbody>
<?php $link_settings = Link_setting::whereNotNull('link_address')->get();?>
#foreach($link_settings as $link_setting)
<tr id="linkRow.{{$link_setting->id}}">
<td hidden="true">{{$link_setting->id}}</td>
<td><input id="linkD.{{$link_setting->id}}" name="is_displayed"
checked="{{$link_setting->is_displayed}}"
onChange="OnDisplayChange(this)" type="checkbox"></td>
<td><a href="#" class="listEdit" data-type="text"
data-column="display_name" data-url="./link_settings/update"
data-pk="{{$link_setting->id}}" data-title="change"
data-name="display_name">{{$link_setting->display_name}}</a>
</td>
</tr>
#endforeach
</tbody>
</table>
This renders fine the first time and I can edit the display name on any of the rows with it updating the database correctly.
My problem is that I have an "add" button that creates a new object in the database. After added, I need to reload the table to display this entry as well.
function RefreshTable() {
$('.listEdit').editable("destroy");
$( "#linksTableMainDiv" ).load(location.href + " #LinksTable");
$('.listEdit').editable();
}
The table re-renders fine, but the x-editable breaks, without errors that I can locate.
For anyone coming across this post, I ended up reworking this to add a row via javascript, rather than reloading the table. Adding $('.listEdit').editable(); after the table.appendChild(row) enables all the editable fields in the new row. Assigned data-pk=0 to each, and as part of the update controller, returned the id. I then update the row's data-pk elements upon success of the editable function.

Angular X-Editable makes editable field appear in next table cell

I'm currently trying to implement X-Editable in my Angular project. What I have is a table, with the possibility to add and delete entries and I want to be able to do edit them as well. What I have is the following:
HTML:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Nr.</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="users in $ctrl.users"> //user should be editable
<td>
{{$index + 1}}
</td>
<td editable-text="users">
{{users}}
</td>
<td>
<div class="btn-group">
<span ng-click="$ctrl.removeUser($index)" class="glyphicon glyphicon-trash"></span>
</div>
</td>
</tr>
</tbody>
</table>
<input ng-model="$ctrl.addMe"/>
<button ng-click="$ctrl.addUser()">Add</button>
<p id="errormessage">{{$ctrl.errortext}}</p>
JS:
class UserlistController{
constructor(){
this.users=["John","Peter","Julia"];
this.errortext="";
}
addUser(){
this.errortext="";
if(this.users.indexOf(this.addMe)==-1){
this.users.push(this.addMe);
}else{
this.errortext="The user does already exist!";
}
}
removeUser(user){
this.users.splice(user,1);
this.errortext = "";
}
}
export default UserlistController;
Editing the cell is even possible, so clicking on the cell, entering another value and then clicking on save does its job, but there is one problem: The input field that appears, appears in the next table cell, so it completely messes up the table. Does anybody happen to know, why this happens and how to fix it? You can see what it looks like here. So the x-editable cell gets to the "Action" column and the trash gets out of the table.. Any ideas?
Can't realize how you got the editable-text directive working on a td since to work properly it requires to be added to an anchor (a) tag. Therefore, I think that's what you were missing.
Just tweak your code a bit by adding the directive on an a tag instead:
<td>
<a href="#" editable-text="user">
{{user}}
</a>
</td>
Demo
Update
Here is a custom directive to accommodate the desired behavior as you mentioned in the comments. This version enables you to conceal the text itself behind the form where editing it is possible.

How to add row into the table using Handlebar.js

I am totally new to the handlebar.js so require help from expert to achieve my task.
I have a Html table which is already created through jsp.
Now how can i dynamically add new row to the table using handlebar.js?
Html structure
<table>
<tr>
<td class="one">one</td>
<td class="two">two</td>
<td class="three">three</td>
</tr>
<tr>
<td class="one">check</td>
<td class="two">checked</td>
<td class="three">checking</td>
</tr>
</table>
<form>
#input for first column
#input for second column
#input for third column
</form>
<div class="add">Add New Row</div> //on clicking add new row form gets open and there is save button to add new row
I'm sure this is 3 years, 8 months too late for Kunal, but perhaps someone will benefit.
#Palpatim is correct, a bit of jquery does the trick. I included the following in my handlebars view.
A button:
<button id="btnNewRow">Add New Row</button>
A script append a row to the table:
<script>
$(document).ready(function() {
$('#btnNewRow').on('click', function(evt) {
evt.preventDefault();
$("#approverTable").find('tbody')
.append($('<tr><td><input></td><td><input></td><td><input></td></tr>'))
});
});
</script>
And finally remember you need jquery loaded either from a local copy or via a Content Delivery Network (CDN), so add the following (which I do in my handlebars layout rather than my view).
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

Add selected row from a table to another table with Jquery and MVC3

I am using MVC 3, EF Model First on my project.
In my View I have 4 tables that look likes these.
<div class="questionsForSubjectType">
<table>
<thead>
<tr>
<th>
Title
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
test
</td>
</tr>
</tbody>
</table>
</div>
users should be able to select and add to another table lets say the table is following:
<table id="CustomPickedQuestions>
/* <----- Questions that users chose from the other tables /*
</table>
What I am looking for is that when a users click on a row, the row shall get removed and added to the CustomPickedQuestions, When the row is added to that table, the user should also be able to remove it from CustomPickedQuestions Table and then that row shall go back to the Table it was before.
I now wonder how I can accomplish this with help of client-side jquery scripting.
You've got far too much irrelevant complexity in you code (for the specific question you ask). The title is good, but not the code. Rather than posting your complex project code, create the simplest possible reproduction of the problem using the least amount of code/methods/properties (with common names, that is ProductID, ProductName, etc). part 3 of my tutorial shows how to do this. See http://www.asp.net/mvc/tutorials/javascript/working-with-the-dropdownlist-box-and-jquery/adding-a-new-category-to-the-dropdownlist-using-jquery-ui

Categories

Resources