Base solution for your next web application

Activities of "rodrigosturm"

Answer

It works!!!! Thanks Ryancyq!

Sorry, i didn't understand

Answer

@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"
                }
            ]
        });
Answer

Hi Ismcadas,

No, i didn't. I Have no ideia how can i fix this.

My Version: 5.2 asp.core + Js

Answer

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'
        });
Answer

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")

Question

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();
            }
        });

    });
})();
Answer

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);
                                }
                            }]
                    }
Answer

into the html

Showing 11 to 20 of 32 entries