I'm having to put a foreign key in the bootgrid view.
In the first comment of a video lesson the author of video aula said that to display a foreign key just add a date-formatter with an apelike, which in my case I called it "RequesterName" and the javascript "return row.Requester.Name"
But it returns the following error: JavaScript runtime error: Unable to get property 'Name' of undefined or null reference
Follow the code
Index.cshtml
@{
ViewBag.Title = "Area do Cliente";
}
<h2>@ViewBag.Title</h2>
<p>
<a href="#" class="btn btn-success" data-action="Create">
<span class="glyphicon glyphicon-plus"></span>
Nova
</a>
</p>
<table id="gridDados">
<thead>
<tr>
<th data-column-id="IdSAP" data-order="asc">IDSAP</th>
<th data-column-id="Area">Area</th>
<th data-column-id="DescricaoComposta">Descrição composta</th>
<th data-column-id="Sigla">Sigla </th>
<th data-formatter="nomeSolicitante"> Nome do Solicitante</th>
@*<th data-formatter ="DescricaoGAreaCliente">Gestor da Area do Cliente</th>*@
<th data-formatter="acoes">Acoes</th>
</tr>
</thead>
</table>
<div class="modal fade" id="minhaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div id="conteudoModal"></div>
</div>
</div>
</div>
</div>
<div class="form-actions no-color">
@Html.ActionLink("Menu Básico", "Index", "CBs")
</div>
@section scripts{
<script src="~/Scripts/jquery.bootgrid.js"></script>
<script src="~/Scripts/Projeto/ControlarGrid.js"></script>
<script type="text/javascript">
var controller = "AreaClientes";
var urlListar = "@Url.Action("Listar")";
$(document).ready(configurarControles);
</script>
}
ControlGrid.Js
function configurarControles() {
var traducao = {
infos: "Exibindo {{ctx.start}} até {{ctx.end}} de {{ctx.total}} registros", //
loading: "Carregando, isso pode levar alguns segundos...",
noResults: "Não há dados para exibir",
refresh: "Atualizar",
search: "Pesquisar"
}
var controlarGrid = {
ajax: true,
url: urlListar,
labels: traducao,
statusMappins: {
0: "Finalizado",
1: "No prazo",
2: "Atenção próximo ao prazo do SLA",
3: "Prazo do SLA excedido"
},
searchSettings: {
characters: 2
},
formatters: {
"acoes": function (column, row) {
return " <a href= '#' class='btn btn-warning' data-toggle='tooltip' data-placement='top' title='Editar' data-acao='Edit'data-row-id ='" + row.Id + "' > " +
"<span class='glyphicon glyphicon-edit'></span></a> "
+
"<a href='#' class='btn btn-danger' data-toggle='tooltip' data-placement='top' title='Excluir' data-acao='Delete' data-row-id ='" + row.Id + "' > " +
"<span class= 'glyphicon glyphicon-trash'></span></a>  "
+
"<a href='#' class='btn btn-info' data-toggle='tooltip' data-placement='top' title='Detalhar' data-acao='Details' data-row-id ='" + row.Id + "' >" +
"<span class='glyphicon glyphicon-list'></span></a>";
},
"nomeSolicitante": function (column, row) {
return row.Solicitante.Nome;
},
//"DescricaoGAreaCliente": function (column, row) {
// return row.GAreaCliente.Descricao;
//}
"DescricaoUf": function (column, row) {
return row.Uf.Descricao;
}
}
}
var grid = $("#gridDados").bootgrid(controlarGrid);
//assim que carrega o bootgrid
grid.on("loaded.rs.jquery.bootgrid", function () {
$('[data-toggle="tooltip"]').tooltip();
//pesquisa os botões de list, update e delete
grid.find("a.btn").each(function (index, elemento) {
var botaoDeAcao = $(elemento);
//descobre de qual tipo é o botão
var acao = botaoDeAcao.data("acao");
//pega qual id do campo
var idEntidade = botaoDeAcao.data("row-id");
botaoDeAcao.on("click", function () {
//chamada modal para os demais botões
abrirModal(acao, idEntidade);
});
});
});
// chamada modal para os botões de create
$("a.btn").click(function () {
var acao = $(this).data("action");
abrirModal(acao, null);
});
}
function abrirModal(acao, parametro) {
var url = "/{ctrl}/{acao}/{parametro}";
url = url.replace("{ctrl}", controller);
url = url.replace("{acao}", acao);
if (parametro !== null) {
url = url.replace("{parametro}", parametro);
}
else {
url = url.replace("{parametro}", "");
}
$("#conteudoModal").load(url, function () {
$("#minhaModal").modal('show');
});
}