ASP.Net gridview AutoGenerateColumns="true" style & format textboxes in row when editing

1.8k Views Asked by At

There does not seem to be a lot of info out there when using a GridView with AutoGenerateColumns="true".

In my scenario, I am attempting to use this because my GridView is dynamically pulling numeric values from a stored procedure. As you can see, there may be x number of tiers.

I have everything looking great when viewing the data:

Viewing only:

enter image description here

However, once I put the row into edit mode, things get like this:

Edit mode:

enter image description here

I need to do two things here:

  1. Make the TextBoxes smaller width
  2. Format the numbers to remove the decimals

I have researched looping through all of the controls inside a GridView row, inside DataControlField, inside the DataControlFieldCell but I have gotten confused enough to ask for everyone's help.

My code behind is in C#.

EDIT:

Ok, in an effort to be more clear, I am trying to click the edit (M button) to put the row into edit mode. From here, I would like to loop through all controls in the row and then set the TextBox width. Something along these lines (this is not working code but merely me messing around):

protected void gvFeeTable_RowEditing(object sender, GridViewEditEventArgs e)
    {
        gvFeeTable.EditIndex = e.NewEditIndex;
        BindFeeTableGrid(9);

        //foreach (DataControlField field in gvFeeTable.Columns)
        //{
        //    field.ControlStyle.Width = 25;
        //}

        foreach (Control c in gvFeeTable.Rows[gvFeeTable.EditIndex].Controls)
        {
            //if (c is TextBox)
            //{
            //    TextBox tb = c as TextBox;

            //    tb.Width = 25;
            //}

            string test = c.GetType().ToString();

            if (c.GetType() == typeof(DataControlFieldCell))
            {                    

                foreach (TextBox tb in c.Controls)
                {
                    tb.Width = 50;
                }
            }
        }
    }
3

There are 3 best solutions below

0
On BEST ANSWER

Just wanted to post my solution for setting the size of the textbox...and adding in my code for formatting just to be complete:

    protected void gvFeeTable_RowEditing(object sender, GridViewEditEventArgs e)
    {
        gvFeeTable.EditIndex = e.NewEditIndex;
        BindFeeTableGrid(9);

        foreach (Control c in gvFeeTable.Rows[gvFeeTable.EditIndex].Controls)
        {
            if (c.GetType() == typeof(DataControlFieldCell))
            {
                foreach (Control control in c.Controls)
                {
                    TextBox tb = control as TextBox;

                    if (tb != null)
                    {
                        tb.Width = 50;

                        double dbl;
                        bool isNumeric = double.TryParse(tb.Text, out dbl);

                        if (isNumeric == true)
                        {
                            tb.Text = Convert.ToDecimal(tb.Text).ToString("0.00");
                        }
                    }
                }
            }
        }
    }

Textboxes resized

Textboxes formatted

0
On

For example I want set width of column 3 in c# code: You can do it for all other columns.

GridView1.Columns[2].ItemStyle.Width = 20;

And, for removing decimals use integer datatype in database;

0
On

#gvSomeGridView1 .inpA{ width: 20px;}
#gvSomeGridView1 .inpB{ width: 40px;}
#gvSomeGridView1 .inpC{ width: 80px;}

#gvSomeGridView2 td:nth-child(1) input{ width: 30px;}
#gvSomeGridView2 td:nth-child(2) input{ width: 60px;}
#gvSomeGridView2 td:nth-child(3) input{ width: 120px;}

#gvSomeGridView3 td > input { width:50px}
<div>
  <table id="gvSomeGridView1">
    <tbody>
      <tr>
        <td><input id="input1" type="text" class="inpA" /></td>
        <td><input id="input2" type="text" class="inpB" /></td>
        <td><input id="input3" type="text" class="inpC" /></td>
      </tr>
    </tbody>
  </table>
</div>

<div>
  <table id="gvSomeGridView2">
    <tbody>
      <tr>
        <td><input id="input1" type="text"/></td>
        <td><input id="input2" type="text"/></td>
        <td><input id="input3" type="text"/></td>
      </tr>
    </tbody>
  </table>
</div>

<div>
  <table id="gvSomeGridView3">
    <tbody>
      <tr>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
      </tr>
    </tbody>
  </table>
</div>