2

Estou criando um modal e dentro vou colocar uma tabela com algumas informações, porém, o conteúdo do modal não está sendo estilizável.

Já uso a mesma tabela em outras views e funciona normalmente dessa forma, apenas no modal que não.

A importação dos scripts ocorre corretamente como podem ver no código a seguir:

<script>
    function ReloadModalInfo(componenteName) {
        $.post('@Url.Action("GridView", "PopupPadrao")', { token: $('#' + componenteName + '_token').val() }, function (data) {
            console.log(data)
            $('#abrirModal').click()
        })
    }
</script>

@section Styles {
    <link rel="stylesheet" href="~/vendor/jquery-bootgrid/dist/jquery.bootgrid.css">
}
@section Scripts {
    <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-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Cabeçalho Modal</h4>
            </div>
            <div class="modal-body" id="modalContent">
                <table class="table table-borderless" id="bootgrid-command">
                    <thead>
                        <tr>
                            <th data-column-id="commands" data-formatter="commands" data-sortable="false">
                                <div class="text-right">@Resources.Resources.Acoes</div>
                            </th>
                            <th data-column-id="id" data-type="numeric">@Resources.Resources.Codigo</th>
                            <th data-column-id="nome">@Resources.Resources.Tag</th>
                            <th data-column-id="login">@Resources.Resources.Descricao</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td>qwdqwdqwd</td>
                            <td>qwdqwdqwdqwdqw</td>
                            <td>qwdqwdqwdqw</td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

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

inserir a descrição da imagem aqui

Como deveria ficar:

inserir a descrição da imagem aqui

2
  • Importou o jquery-ui.css ? Commented 9/05/2019 às 12:16
  • @RonaldoAraújoAlves Sim amigo, se eu colocar o grid fora do modal ele funciona perfeitamente. Commented 9/05/2019 às 12:35

2 Respostas 2

3
+50

Faltou alguns arquivos como jquery.js, boostrap.js e bootstrap.css, e faltou chamar a funcao que gera a tabela: $("#bootgrid-command").bootgrid();

$("#bootgrid-command").bootgrid();
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.js"></script>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Cabeçalho Modal</h4>
            </div>
            <div class="modal-body" id="modalContent">
                <table class="table table-borderless" id="bootgrid-command">
                    <thead>
                        <tr>
                            <th data-column-id="commands" data-formatter="commands" data-sortable="false">
                                <div class="text-right">@Resources.Resources.Acoes</div>
                            </th>
                            <th data-column-id="id" data-type="numeric">@Resources.Resources.Codigo</th>
                            <th data-column-id="nome">@Resources.Resources.Tag</th>
                            <th data-column-id="login">@Resources.Resources.Descricao</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td>qwdqwdqwd</td>
                            <td>qwdqwdqwdqwdqw</td>
                            <td>qwdqwdqwdqw</td>
                        </tr>
                         <tr>
                            <td></td>
                            <td>qwdqwdqwd</td>
                            <td>qwdqwdqwdqwdqw</td>
                            <td>qwdqwdqwdqw</td>
                        </tr>
                         <tr>
                            <td></td>
                            <td>qwdqwdqwd</td>
                            <td>qwdqwdqwdqwdqw</td>
                            <td>qwdqwdqwdqw</td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

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

1

Você precisa iniciar o componente com o comando:

<script>
$("#bootgrid-command").bootgrid();
</script>

Consulte a documentação

6
  • Está dizendo que terei que montar o meu bootgrid com JQuery e não usando HTML + CSS? Commented 7/05/2019 às 11:02
  • Não. Esse componente que vc está usando depende de uma inicialização conforme coloquei na resposta. Creio que ele precise do jQuery para funcionar. Sem iniciar o componente, ele não faz nada.
    – Sam
    Commented 7/05/2019 às 11:05
  • Mas eu uso telas de listagem de registros onde uso a tabela exatamente dessa mesma forma e ele consegue carregar os estilos, é isso que nao estou entendendo. Commented 7/05/2019 às 11:12
  • Faz um teste com o código que coloquei e veja aí como fica, aí vc me fala. Coloque o código no final do body.
    – Sam
    Commented 7/05/2019 às 11:15
  • Não deu certo @Sam, ele da erro de referencia nao definida no console. Ele realmente não está conseguindo carregar os scripts no modal. Commented 8/05/2019 às 11:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .