How to amend gridview cell value with javascript

Question

I have create a gridview as following:

<asp:GridView ID="Grid1" runat="server" CellPadding="1" ClientIDMode="Static" AutoGenerateColumns="false" ShowHeader="true">
        <Columns>
            <asp:TemplateField headertext="ColumnA">
                <ItemTemplate>
                    <asp:label id="ColumnA" Text='<%#Eval("ColumnA")%>' runat="server"/>
                </ItemTemplate>
            </asp:TemplateField>

        </Columns>
    </asp:GridView>

How I can add a click event (on the label) and change the value of the cell (that is clicked) in javascript? I've tried various ways using jquery but none of them are working properly, hopefully you can help me with that. Thanks.

Can you give some examples of what you've tried and what has gone wrong? What jQuery selectors have you used? — Eugene Podskal
– Eugene Podskal, Commented Mar 13, 2015 at 19:13
The asp.net data table does not generate unique id for each row, so I cannot change the value by just jquery's selector , so you have some idea how this can be done? Thanks — John
– John, Commented Mar 15, 2015 at 16:58

Eugene Podskal · Accepted Answer · 2015-03-15 18:30:48Z

1

What about setting some class to your label and applying a class selector in jQuery. Then you can just access the contents of the label to produce a new value without any need for unique row ID.

<asp:GridView ID="Grid1" runat="server"  // DataSource="<%# DataItems %>" 
    CellPadding="1" ClientIDMode="Static" AutoGenerateColumns="false" ShowHeader="true">
    <Columns>
        <asp:TemplateField headertext="ColumnA">
            <ItemTemplate>
                <asp:label CssClass="ColumnA" Text='<%#Eval("ColumnA")%>' runat="server"/>
            </ItemTemplate>
        </asp:TemplateField>

    </Columns>
</asp:GridView>

<script>
    $("#Grid1 .ColumnA").click(function () {
        var content = $(this).html();
        $(this).html(content + " Changed");
    });
</script>

If you have a need then you can also store some additional (like unique id) information in data-* Attributes :

 <asp:label data-id='<%#Eval("UniqueIdDataForClickEvent")%>' CssClass="ColumnA" Text='We have no actual data' runat="server"/>

...

<script>
    $("#Grid1 .ColumnA").click(function () {
        var content = $(this).data("id");
        $(this).html("We had unique id " + content);
    });
</script>

answered Mar 15, 2015 at 18:30

Eugene Podskal

10.4k5 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Over a year ago

@Engene how to make the changed made by jQuery available in c# code?

Collectives™ on Stack Overflow

How to amend gridview cell value with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related