Double columns in GridView, building from code behind in C#

Question

I'm trying to fill a GridView with a RadioButton and data from a CreditCardList. However, it's doubling the columns for each field... one full set of columns then another complete set (sans the RadioButton) I've checked creditCardList.items.Count and made sure it's just 1 (which it is). What am I doing wrong?

aspx:

<asp:GridView ID="gvCards" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
        <Columns>
            <asp:TemplateField HeaderText="Sel">
                <ItemTemplate>
                    <asp:RadioButton ID="Sel" runat="server" GroupName="rad" />
                </ItemTemplate>
            </asp:TemplateField>

            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="Customer ID"  />
            <asp:BoundField DataField="Card ID" HeaderText="Card ID" />
            <asp:BoundField DataField="Card Number" HeaderText="Card Number" />
            <asp:BoundField DataField="Expiration" HeaderText="Expiration" />
            <asp:BoundField DataField="State" HeaderText="State" />
        </Columns>

    </asp:GridView>

Code behind:

DataTable dt = new DataTable();
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Customer ID", typeof(string));
dt.Columns.Add("Card ID", typeof(string));
dt.Columns.Add("Card Number", typeof(string));
dt.Columns.Add("Expiration", typeof(string));
dt.Columns.Add("State", typeof(string));
        for (var i = 0; i < creditCardList.items.Count; i++)
        {
            DataRow row1 = dt.NewRow();
            row1["Name"] = creditCardList.items[i].first_name + " " + creditCardList.items[i].last_name;
            row1["Customer ID"] = creditCardList.items[i].external_customer_id;
            row1["Card ID"] = creditCardList.items[i].id;
            row1["Card Number"] = creditCardList.items[i].number;
            row1["Expiration"] = creditCardList.items[i].expire_month + "/" + creditCardList.items[i].expire_year;
            row1["State"] = creditCardList.items[i].state;
            dt.Rows.Add(row1);
        }
        gvCards.DataSource = dt;
        gvCards.DataBind();

Output: Sel Name Card ID Card Number Expiration State Name Customer ID Card ID Card Number Expiration State Steve Ricketts %40LDN CON CARD-3F3 xxxxxxxxxxx1000 3/2020 ok Steve Ricketts %40LDN CON CARD-3F3 xxxxxxxxxxx1000 3/2020 ok

Answer 1

set AutoGenerateColumns="false" .

<asp:GridView ID="MyGrid" runat="server" AutoGenerateColumns="false">
     <Columns>
     </Columns>
</asp:GridView>

Remarks
When the AutoGenerateColumns property is set to true, an AutoGeneratedField object is automatically created for each field in the data source. Each field is then displayed as a column in the GridView control in the order that the fields appear in the data source. This option provides a convenient way to display every field in the data source; however, you have limited control of how an automatically generated column field is displayed or behaves.
Instead of letting the GridView control automatically generate the column fields, you can manually define the column fields by setting the AutoGenerateColumns property to false and then creating a custom Columns collection. In addition to bound column fields, you can also display a button column field, a check box column field, a command field, a hyperlink column field, an image field, or a column field based on your own custom-defined template.