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>
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... ?
– Ursones
No error is presented friend.
– Victor Laio
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... :/
– Ursones