Changing a GridView item's font weight

Question

I have a gridview that contains one linkbutton within itemtemplate. I bind this gridview with a table from my database that displays different items. When the gridview displays records and when the user clicks on an item of gridview then how can i change that item's fontweight to bold and change that same item's color.

Answer 1

Not 100% sure but you could do this client side as you create all the linkbuttons you use

linkbutton.Attributes.Add("onclick", "setBoldandColor(this)")

then have a javascript function

function setBoldandColor(id) { //getElementById(id).style.font.bold=true; //change color }

Answer 2

Try something like this:

        <style type="text/css">
            .gridViewLink {
                color:#CCCCCC;
            }
        </style>

        <script type="text/javascript">
            var prevSelection = null;

            function toggleStyle(currentSelection) {
                if (prevSelection != null) {
                    prevSelection.style.fontWeight = 'normal';
                    prevSelection.style.color = '#CCCCCC';
                }
                currentSelection.style.fontWeight = 'bold';
                currentSelection.style.color = '#777777';
                prevSelection = currentSelection;
            }
        </script>

        <asp:GridView ID="gvDemo" runat="server">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="btnDemo" OnClientClick="toggleStyle(this);return false;" CssClass="gridViewLink" Text="Demo" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        </asp:GridView>

Answer 3

You could use jQuery and do this all on the client-side rather easily...

$(function() {
  $("#GridViewID_HERE a[id$=LinkButtonID_HERE]").click(function() {
    $(this).closest("tr").css({ fontWeight: "bold", color: "red" });
  });
});

Note: this will change the font-weight and color of entire row. If you only want to change the text that was actually clicked, you can remove the .closest("tr") and it will work.