Get cell value GridView

Question

Get cell value GridView

Navigation

#1 by (3 votes)

1

I have not found a way to retrieve the values of a gridview row with jQuery or JavaScript to place it in input . I do not have a code, I only place the most similar one that is to retrieve values from a table.

This is how my table looks:

It's something like this but I do not know how I could implement it in my 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>

javascript jquery .net asp.net gridview

asked by Ivxn 25.02.2018 в 06:53

source

1 answer

Java delete some properties in the ResponseBody Problem with fgetc

score 3 · Accepted Answer

The first option is how you are doing, go to retrieve the values in the DOM. Although it is a very arduous task you would have to have a way to recover depending on the identifier of the grid and the row ... BUT if you already have a BUTTON per row I give you another option much more recommended that is to have an object in the button to not be looking in the DOM (all this because you have a grid with static data, no textbox or forms controls to recover) I add the TOPIC 1, as TIP to read the client ID of the gridview So the recommendation if it is only to recover in the client is to have the necessary data (formatted in JSON so easier everything on the client's side) that is why the TOPIC 2, where we will not even need the id of the gridview;)

Then ...

TOPIC 1: How to obtain the identifier ID of the table that renders the Gridview
TOPIC 2: How to add info in json in the button to read it in javascript

TOPIC 1: How to get the identifier ID of the table that renders the Gridview You can use the property of ClientIdMode where are Static coloas, you could place it in the property ClientID the Identifier of the table, or else as you know it takes its value depending on the container (panel, containers, etc) so it works by default asp.net webforms, and it is more difficult since you have to know this name If it's Static, the name is what you put in ClientID so you can have the name of the" hard-coded "grid in javascript to use it

But if you want to continue working as you came, the default mode is AutoId

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

Alli would have to obtain and write the code in javascript. And here it depends if you are with the javascript within the same page (not recommended) you should write in it with Response.Write the name of the grid Id and it is with the property Gridview.ClienteID, so you can have it as variable Something like that

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

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

    });
</script>

TOPIC 2: How to add info in json in the button to read it in javascript

Here the idea is to have a button in pure HTML in the gridview (not an ASP.NET button) since you only want to do something in the client and not in the server, if so it would be good this technique in "embed "in the button data already formatted in JSON to read it quickly in js, if need to go to the DOM

But it requires that the grid has for example a column template something 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>

As you can see, the template column has an HTML input that adds a data-json property to retrieve it by jQuery, which is the data linked to it but formatted in a text / json

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

In each button we add a class to be able to listen to the click event, and not to do it by id ... since the button is repeated by row

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


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

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

Here we retrieve the button that made the event with jQuery

var $btn = $(this);

and then we read the data json (with .data () it retrieves all the data- data

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

Links that can help or guide you

ClientIdMode Gets or sets the algorithm that is used to generate the value of the ClientID property.
jQuery > .data ()

Warn us to delve into a specific topic.