1

No he encontrado la forma de poder recuperar los valores de una fila de un gridview con jQuery o JavaScript para colocarlo en un input. No tengo código, solo coloco el más parecido que es recuperar valores de una tabla.

Así se ve mi tabla:

introducir la descripción de la imagen aquí

Es algo parecido a esto pero no sé cómo podría implementarlo en mi GridView:

$(".boton").click(function() {

  var valores = "";

  // Obtenemos todos los valores contenidos en los <td> de la fila seleccionada
  $(this).parents("tr").find("td").each(function() {
    valores += $(this).html() + "\n";
  });

  alert(valores);
});
.boton {
  border: 1px solid #808080;
  cursor: pointer;
  padding: 2px 5px;
  color: Blue;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1" cellspacing="0" cellpadding="5">
  <tr>
    <td>val 1</td>
    <td>val 2</td>
    <td>val 3</td>
    <td class="boton">tomar valores de la fila</td>
  </tr>
  <tr>
    <td>val 4</td>
    <td>val 5</td>
    <td>val 6</td>
    <td class="boton">tomar valores de la fila</td>
  </tr>
  <tr>
    <td>val 7</td>
    <td>val 8</td>
    <td>val 9</td>
    <td class="boton">tomar valores de la fila</td>
  </tr>
</table>

1 respuesta 1

3

La primer opcion es como lo estas haciendo, ir a recuperar en el DOM los valores. Si bien es una tarea bastante ardua tendrias que tener forma de recuperar dependiendo de identificador de la grilla y la fila...PERO si ya tienes un BOTON por fila te doy otra opción mucho mas recomendada que es tener un objeto en el boton para no estar buscando en el DOM (todo esto porque tienes una grilla con datos estáticos, no hay textbox o controles de formularios a recuperar) Agrego el TEMA 1, como TIP para leer el ID de cliente del gridview Por eso la recomendacion si es solo para recuperar en el cliente es tener en el boton los datos necesarios (formatados en JSON asi mas facil todo del lado del cliente) por eso el TEMA 2, donde ni siquiera necesitaremos el id del gridview ;)

Entonces...

  • TEMA 1: Como obtener el identificador ID de la tabla que renderiza el Gridview
  • TEMA 2: Como agregar info en json en el boton para leerlo en javascript

TEMA 1: Como obtener el identificador ID de la tabla que renderiza el Gridview Puedes utilizar la propiedad de ClientIdMode donde so coloas Static, podrias colocar en la propiedad ClienteID el Identificador del la tabla, o sino como sabras toma su valor dependiendo del contenedor (panel, contenedores, etc) asi funciona por default asp.net webforms, y es mas dificil ya que tienes que conocer este nombre Si es Static, el nombre es el que colocas en ClienteID asi puedes tener en el javascript el nombre de la grilla "hard-codeado" para utilizarlo

Pero si quieres seguir trabajando como venias el modo por default es AutoId

<asp:GridView ID="GridView1" runat="server" ClientIDMode="AutoID"></asp:GridView>

Alli tendrias que obtener y escribir el codigo en el javascript. Y aqui depende si estas con el javascript dentro de la misma pagina (no recomendado) deberias escribir en la misma con Response.Write el nombre del Id del grid y es con la propiedad Gridview.ClienteID, asi lo puedes tener como variable Algo asi

<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
<script>
    $(document).ready(function () {

        var gridId = '<% HttpContext.Current.Response.Write(GridView1.ClientID); %>';
        var $grid = $('#' + gridId);

    });
</script>

TEMA 2: Como agregar info en json en el boton para leerlo en javascript

Aqui la idea es tener un boton en puro HTML en el gridview (no un button de ASP.NET) ya que solo quieres hacer algo en el cliente y no en el servidor, si es asi seria buenon esta tecnica en "embeber" en el boton datos ya formatados en JSON para leerlo rapidamente en js, si necesidad de ir al DOM

Pero requiere que la grilla tenga por ejemplo una columna template algo aso

<asp:GridView ID="GridView1" runat="server" 
    ClientIDMode="AutoID" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" />
        <asp:BoundField DataField="Name" />
        <asp:TemplateField>
            <ItemTemplate>
                <input type="button" class="btnEditar" value="Editar"
                        data-json='{"id":<%# Eval("Id") %>,"name":"<%# Eval("Name") %>"}'/>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

como veras, la columna template tiene un input HTML que agregamos una propiedad data-json para recuperarla por jQuery que son los datos enlazados a la misma pero formateados en un texto/json

                <input type="button" class="btnEditar" value="Editar"
                        data-json='{"id":<%# Eval("Id") %>,"name":"<%# Eval("Name") %>"}'/>

En cada boton agregamos un clase para poder estar escuchando el evento click, y no hacerlo por id... ya que el boton se repite por fila

  <script> 
    $(document).ready(function () {


        $('.btnEditar').on('click', function () {
            var $btn = $(this);
            var data = $btn.data().json;

            alert("Jedi Name : " + data.name);
        })
    });
</script>

Aqui recuperamos el boton que realizo el evento con jQuery

var $btn = $(this);

y luego leemos el data json (con .data() se recupera todos las propiedades data-)

var data = $btn.data().json;

Enlaces que te pueden ayudar o servir de guia

Avisanos para profundizar en un tema especifico.

1
  • si funciono perfecto use el TEMA 2: Como agregar info en json en el boton para leerlo en javascript y es justo lo que necesitaba saludos
    – Ivxn
    Commented el 25 feb. 2018 a las 14:12

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.