Hi,
I found the solution , it seems that we must declare dataTable at the top of the file and call the dataTable after like :
MasterDetailChild.js
var _$ligneConventionsTable = $('#MasterDetailChild_Convention_LigneConventionsTable'); var _$ConventionsTable = $('#ConventionsTable');
and
` function getLigneConventions() { dataTable.ajax.reload();
_$ConventionsTable.DataTable().ajax.reload(); } ` I don't understand why ? Hope this will help others
Bernard
Hi,
I found the solution , it seems that we must declare dataTable at the top of the file and call the dataTable after like :
MasterDetailChild.js
var _$ligneConventionsTable = $('#MasterDetailChild_Convention_LigneConventionsTable'); var _$ConventionsTable = $('#ConventionsTable');
and
` function getLigneConventions() { dataTable.ajax.reload();
_$ConventionsTable.DataTable().ajax.reload();
} ` I don't understand why ?
Bernard
Thks very much 😀
to provide additional information, I think the problem comes from the fact that I refresh the master table after closing the masterchild modal
Code in index.js of masterchild
abp.event.on('app.createOrEditLigneConventionModalSaved', function () { getLigneConventions(); $('#ConventionsTable').DataTable().ajax.reload(); });
I think the code
$('#ConventionsTable').DataTable().ajax.reload(); });
is not in the right place , if I comment on the method, I have no issue
or perhaps the masterdetail datatable , i'm not sure
the code is :
`(function () { $(function () {
var _$ligneConventionsTable = $('#MasterDetailChild_Convention_LigneConventionsTable');
var _ligneConventionsService = abp.services.app.ligneConventions;
var $selectedDate = {
startDate: null,
endDate: null,
}
$('.date-picker').on('apply.daterangepicker', function (ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY'));
});
$('.startDate').daterangepicker({
autoUpdateInput: false,
singleDatePicker: true,
locale: abp.localization.currentLanguage.name,
format: 'L',
})
.on("apply.daterangepicker", (ev, picker) => {
$selectedDate.startDate = picker.startDate;
getLigneConventions();
})
.on('cancel.daterangepicker', function (ev, picker) {
$(this).val("");
$selectedDate.startDate = null;
getLigneConventions();
});
$('.endDate').daterangepicker({
autoUpdateInput: false,
singleDatePicker: true,
locale: abp.localization.currentLanguage.name,
format: 'L',
})
.on("apply.daterangepicker", (ev, picker) => {
$selectedDate.endDate = picker.startDate;
getLigneConventions();
})
.on('cancel.daterangepicker', function (ev, picker) {
$(this).val("");
$selectedDate.endDate = null;
getLigneConventions();
});
var _permissions = {
create: abp.auth.hasPermission('Pages.LigneConventions.Create'),
edit: abp.auth.hasPermission('Pages.LigneConventions.Edit'),
'delete': abp.auth.hasPermission('Pages.LigneConventions.Delete')
};
var _createOrEditModal = new app.ModalManager({
viewUrl: abp.appPath + 'App/MasterDetailChild_Convention_LigneConventions/CreateOrEditModal',
scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/MasterDetailChild_Convention_LigneConventions/_CreateOrEditModal.js',
modalClass: 'MasterDetailChild_Convention_CreateOrEditLigneConventionModal'
});
var _viewLigneConventionModal = new app.ModalManager({
viewUrl: abp.appPath + 'App/MasterDetailChild_Convention_LigneConventions/ViewligneConventionModal',
modalClass: 'MasterDetailChild_Convention_ViewLigneConventionModal'
});
var getDateFilter = function (element) {
if ($selectedDate.startDate == null) {
return null;
}
return $selectedDate.startDate.format("YYYY-MM-DDT00:00:00Z");
}
var getMaxDateFilter = function (element) {
if ($selectedDate.endDate == null) {
return null;
}
return $selectedDate.endDate.format("YYYY-MM-DDT23:59:59Z");
}
var dataTable = _$ligneConventionsTable.DataTable({
paging: true,
serverSide: true,
processing: true,
listAction: {
ajaxFunction: _ligneConventionsService.getAll,
inputFilter: function () {
return {
filter: $('#MasterDetailChild_Convention_LigneConventionsTableFilter').val(),
//intituleFilter: $('#MasterDetailChild_Convention_IntituleFilterId').val(),
//conventionIdFilter: $('#MasterDetailChild_Convention_LigneConventionsId').val()
};
}
},
columnDefs: [
{
className: 'control responsive',
orderable: false,
render: function () {
return '';
},
targets: 0
},
{
width: 120,
targets: 1,
data: null,
orderable: false,
autoWidth: false,
defaultContent: '',
rowAction: {
cssClass: 'btn btn-brand dropdown-toggle',
text: '<i class="fa fa-cog"></i> ' + app.localize('Actions') + ' <span class="caret"></span>',
items: [
{
text: app.localize('View'),
action: function (data) {
_viewLigneConventionModal.open({ id: data.record.ligneConvention.id });
}
},
{
text: app.localize('Edit'),
visible: function () {
return _permissions.edit;
},
action: function (data) {
_createOrEditModal.open({ id: data.record.ligneConvention.id });
}
},
{
text: app.localize('Delete'),
visible: function () {
return _permissions.delete;
},
action: function (data) {
deleteLigneConvention(data.record.ligneConvention);
}
}]
}
},
{
targets: 2,
data: "ligneConvention.intitule",
name: "intitule"
},
{
targets: 3,
data: 'ligneConvention.reference',
name: 'reference',
},
{
targets: 4,
data: 'ligneConvention.prixU',
name: 'prixU',
},
{
targets: 5,
data: 'ligneConvention.unite',
name: 'unite',
},
{
targets: 6,
data: 'ligneConvention.totalHT',
name: 'Totalht',
render: $.fn.dataTable.render.number(',', ',', 2)
},
{
targets: 7,
data: 'ligneConvention.bpf',
name: 'bpf',
render: function (data, type, row) {
if (data === "NA") {
if (row.ligneConvention.autreProduitBPF === 0) {
return '<span class="badge badge-light-warning">' + "NC" + '</span>';
}
return '<span class="badge badge-light-primary">' + row.ligneConvention.autreProduitBPF + '</span>';
}
return '<span class="badge badge-light-info">' + row.ligneConvention.bpf + '</span>';
},
},
]
});
function getLigneConventions() {
dataTable.ajax.reload();
/* $('#ConventionsTable').DataTable().ajax.reload();*/
}
function deleteLigneConvention(ligneConvention) {
abp.message.confirm(
'',
app.localize('AreYouSure'),
function (isConfirmed) {
if (isConfirmed) {
_ligneConventionsService.delete({
id: ligneConvention.id
}).done(function () {
getLigneConventions(true);
$('#ConventionsTable').DataTable().ajax.reload();
abp.notify.success(app.localize('SuccessfullyDeleted'));
});
}
}
);
}
$('#MasterDetailChild_Convention_ShowAdvancedFiltersSpan').click(function () {
$('#MasterDetailChild_Convention_ShowAdvancedFiltersSpan').hide();
$('#MasterDetailChild_Convention_HideAdvancedFiltersSpan').show();
$('#MasterDetailChild_Convention_AdvacedAuditFiltersArea').slideDown();
});
$('#MasterDetailChild_Convention_HideAdvancedFiltersSpan').click(function () {
$('#MasterDetailChild_Convention_HideAdvancedFiltersSpan').hide();
$('#MasterDetailChild_Convention_ShowAdvancedFiltersSpan').show();
$('#MasterDetailChild_Convention_AdvacedAuditFiltersArea').slideUp();
});
$('#CreateNewLigneConventionButton').click(function () {
_createOrEditModal.open();
});
$('#ExportToExcelButton').click(function () {
_ligneConventionsService
.getLigneConventionsToExcel({
filter: $('#LigneConventionsTableFilter').val(),
intituleFilter: $('#MasterDetailChild_Convention_IntituleFilterId').val()
})
.done(function (result) {
app.downloadTempFile(result);
});
});
abp.event.on('app.createOrEditLigneConventionModalSaved', function () {
getLigneConventions();
});
$('#GetLigneConventionsButton').click(function (e) {
e.preventDefault();
getLigneConventions();
});
$(document).keypress(function (e) {
if (e.which === 13) {
getLigneConventions();
}
});
$('.reload-on-change').change(function (e) {
getLigneConventions();
});
$('.reload-on-keyup').keyup(function (e) {
getLigneConventions();
});
$('#btn-reset-filters').click(function (e) {
$('.reload-on-change,.reload-on-keyup,#MyEntsTableFilter').val('');
getLigneConventions();
});
});
})();
Thks `
Hi @Bernard,
We have completed our work on the Datatable 2.0 update. You can reach the updated version of Datatable when version 13.2.0 is released by updating it.
I don't think this error is related to that. Can you run
yarn create-bundles? Does the error happen on a specific page or all the datatable pages?
No this error only appears on 1 datatable
here is the code on the index.js file
` (function () { $(function () {
var _$conventionsTable = $('#ConventionsTable');
var _conventionsService = abp.services.app.conventions;
var $selectedDate = {
startDate: null,
endDate: null,
}
$('.date-picker').on('apply.daterangepicker', function (ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY'));
});
$('.startDate').daterangepicker({
autoUpdateInput: false,
singleDatePicker: true,
locale: abp.localization.currentLanguage.name,
format: 'L',
})
.on("apply.daterangepicker", (ev, picker) => {
$selectedDate.startDate = picker.startDate;
getConventions();
})
.on('cancel.daterangepicker', function (ev, picker) {
$(this).val("");
$selectedDate.startDate = null;
getConventions();
});
$('.endDate').daterangepicker({
autoUpdateInput: false,
singleDatePicker: true,
locale: abp.localization.currentLanguage.name,
format: 'L',
})
.on("apply.daterangepicker", (ev, picker) => {
$selectedDate.endDate = picker.startDate;
getConventions();
})
.on('cancel.daterangepicker', function (ev, picker) {
$(this).val("");
$selectedDate.endDate = null;
getConventions();
});
var _permissions = {
create: abp.auth.hasPermission('Pages.Conventions.Create'),
edit: abp.auth.hasPermission('Pages.Conventions.Edit'),
'delete': abp.auth.hasPermission('Pages.Conventions.Delete')
};
var _createOrEditModal = new app.ModalManager({
viewUrl: abp.appPath + 'App/Conventions/CreateOrEditModal',
scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/Conventions/_CreateOrEditModal.js',
modalClass: 'CreateOrEditConventionModal'
});
var _viewConventionModal = new app.ModalManager({
viewUrl: abp.appPath + 'App/Conventions/ViewconventionModal',
modalClass: 'ViewConventionModal'
});
var getDateFilter = function (element) {
if ($selectedDate.startDate == null) {
return null;
}
return $selectedDate.startDate.format("YYYY-MM-DDT00:00:00Z");
}
var getMaxDateFilter = function (element) {
if ($selectedDate.endDate == null) {
return null;
}
return $selectedDate.endDate.format("YYYY-MM-DDT23:59:59Z");
}
var dataTable = _$conventionsTable.DataTable({
paging: true,
serverSide: true,
processing: true,
listAction: {
ajaxFunction: _conventionsService.getAll,
inputFilter: function () {
return {
filter: $('#ConventionsTableFilter').val(),
minDateFilter: getDateFilter($('#MinDateFilterId')),
maxDateFilter: getMaxDateFilter($('#MaxDateFilterId')),
referenceFilter: $('#ReferenceFilterId').val(),
numConvFilter: $('#NumConvFilterId').val(),
personDisplayPropertyFilter: $('#PersonDisplayPropertyFilterId').val()
};
}
},
columnDefs: [
{
className: 'control responsive',
orderable: false,
render: function () {
return '';
},
targets: 0
},
{
width: 120,
targets: 1,
data: null,
orderable: false,
autoWidth: false,
defaultContent: '',
rowAction: {
cssClass: 'btn btn-brand dropdown-toggle',
text: '<i class="fa fa-cog"></i> ' + app.localize('Actions') + ' <span class="caret"></span>',
items: [
{
text: app.localize('View'),
action: function (data) {
_viewConventionModal.open({ id: data.record.convention.id });
}
},
{
text: app.localize('Edit'),
visible: function () {
return _permissions.edit;
},
action: function (data) {
_createOrEditModal.open({ id: data.record.convention.id });
}
},
{
text: app.localize('Delete'),
visible: function () {
return _permissions.delete;
},
action: function (data) {
deleteConvention(data.record.convention);
}
}]
}
}
, {
className: 'details-control',
targets: 2,
orderable: false,
autoWidth: false,
visible: abp.auth.hasPermission('Pages.LigneConventions'),
render: function () {
return `<button class="btn btn-light-primary font-weight-bold mr-2 btn-sm Edit_LigneConvention_ConventionId">${app.localize("EditLigneConvention")}</button>`;
}
}
,
{
targets: 3,
data: "convention.date",
name: "date",
render: function (date) {
if (date) {
return moment(date).format('L');
}
return "";
}
},
{
targets: 4,
data: "personDisplayProperty",
name: "personFk.displayProperty"
},
{
targets: 5,
data: "convention.reference",
name: "reference"
},
{
targets: 6,
data: "convention.numConv",
name: "numConv"
},
{
targets: 7,
data: 'convention.totalHT',
name: 'totalHT',
render: $.fn.dataTable.render.number(',', ',', 2)
},
{
targets: 8,
data: "convention.modePaiement",
name: "modePaiement",
render: function (modePaiement) {
return app.localize('Enum_ModePaiement_' + modePaiement);
}
},
]
});
function getConventions() {
dataTable.ajax.reload();
}
function deleteConvention(convention) {
abp.message.confirm(
'',
app.localize('AreYouSure'),
function (isConfirmed) {
if (isConfirmed) {
_conventionsService.delete({
id: convention.id
}).done(function () {
getConventions(true);
abp.notify.success(app.localize('SuccessfullyDeleted'));
});
}
}
);
}
$('#ShowAdvancedFiltersSpan').click(function () {
$('#ShowAdvancedFiltersSpan').hide();
$('#HideAdvancedFiltersSpan').show();
$('#AdvacedAuditFiltersArea').slideDown();
});
$('#HideAdvancedFiltersSpan').click(function () {
$('#HideAdvancedFiltersSpan').hide();
$('#ShowAdvancedFiltersSpan').show();
$('#AdvacedAuditFiltersArea').slideUp();
});
$('#CreateNewConventionButton').click(function () {
_createOrEditModal.open();
});
$('#ExportToExcelButton').click(function () {
_conventionsService
.getConventionsToExcel({
filter: $('#ConventionsTableFilter').val(),
minDateFilter: getDateFilter($('#MinDateFilterId')),
maxDateFilter: getMaxDateFilter($('#MaxDateFilterId')),
referenceFilter: $('#ReferenceFilterId').val(),
numConvFilter: $('#NumConvFilterId').val(),
personDisplayPropertyFilter: $('#PersonDisplayPropertyFilterId').val()
})
.done(function (result) {
app.downloadTempFile(result);
});
});
abp.event.on('app.createOrEditConventionModalSaved', function () {
getConventions();
});
$('#GetConventionsButton').click(function (e) {
e.preventDefault();
getConventions();
});
$(document).keypress(function (e) {
if (e.which === 13) {
getConventions();
}
});
$('.reload-on-change').change(function (e) {
getConventions();
});
$('.reload-on-keyup').keyup(function (e) {
getConventions();
});
$('#btn-reset-filters').click(function (e) {
$('.reload-on-change,.reload-on-keyup,#MyEntsTableFilter').val('');
getConventions();
});
var currentOpenedDetailRow;
function openDetailRow(e, url) {
var tr = $(e).closest('tr');
var row = dataTable.row(tr);
if (row.child.isShown()) {
row.child.hide();
tr.removeClass('shown');
currentOpenedDetailRow = null;
} else {
if (currentOpenedDetailRow)
currentOpenedDetailRow.child.hide();
$.get(url).then((data) => {
row.child(data).show();
tr.addClass('shown');
currentOpenedDetailRow = row;
});
}
}
_$conventionsTable.on('click', '.Edit_LigneConvention_ConventionId', function () {
var tr = $(this).closest('tr');
var row = dataTable.row(tr);
openDetailRow(this, "/App/MasterDetailChild_Convention_LigneConventions?ConventionId=" + row.data().convention.id);
});
});
})();
`
How can I find selected lookup id ?
Hi Its possible to upgrade to the last version and upgrade my previous project version 13.0.0 using WinMerge ? Or different way ?
No Should I ? Besides I noticed that the version is old how to do / should we update it
Additional infos
