It works!!!! Thanks Ryancyq!
Sorry, i didn't understand
@ryancyq, When I reopen the modal, the modalId gets the same, I think it sould be remove. How I do that?
Hi,
I have a RowAction with 2 buttons, View and Delete.
After i used "scrollX": true, when I have one row, the action Deletar(Delete) hidden.
How Can I Fix this?
var dataTable = _$titulosPagarPagamentosTable.DataTable({
paging: true,
serverSide: true,
processing: true,
responsive: false,
"scrollX": true,
listAction: {
ajaxFunction: _titulosPagarPagamentosService.getAll,
inputFilter: function () {
return {
filter: $('#TitulosPagarPagamentosTableFilter').val(),
tipoPagamentoFilter: $('#TipoPagamentoFilterId').val(),
minValorPrincipalFilter: $('#MinValorPrincipalFilterId').val(),
maxValorPrincipalFilter: $('#MaxValorPrincipalFilterId').val(),
minAcrescimoFilter: $('#MinAcrescimoFilterId').val(),
maxAcrescimoFilter: $('#MaxAcrescimoFilterId').val(),
minDescontoFilter: $('#MinDescontoFilterId').val(),
maxDescontoFilter: $('#MaxDescontoFilterId').val(),
minDataPagamentoFilter: getDateFilter($('#MinDataPagamentoFilterId')),
maxDataPagamentoFilter: getDateFilter($('#MaxDataPagamentoFilterId')),
contaObservacaoFilter: $('#ContaObservacaoFilterId').val(),
indiceDescricaoFilter: $('#IndiceDescricaoFilterId').val(),
tituloPagarTituloFilter: $('#TituloPagarTituloFilterId').val(),
tituloId: $('#tituloId').val(),
};
}
},
columnDefs: [
{
width: 120,
targets: 0,
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) {
_viewTituloPagarModal.open({ data: data.record });
}
},
{
text: app.localize('Delete'),
visible: function () {
return _permissions.delete;
},
action: function (data) {
deleteTituloPagarPagamento(data.record.tituloPagarPagamento);
}
}]
}
},
{
targets: 1,
data: "tituloPagarPagamento.tipoPagamento",
render: function (tipoPagamento) {
return app.localize('Enum_tipoPagamento_' + tipoPagamento);
}
},
{
targets: 2,
data: "tituloPagarPagamento.valorPrincipal",
render: function (valor) {
if (valor) {
return "R$ " + valor.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
return "R$ 0";
}
},
{
targets: 3,
data: "tituloPagarPagamento.acrescimo",
render: function (valor) {
if (valor) {
return "R$ " + valor.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
return "R$ 0";
}
},
{
targets: 4,
data: "tituloPagarPagamento.desconto",
render: function (valor) {
if (valor) {
return "R$ " + valor.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
return "R$ 0";
}
},
{
targets: 5,
data: "tituloPagarPagamento.dataPagamento",
render: function (dataPagamento) {
if (dataPagamento) {
return moment(dataPagamento).format('L');
}
return "";
}
},
{
targets: 6,
data: "contaObservacao"
},
{
targets: 7,
data: "indiceDescricao"
}
]
});
Hi Ismcadas,
No, i didn't. I Have no ideia how can i fix this.
My Version: 5.2 asp.core + Js
This is the call to modalform
var _Pagar = new app.ModalManager({
viewUrl: abp.appPath + 'App/TitulosPagarPagamentos/index',
scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/TitulosPagarPagamentos/Index.js',
modalClass: 'TituloPagarPagamentoTableModal'
});
Yes, I'm loading in.index.cshtml page
@using LupeERP.Authorization
@using LupeERP.Web.Areas.App.Models.TitulosPagarPagamentos
@using LupeERP.Web.Areas.App.Models.Common.Modals
@using LupeERP.Web.Areas.App.Startup
@model TitulosPagarPagamentosViewModel
@{
ViewBag.CurrentPageName = AppPageNames.Common.TitulosPagar;
}
@Html.Partial("~/Areas/App/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel(L("TitulosPagarPagamentosHeaderInfo")))
@section Scripts {
<script abp-src="/view-resources/Areas/App/Views/TitulosPagarPagamentos/Index.js" asp-append-version="true"></script>
}
<input type="hidden" name="tituloId" id="tituloId" value="@Model.TituloId" />
<div class="m-subheader">
<div class="row align-items-center">
<div class="mr-auto col-sm-12 col-md-6">
<h3 class="m-subheader__title m-subheader__title--separator">
<span> @L("PagamentosDoTitulo") : @Model.TituloId</span>
</h3>
</div>
<div class="col-sm-12 col-md-6 text-right">
@if (IsGranted(AppPermissions.Pages_TitulosPagarPagamentos_Create))
{
<button id="CreateNewTituloPagarPagamentoButton" class="btn btn-primary blue"><i class="fa fa-plus"></i> @L("CreateNewTituloPagarPagamento")</button>
}
</div>
</div>
</div>
<div class="m-content">
<div class="m-portlet m-portlet--mobile">
<div class="m-portlet__body">
<div class="m-form m-form--label-align-right">
<div class="row align-items-center m--margin-bottom-10">
<div class="col-xl-12">
<div class="form-group m-form__group align-items-center">
<div class="input-group">
<input type="text" id="TitulosPagarPagamentosTableFilter" class="form-control m-input" placeholder="@L("SearchWithThreeDot")" value="@Model.FilterText">
<span class="input-group-btn">
<button id="GetTitulosPagarPagamentosButton" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div id="AdvacedAuditFiltersArea" style="display: none" class="row m--margin-bottom-10">
<div class="col-md-12">
<div class="m-separator m-separator--dashed"></div>
</div>
<div class="col-md-3">
<label for="TipoPagamentoFilterId">@L("TipoPagamento")</label>
<select class="form-control" name="TipoPagamentoFilter" id="TipoPagamentoFilterId">
<option value="-1">@L("All")</option>
<option value="1">@L("Enum_tipoPagamento_1")</option>
<option value="2">@L("Enum_tipoPagamento_2")</option>
<option value="2">@L("Enum_tipoPagamento_2")</option>
<option value="4">@L("Enum_tipoPagamento_4")</option>
<option value="5">@L("Enum_tipoPagamento_5")</option>
<option value="6">@L("Enum_tipoPagamento_6")</option>
</select>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="MinValorPrincipalFilterId">@L("MinMax") @L("ValorPrincipal")</label>
<div class="input-group">
<input type="number" class="form-control m-input" placeholder="@L("MinValue")" name="minValorPrincipalFilter" id="MinValorPrincipalFilterId" />
<input type="number" class="form-control m-input" placeholder="@L("MaxValue")" name="maxValorPrincipalFilter" id="MaxValorPrincipalFilterId" />
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="MinAcrescimoFilterId">@L("MinMax") @L("Acrescimo")</label>
<div class="input-group">
<input type="number" class="form-control m-input" placeholder="@L("MinValue")" name="minAcrescimoFilter" id="MinAcrescimoFilterId" />
<input type="number" class="form-control m-input" placeholder="@L("MaxValue")" name="maxAcrescimoFilter" id="MaxAcrescimoFilterId" />
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="MinDescontoFilterId">@L("MinMax") @L("Desconto")</label>
<div class="input-group">
<input type="number" class="form-control m-input" placeholder="@L("MinValue")" name="minDescontoFilter" id="MinDescontoFilterId" />
<input type="number" class="form-control m-input" placeholder="@L("MaxValue")" name="maxDescontoFilter" id="MaxDescontoFilterId" />
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="MinDataPagamentoFilterId">@L("MinMax") @L("DataPagamento")</label>
<div class="input-group">
<input class="form-control m-input date-picker" type="text" placeholder="@L("MinValue")" id="MinDataPagamentoFilterId">
<input class="form-control m-input date-picker" type="text" placeholder="@L("MaxValue")" id="MaxDataPagamentoFilterId">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="ContaObservacaoFilterId">(@L("Conta")) @L("Observacao")</label>
<input type="text" class="form-control" name="contaObservacaoFilter" id="ContaObservacaoFilterId">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="IndiceDescricaoFilterId">(@L("Indice")) @L("Descricao")</label>
<input type="text" class="form-control" name="indiceDescricaoFilter" id="IndiceDescricaoFilterId">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="TituloPagarTituloFilterId">(@L("TituloPagar")) @L("Titulo")</label>
<input type="text" class="form-control" name="tituloPagarTituloFilter" id="TituloPagarTituloFilterId">
</div>
</div>
</div>
<div class="row m--margin-bottom-10">
<div class="col-xl-12">
<span id="ShowAdvancedFiltersSpan" class="text-muted clickable-item"><i class="fa fa-angle-down"></i> @L("ShowAdvancedFilters")</span>
<span id="HideAdvancedFiltersSpan" class="text-muted clickable-item" style="display: none"><i class="fa fa-angle-up"></i> @L("HideAdvancedFilters")</span>
</div>
</div>
<div class="row align-items-center">
<table id="TitulosPagarPagamentosTable" class="display table table-striped table-bordered table-hover m-wrapper m-datatable__lock" style="width: 600px">
<thead>
<tr>
<th>@L("Actions")</th>
<th>@L("TipoPagamento")</th>
<th>@L("ValorPrincipal")</th>
<th>@L("Acrescimo")</th>
<th>@L("Desconto")</th>
<th>@L("DataPagamento")</th>
<th>@L("ContaObservacao")</th>
<th>@L("IndiceDescricao")</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
@Html.Partial("~/Areas/App/Views/Common/Modals/_ModalFooterWithClose.cshtml")
I have a modal page, when i open twice the JS File does not load correctly. What can I do?
Code Index.js (Modal):
(function () {
$(function () {
var _$titulosPagarPagamentosTable = $('#TitulosPagarPagamentosTable');
var _titulosPagarPagamentosService = abp.services.app.titulosPagarPagamentos;
$('.date-picker').datetimepicker({
locale: abp.localization.currentLanguage.name,
format: 'L'
});
var _permissions = {
create: abp.auth.hasPermission('Pages.TitulosPagarPagamentos.Create'),
edit: abp.auth.hasPermission('Pages.TitulosPagarPagamentos.Edit'),
'delete': abp.auth.hasPermission('Pages.TitulosPagarPagamentos.Delete')
};
var _createOrEditModal = new app.ModalManager({
viewUrl: abp.appPath + 'App/TitulosPagarPagamentos/CreateOrEditModal',
scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/TitulosPagarPagamentos/_CreateOrEditModal.js',
modalClass: 'CreateOrEditTituloPagarPagamentoModal'
});
var _viewTituloPagarPagamentoModal = new app.ModalManager({
viewUrl: abp.appPath + 'App/TitulosPagarPagamentos/ViewtituloPagarPagamentoModal',
modalClass: 'ViewTituloPagarPagamentoModal'
});
var getDateFilter = function (element) {
if (element.data("DateTimePicker").date() === null) {
return null;
}
return element.data("DateTimePicker").date().format("YYYY-MM-DDT00:00:00Z");
}
var dataTable = _$titulosPagarPagamentosTable.DataTable({
paging: true,
serverSide: true,
processing: true,
listAction: {
ajaxFunction: _titulosPagarPagamentosService.getAll,
inputFilter: function () {
return {
filter: $('#TitulosPagarPagamentosTableFilter').val(),
tipoPagamentoFilter: $('#TipoPagamentoFilterId').val(),
minValorPrincipalFilter: $('#MinValorPrincipalFilterId').val(),
maxValorPrincipalFilter: $('#MaxValorPrincipalFilterId').val(),
minAcrescimoFilter: $('#MinAcrescimoFilterId').val(),
maxAcrescimoFilter: $('#MaxAcrescimoFilterId').val(),
minDescontoFilter: $('#MinDescontoFilterId').val(),
maxDescontoFilter: $('#MaxDescontoFilterId').val(),
minDataPagamentoFilter: getDateFilter($('#MinDataPagamentoFilterId')),
maxDataPagamentoFilter: getDateFilter($('#MaxDataPagamentoFilterId')),
contaObservacaoFilter: $('#ContaObservacaoFilterId').val(),
indiceDescricaoFilter: $('#IndiceDescricaoFilterId').val(),
tituloPagarTituloFilter: $('#TituloPagarTituloFilterId').val(),
tituloId: $('#tituloId').val(),
};
}
},
columnDefs: [
{
width: 120,
targets: 0,
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) {
_viewTituloPagarModal.open({ data: data.record });
}
},
{
text: app.localize('Delete'),
visible: function () {
return _permissions.delete;
},
action: function (data) {
deleteTituloPagarPagamento(data.record.tituloPagarPagamento);
}
}]
}
},
{
targets: 1,
data: "tituloPagarPagamento.tipoPagamento",
render: function (tipoPagamento) {
return app.localize('Enum_tipoPagamento_' + tipoPagamento);
}
},
{
targets: 2,
data: "tituloPagarPagamento.valorPrincipal",
render: function (valor) {
if (valor) {
return "R$ " + valor.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
return "R$ 0";
}
},
{
targets: 3,
data: "tituloPagarPagamento.acrescimo",
render: function (valor) {
if (valor) {
return "R$ " + valor.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
return "R$ 0";
}
},
{
targets: 4,
data: "tituloPagarPagamento.desconto",
render: function (valor) {
if (valor) {
return "R$ " + valor.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
return "R$ 0";
}
},
{
targets: 5,
data: "tituloPagarPagamento.dataPagamento",
render: function (dataPagamento) {
if (dataPagamento) {
return moment(dataPagamento).format('L');
}
return "";
}
},
{
targets: 6,
data: "contaObservacao"
},
{
targets: 7,
data: "indiceDescricao"
}
]
});
function getTitulosPagarPagamentos() {
dataTable.ajax.reload();
}
function deleteTituloPagarPagamento(tituloPagarPagamento) {
abp.message.confirm(
'',
function (isConfirmed) {
if (isConfirmed) {
_titulosPagarPagamentosService.delete({
id: tituloPagarPagamento.id
}).done(function () {
getTitulosPagarPagamentos(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();
});
$('#CreateNewTituloPagarPagamentoButton').click(function () {
_createOrEditModal.open({ TituloId: $('#tituloId').val() });
});
$('#ExportToExcelButton').click(function () {
_titulosPagarPagamentosService
.getTitulosPagarPagamentosToExcel({
filter: $('#TitulosPagarPagamentosTableFilter').val(),
tipoPagamentoFilter: $('#TipoPagamentoFilterId').val(),
minValorPrincipalFilter: $('#MinValorPrincipalFilterId').val(),
maxValorPrincipalFilter: $('#MaxValorPrincipalFilterId').val(),
minAcrescimoFilter: $('#MinAcrescimoFilterId').val(),
maxAcrescimoFilter: $('#MaxAcrescimoFilterId').val(),
minDescontoFilter: $('#MinDescontoFilterId').val(),
maxDescontoFilter: $('#MaxDescontoFilterId').val(),
minDataPagamentoFilter: getDateFilter($('#MinDataPagamentoFilterId')),
maxDataPagamentoFilter: getDateFilter($('#MaxDataPagamentoFilterId')),
contaObservacaoFilter: $('#ContaObservacaoFilterId').val(),
indiceDescricaoFilter: $('#IndiceDescricaoFilterId').val(),
tituloPagarTituloFilter: $('#TituloPagarTituloFilterId').val()
})
.done(function (result) {
app.downloadTempFile(result);
});
});
abp.event.on('app.createOrEditTituloPagarPagamentoModalSaved', function () {
getTitulosPagarPagamentos();
});
$('#GetTitulosPagarPagamentosButton').click(function (e) {
e.preventDefault();
getTitulosPagarPagamentos();
});
$(document).keypress(function (e) {
if (e.which === 13) {
getTitulosPagarPagamentos();
}
});
});
})();
Doesnt work.
I Insert a second action and worked.
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) {
_viewTituloPagarModal.open({ data: data.record });
}
},**
{
text: app.localize('Delete'),
visible: function () {
return _permissions.delete;
},
action: function (data) {
deleteTituloPagarPagamento(data.record.tituloPagarPagamento);
}
}]
}
into the html
