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
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,
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,
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>