locked
Gridview rendered Table - remove span possible ? RRS feed

  • Question

  • User-775831949 posted

    The Gridview on aspx rendered a lot of <span id = ...> for many cells

    How to remove these span tag on rendering ?

    Please help, thanks

    Wednesday, January 17, 2018 7:36 AM

Answers

  • User-707554951 posted

    Hi hkbeer

    For your problem, you could replace the span tag In td with plain text by using Jquery.

      <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" DataKeyNames="Id">
                    <Columns>
                        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%#Eval("Group") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

    Code Behind:

      DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id"), new DataColumn("Group"), new DataColumn("Name"), new DataColumn("Country") });
                    dt.Rows.Add(1, "A", "John Hammond", "United States");
                    dt.Rows.Add(2, "B", "Mudassar Khan", "India");        
                    GridView2.DataSource = dt;
                    GridView2.DataBind();

    Output:

    Working code:

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#GridView2>tbody>tr").not(":first").each(function () {
                    $(this).find("td:eq(2)").html($(this).find("td:eq(2)").text());
                })         
            });
        </script>

    Result:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 18, 2018 2:43 AM

All replies

  • User-492460945 posted

    Hello hkbeer,

    Why you want to remove the span tags? Is there any special reason? Please explain what you exactly need?

    Thanks,

    Rajesh.

    Wednesday, January 17, 2018 11:38 AM
  • User-1716253493 posted

    Seem like the span come from a control inside itemtemplate

    For example

    <asp:Label ID="Label1" runat="server" Text="Label" ></asp:Label>
    <span id="Label1">Label</span>

    in grid

    <span id="GridView1_Label1_0">Label</span>

    You can see the span id, you can determine from where the span come.

    Thursday, January 18, 2018 1:05 AM
  • User-707554951 posted

    Hi hkbeer

    For your problem, you could replace the span tag In td with plain text by using Jquery.

      <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" DataKeyNames="Id">
                    <Columns>
                        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%#Eval("Group") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

    Code Behind:

      DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id"), new DataColumn("Group"), new DataColumn("Name"), new DataColumn("Country") });
                    dt.Rows.Add(1, "A", "John Hammond", "United States");
                    dt.Rows.Add(2, "B", "Mudassar Khan", "India");        
                    GridView2.DataSource = dt;
                    GridView2.DataBind();

    Output:

    Working code:

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#GridView2>tbody>tr").not(":first").each(function () {
                    $(this).find("td:eq(2)").html($(this).find("td:eq(2)").text());
                })         
            });
        </script>

    Result:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 18, 2018 2:43 AM