Display the name of a foreign key in bootgrid?

0

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> &nbsp;"
                    +
                    "<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>&nbsp "
                    +
                    "<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');
    });

}
    
asked by anonymous 20.02.2018 / 14:42

0 answers