CODEWITHSUNDEEP
javascriptc#jqueryasp.netgridview
John
John

Reputation: 2147

How to amend gridview cell value with javascript

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.

Upvotes: 1

Views: 1626

Answers (1)

Eugene Podskal
Eugene Podskal

Reputation: 10401

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>

Upvotes: 1

Related Questions