0

Estoy trabajando en un proyecto web en la que tengo que agregar una ventana de consultas. Para esto agregué una GridView de asp (<asp:GridView/>).
En otros proyectos de mi trabajo hay una function de JavaScript que me permite acomodar mejor el paginado, acomodar la cantidad de registros que se quieren ver, exportar a excel, imprimir, etc. Pero tengo el problema de que en este sitio, esta function no me estaría reconociendo el GridView y no encuentro el motivo.

Definición del GridView:

<script type="text/javascript" src="js/Inicio.js"></script>

<div id="divGrilla">
    <asp:GridView ID="gvCheckList" runat="server" AllowPaging="true" CssClass="table table-striped table-hover" GridLines="None" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField HeaderText="ID Registro" Visible="false">
                <ItemTemplate>
                    <asp:Label ID="id" runat="server" Text='<%# Eval("id") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Fecha y Hora" Visible="true">
                <ItemTemplate>
                    <asp:Label ID="FechaHora" runat="server" Text='<%# Eval("FechaHora") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Puesto" Visible="true">
                <ItemTemplate>
                    <asp:Label ID="DescriPuesto" runat="server" Text='<%# Eval("Descripcion") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Patente" Visible="true">
                <ItemTemplate>
                    <asp:Label ID="Patente" runat="server" Text='<%# Eval("Patente") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="">
                <ItemTemplate>
                    <asp:Button ID="btnMapa" runat="server" Text="Ver más" CssClass="btn btn-info" OnClick="AbreModal" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

Y este es el código de la function:

$(document).ready(function () {
    $('[id$=gvCheckList]').prepend($("<thead></thead>").append($('[id$=gvCheckList]').find("tr:first"))).DataTable({
        dom: '<"bottom"B>lfrtip',
        'iDisplayLength': 5,
        "responsive": true,
        "sPaginationType": "full_numbers",
        lengthMenu: [[5, 10, 20, 50, -1], ['5', '10', '20', '50', 'Todos']],
        buttons: {
            dom: {
                container: {
                    tag: 'div',
                    className: 'flexcontent'
                },
                buttonLiner: {
                    tag: null
                }
            },

            buttons: [
                {
                    extend: 'print',
                    text: '<i class="fas fa-print"></i>',
                    title: 'GeoPosiciones',
                    titleAttr: 'Imprimir',
                    className: 'btn btn-primary',
                    exportOptions: { modifier: { page: 'all' } }
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel"></i>',
                    title: 'GeoPosiciones',
                    titleAttr: 'Excel',
                    className: 'btn btn-primary',
                    filename: 'GeoPosiciones',
                    exportOptions: { modifier: { page: 'all' } }
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fas fa-file-alt"></i>',
                    title: 'GeoPosiciones',
                    titleAttr: 'Texto CSV',
                    className: 'btn btn-primary',
                    filename: 'GeoPosiciones',
                    exportOptions: { modifier: { page: 'all' } }
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf"></i>',
                    title: 'GeoPosiciones',
                    titleAttr: 'pdf',
                    className: 'btn btn-primary',
                    filename: 'GeoPosiciones',
                    orientation: 'portait',
                    pageSize: 'A4',
                    exportOptions: { modifier: { page: 'all' }, columns: ':visible' },
                    customize: function (doc) {
                        doc.styles.title = {
                            color: '#4c8aa0',
                            fontSize: '30',
                            alignment: 'center'
                        }
                        doc.styles['td:nth-child(2)'] = {
                            width: '100px',
                            'max-width': '100px'
                        },
                            doc.styles.tableHeader = {
                                fillColor: '#4c8aa0',
                                color: 'white',
                                alignment: 'center'
                            },
                            doc.content[1].margin = [100, 0, 100, 0]
                    }
                }
            ]

        }
    });
});

En este caso, todo el código del JavaScript lo copié de otro proyecto web que está funcionando. La única diferencia que tiene con respecto al original es el id de la GridView, ya que en este programa es diferente al original.

Este debería ser el resultado:

Resultado

Pero se ve de esta manera, que es como si no hubiese agregado el código del JavaScript:

Así sale

(Las imágenes son para darles una idea de cómo debería salir y como sale la GridView, por eso la diferencia entre las columnas de la definición del principio y las columnas de las imágenes)

¿Por qué motivo puede ser que no me muestre nada?

3 respuestas 3

0

Agrega ClientIDMode="static" al asp:GridView.

1
  • Está puesto en la definición de la página: <%@ Page Language="C#" MasterPageFile="~/SiteMaster.Master" AutoEventWireup="true" CodeFile="TRX5201.aspx.cs" Inherits="TRX5201" ClientIDMode="Static" %> igualmente lo puse en el asp:GridView y sigue sin funcionar
    – Matias
    Commented el 9 jun. 2020 a las 18:49
0

Si tienes tu pagina anidada en una pagina maestra el ID de tu grid cambia al estar en el lado del cliente segun el asp:Content en donde agregaste el grid, si la propiedad ContentPlaceHolderID tiene el valor ContentPlaceHolder1 entonces en el cliente el id del grid será el resultado de concatenera el valor de ContentPlaceHolderID, un guion bajo y el id de tu elemento gridView (por ejemplo: ContentPlaceHolder1_gvCheckList), ademas de que del lado de cliente el grid en realidad es una tabla, por ejemplo <table id="ContentPlaceHolder1_gvCheckList">;para validar esto, corre tu pagina web en un navegador y a tu tabla (gridview) le das clic secundario y selecciona inspecionar elemento.

Ahora puedes modificar tu script y en lugar de solo poner gvCheckList escribe el id concatenado.

3
  • Tengo definido el content de esta manera: <asp:Content ID="body" ContentPlaceHolderID="MainContent" runat="server">. Ahí adentro tengo definido el GridView, pero cuando lo ejecuto el id sigue siendo gvCheckList (no puedo poner imágenes en comentarios para mostrartelo)... igualmente probé con poner MainContent_gvCheckList y sigue sin funcionar
    – Matias
    Commented el 10 jun. 2020 a las 11:47
  • Revisa con un navegador que ID tiene al estar publicado: ejecuta tu página web en un navegador, y a tu grid le das click secundario y seleccionas inspeccionar elemento. Tu grid aparecerá con etiqueta table busca su ID, para ver cómo se está concatenado.
    – miguelm
    Commented el 11 jun. 2020 a las 18:37
  • Hice eso mismo, el id sigue siendo gvCheckList
    – Matias
    Commented el 12 jun. 2020 a las 12:03
0

Finalmente pude dar con la solución. Aparentemente había algo con el <div id="divGrilla"> que no reconocía el asp:GridView. Desconozco el motivo de por qué no lo reconoce, pero saqué el div y funcionó sin problemas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.