Hi,
I want to create list of person using datatable-editable, but it seems the datatables can't work if we use ng-repeat, is there any js need to be setup for datatable-editable for ng-repeat? i already add 2 js (datatables.bootstrap.js & datatables.min.js)
HTML
<table class="table table-striped table-hover table-bordered" id="sample_editable_1" >
<thead>
<tr>
<th> Username </th>
<th> Full Name </th>
<th> Email Address </th>
<th> Notes </th>
<th> Edit </th>
<th> Delete </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in vm.persons">
<td>{{person.name}}</td>
<td>{{person.surname}}</td>
<td>{{person.emailAddress}}</td>
<td></td>
<td>
<a class="edit" href="javascript:;"> Edit </a>
</td>
<td>
<a class="delete" href="javascript:;"> Delete </a>
</td>
</tr>
<tr>
<td> lisa </td>
<td> Lisa ong </td>
<td> [email protected] </td>
<td class="center"> power user </td>
<td>
<a class="edit" href="javascript:;"> Edit </a>
</td>
<td>
<a class="delete" href="javascript:;"> Delete </a>
</td>
</tr>
<tr>
<td> lisa </td>
<td> Lisa Wong </td>
<td> [email protected] </td>
<td class="center"> new user </td>
<td>
<a class="edit" href="javascript:;"> Edit </a>
</td>
<td>
<a class="delete" href="javascript:;"> Delete </a>
</td>
</tr>
</tbody>
</table>
JS
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
oTable.fnDraw();
}
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<a class="edit" href="">Save</a>';
jqTds[5].innerHTML = '<a class="cancel" href="">Cancel</a>';
}
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 5, false);
oTable.fnDraw();
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
oTable.fnDraw();
}
var table = $('#sample_editable_1');
var oTable = table.dataTable({
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
"pageLength": 5,
"language": {
"lengthMenu": " _MENU_ records"
},
"columnDefs": [{ // set default column settings
'orderable': true,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"order": [
[0, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = $("#sample_editable_1_wrapper");
var nEditing = null;
var nNew = false;
$('#sample_editable_1_new').click(function (e) {
e.preventDefault();
if (nNew && nEditing) {
if (confirm("Previose row not saved. Do you want to save it ?")) {
saveRow(oTable, nEditing); // save
$(nEditing).find("td:first").html("Untitled");
nEditing = null;
nNew = false;
} else {
oTable.fnDeleteRow(nEditing); // cancel
nEditing = null;
nNew = false;
return;
}
}
var aiNew = oTable.fnAddData(['', '', '', '', '', '']);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
nNew = true;
});
table.on('click', '.delete', function (e) {
e.preventDefault();
if (confirm("Are you sure to delete this row ?") == false) {
return;
}
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
alert("Deleted! Do not forget to do some ajax to sync with backend :)");
});
table.on('click', '.cancel', function (e) {
e.preventDefault();
if (nNew) {
oTable.fnDeleteRow(nEditing);
nEditing = null;
nNew = false;
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
table.on('click', '.edit', function (e) {
e.preventDefault();
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
result: (only 2 static record will be shown in datatables)
lisa Lisa ong <a href="mailto:[email protected]">[email protected]</a> power user Edit Delete
lisa Lisa Wong <a href="mailto:[email protected]">[email protected]</a> new user Edit Delete
That worked.
Thank you so much
Hi,
I am new to ASP.Net Zero and ABP
I want to add 2 input fields using date-picker & date-range-picker in person.phonebook page, it works fine for date-range-picker but not for date-picker,
is it possible to add datepicker in tablescrollable? because the date-picker also works fine if i put it outside from the table
<div class="list-group-item" ng-repeat="person in vm.persons" ng-class="{'person-editing':person==vm.editingPerson}">
<h4 class="list-group-item-heading">
{{person.name}} {{person.surname}}
<span class="person-buttons">
<button ng-click="vm.editPerson(person)" title="@L("Edit")" class="btn btn-circle btn-icon-only green">
<i class="icon-pencil"></i>
</button>
<button ng-if="vm.permissions.deletePerson" ng-click="vm.deletePerson(person)" title="@L("Delete")" class="btn btn-circle btn-icon-only red">
<i class="icon-trash"></i>
</button>
</span>
</h4>
<p class="list-group-item-text">
{{person.emailAddress}}
</p>
<div class="table-scrollable" ng-if="person==vm.editingPerson">
<table class="table table-hover">
<thead>
<tr>
<th style="width:10%"></th>
<th style="width:15%">@L("Type")</th>
<th style="width:15%">@L("PhoneNumber")</th>
<th style="width:20%">@L("ContactName")</th>
<th style="width:20%">@L("CompanyName")</th>
<th style="width:20%">@L("DOB")</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="phone in person.phones">
<td>
<button ng-click="vm.deletePhone(phone, person)" class="btn btn-sm btn-default">
<i class="icon-trash"></i>
</button>
</td>
<td>{{vm.getPhoneTypeAsString(phone.type)}}</td>
<td>{{phone.number}}</td>
<td>{{phone.companyname}}</td>
<td>{{phone.contactname}}</td>
<td>{{phone.dob}}</td>
</tr>
<tr>
<td>
<button ng-click="vm.addPhone(person.newPhone, person)" class="btn btn-sm green">
<i class="fa fa-floppy-o"></i>
</button>
</td>
<td>
<select name="Type" ng-model="person.newPhone.type">
<option value="0">@L("PhoneType_Mobile")</option>
<option value="1">@L("PhoneType_Home")</option>
<option value="2">@L("PhoneType_Business")</option>
</select>
</td>
<td><input type="text" name="Number" ng-model="person.newPhone.number" /></td>
<td><input type="text" name="CompanyName" ng-model="person.newPhone.companyname" /></td>
</tr>
<tr>
<td></td>
<td><input type="text" name="ContactName" ng-model="person.newPhone.contactname" /></td>
<td><input date-range-picker type="text" options="vm.dateRangeOptions" min="vm.dateRangeOptions.min" max="vm.dateRangeOptions.max" class="form-control date-picker" ng-model="vm.dateRangeModel" /></td>
<td>
<div class="form-group">
<input class="form-control date-picker" type="text" value="" ngmodel= "person.newPhone.dob"/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
thanks
Hi,
Sorry, please ignore this. I found the culprit.. I define '$stateParams' instead of '$state' at the top of index.js. Thanks.
Hi,
I am trying to do a similar thing like Change Text options under Language menu. However, the system seems ignoring the $State.go statement. I have managed to access the page by typing the URL manually on the browser (eg. <a class="postlink" href="http://localhost:6240/Application#/generalParams/Items/1">http://localhost:6240/Application#/gene ... ms/Items/1</a>). But, it cannot be accessed via the ng-click. I have debugged the index.js and managed to get to the $State.go statement but system just ignored it.
Below is a snapshot of the App.js and Index.js of the originating page. Please let me know if I'm missing any setup for the Angular routing. Thanks.
App.js
...
if (abp.auth.hasPermission('Pages.Params.GeneralParams.Maintain')) {
$stateProvider.state('parameterItems', {
url: '/generalParams/Items/:paramId',
templateUrl: '~/App/common/views/generalParams/Items.cshtml',
menu: 'Params.GeneralParams'
});
}
...
Index.js
...
vm.maintainParamItems = function (paramHeader) {
var paramIdString = paramHeader.id.toString();
$state.go('parameterItems', {
paramId: paramIdString
});
}
...
Hi,
You are right. I need to refresh the selectpicker to display the ComboBox options. It's working now. Thanks for your help.
Cheers, Teddy
Hi,
I'm trying to convert the normal ComboBox for Editions field in the Create Tenant screen to ComboBox with Live Search similar to the Language Text screen. However, it's giving me a blank entry. Please help me in pointing up the problem. Thanks.
The original code is:
<div class="form-group form-md-line-input form-md-floating-label no-hint">
<select id="TenantEditionSelectionCombobox" class="form-control edited"
ng-options="vm.getEditionValue(item) as item.displayText for item in vm.editions"
ng-model="vm.tenant.editionId">
</select>
<label for="TenantEditionSelectionCombobox">@L("Edition")</label>
</div>
And, the revised code is
<div class="form-group">
<label for="TenantEditionSelectionCombobox">@L("Edition")</label>
<select id="TenantEditionSelectionCombobox" class="form-control bs-select"
ng-model="vm.tenant.editionId"
ui-jq="selectpicker"
data-live-search="true">
<option ng-repeat="item in vm.editions"
value="{{vm.getEditionValue(item)}}">
{{item.displayText}}
</option>
</select>
</div>