Table stylization problem using Bootgrid()

Asked

Viewed 35 times

0

When I rethink that table within a Modal and use the function BootGrid(), it cannot load all the necessary styles, making the navigation buttons for example not properly stylized.

Code of the table the request returns:

<table class="table table-condensed table-striped bootgrid-table" id="bootgrid-command">
    <thead>
        <tr>
            <th>
                <div class="text-right">Ações</div>
            </th>
            <th data-column-id="id" data-type="numeric">Código</th>
            @for (int i = 0; i < Model.HeaderColumns.Length; i++)
            {
                <th data-column-id="@Model.DisplayColumns[i]" data-type="text">@Model.HeaderColumns[i]</th>
            }
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.DataTable.Rows.Count; i++)
        {
            <tr>
                <td></td>
                <td></td>
                @for (int f = 0; f < Model.DisplayColumns.Length; f++)
                {
                    <td>@Model.DataTable.Rows[i][Model.DisplayColumns[f]]</td>
                }
            </tr>
        }
    </tbody>
</table>

Modal code:

@model Angle.Models.PopupSelecaoPadraoViewModel

<script>
    function ReloadModalInfo(componenteName) {
        $.post('@Url.Action("GridView", "Forms")', { token: $('#' + componenteName + '_token').val() }, function (data) {
            $('#abrirModal').click()
            $('#modalContent').html('')
            $('#modalContent').html(data)
            setTimeout(function () {

                $('#bootgrid-command').bootgrid({
                rowSelect: true,
                selection: true,
                rowCount: 5,
                labels: {
                    noResults: "where are my results"
                }
                });

            }, 0)
            
        })
    }
</script>

<link rel="stylesheet" href="~/vendor/jquery-bootgrid/dist/jquery.bootgrid.css">

<script src="@Scripts.Url("~/Vendor/jquery-bootgrid/dist/jquery.bootgrid.js")"></script>
<script src="@Scripts.Url("~/Vendor/jquery-bootgrid/dist/jquery.bootgrid.fa.js")"></script>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" id="modalContent">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<button type="button" style="display: none" class="btn btn-info btn-lg" id="abrirModal" data-toggle="modal" data-target="#myModal">Abrir janela Modal</button>

inserir a descrição da imagem aqui

I would like to know what I must do to properly load the styles within a modal?

  • When you load your styles in the page header, it applies to all of your elements... In this case it applies both inside and outside the modal... ?

  • No error is presented friend.

  • So... There is something conflicting with your script and you will have to go through a fine-tooth comb to understand, because jQuery Bootgrid already pulls bootstrap styles... :/

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.