Help with a DataGrid onEdit command(Datagrid expands too big)

I have a datagrid that displays certain pieces of information.

I have an edit command associated with the datagrid. When I click on it, it expands the datagrid lenght wise to almost 3 times the original size. Basically it sets up a input box. Is there a way to Limit the size of each box so that it doesnt expand so much?

This is the datagrid

<asp:DataGrid id="DataGrid1" OnEditCommand="ItemsGrid_Edit" OnCancelCommand="ItemsGrid_Cancel" OnUpdateCommand="ItemsGrid_Update" runat="server" Visible="False" AutoGenerateColumns="False" Width="700px">
<Columns>
<asp:BoundColumn DataField="job_id" HeaderText="Job #"></asp:BoundColumn>
<asp:BoundColumn DataField="job_name" HeaderText="Job Name"></asp:BoundColumn>
<asp:BoundColumn DataField="po" HeaderText="PO #"></asp:BoundColumn>
<asp:BoundColumn DataField="quantity" HeaderText="Quantity"></asp:BoundColumn>
<asp:BoundColumn DataField="pages" HeaderText="Pgs"></asp:BoundColumn>
<asp:BoundColumn DataField="colors" HeaderText="Colors"></asp:BoundColumn>
<asp:BoundColumn DataField="fmpaper" HeaderText="FM Paper"></asp:BoundColumn>
<asp:BoundColumn DataField="paper_cost" HeaderText="Paper Cost"></asp:BoundColumn>
<asp:BoundColumn DataField="awarded" HeaderText="Awarded To"></asp:BoundColumn>
<asp:BoundColumn DataField="price" HeaderText="Price"></asp:BoundColumn>
<asp:BoundColumn DataField="sisterco" HeaderText="Sister Co"></asp:BoundColumn>
<asp:BoundColumn DataField="paper_sub" HeaderText="Paper &amp; Sub COM"></asp:BoundColumn>
<asp:BoundColumn DataField="sell" HeaderText="Sell $"></asp:BoundColumn>
<asp:BoundColumn DataField="commision" HeaderText="Com %"></asp:BoundColumn>
<asp:BoundColumn DataField="comments" HeaderText="Comments"></asp:BoundColumn>
       <asp:EditCommandColumn
            EditText="Edit"
            CancelText="Cancel"
                      UpdateText="Update"
                     HeaderText="Edit item">
            </asp:EditCommandColumn>
</Columns>
</asp:DataGrid></P>

And the codebehind :

   Public Sub ItemsGrid_Edit(ByVal source As Object, _
        ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
        Handles DataGrid1.EditCommand
        DataGrid1.EditItemIndex = e.Item.ItemIndex
        Fill_dataGrid()
    End Sub

if I cancel, it shows up back the original size.
Term56Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

AGBrownCommented:
Use css, or inline styles to limit the textbox size. This is the best way of controlling textbox size. You could use a style based on tables with an id of DataGrid1, for all inputs of type text in that, or give the textboxes classes based on how long you want them to be.

Alternatively use the ItemCreated event of the datagrid to find the EditItem and set the widths of the textboxes in each cell in the row to what you want them to be.

Andy
0
Raju SrivatsavayeSoftware EngineerCommented:
I would set the width of each bound column header with certain percentages.That should look real good..
0
AGBrownCommented:
True, and it would be simpler than going into the ItemCreated. But, as this is a datagrid, how would you do that? Would you insert <col> tags in the header of the datagrid and then set their width?
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Term56Author Commented:
i'd like to know too srivatsavaye :)
0
AGBrownCommented:
I would guess that you would have to use the ItemCreated or ItemDataBound event (probabaly the former) to find the Header item, and insert <col> tags into it with widths set either as fixed or percentages (http://www.w3schools.com/tags/tag_col.asp).

Andy
0
Term56Author Commented:
also having trouble with the update :

I'm trying to access the items as following
Public Sub ItemsGrid_Update(ByVal source As Object, _
        ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
        Handles DataGrid1.UpdateCommand

        If UCase(e.Item.Cells(6).Text) = "YES" Then
            intFMPaper = 1
        Else
            intFMPaper = 0
        End If

problem is all the cells come up as containing nothing ("")

am I missing something ?
0
Term56Author Commented:
agbrown can you give me an example ?
0
AGBrownCommented:
Not sure about that the update first look, I would open a seperate question for it, sorry.

As for the example, coming up ...
0
AGBrownCommented:
OK, _IF_ I was to do it with cols, it would be something like this:

private void MyGrid_PreRender(object sender, System.EventArgs e)
{
      HtmlGenericControl col = new HtmlGenericControl("col");
      this.Controls.AddAt(0, col);
}

But that doesn't seem to work (so I didn't bother putting into VB) probably as you are rearranging the controls inside the datagrid. I would try playing with this in case you can get it work, but if not I would go with the ItemCreated instead, i think:

if (e.Item.ItemType == ListItemType.EditItem)
{
// loop through the cells, get the first control which will be the text box and set it's width property
}
0
AGBrownCommented:
If I can correct what I wrote above, the table is the first control of the datagrid, so you actually do:

this.Controls[0].Controls.AddAt(0, col);

However, then i get an error "'Table' cannot have children of type 'HtmlGenericControl'."

I have spent some time modifying my datagrids. Now I have a class based on the datagrid which, in turn, all my datagrids in the pages are based on. This uses the ItemCreated and ItemDataBound events to modify the css classes in the rows, and on the cells, and heavily modify the pager. I have a lot of success with this. I would concentrate more on setting the width using ItemCreated or ItemDataBound. The latter event fires only when you bind data, the former fires then and on every round trip. You may find you only need to do your width setting in the ItemDataBound and that the textboxes remember that in their ViewState after that.

I would really have like to be able to insert <col> tags in the table. If I work it out I'll let you know. In the meantime let us know if you get stuck with the textbox modications in Created/DataBound.

Andy
0
AGBrownCommented:
Doh! I might be being really stupid. Perhaps srivatsavaye means setting the width through the DataGridColumn.HeaderStyle.Width property, either in the aspx or in the code when you activate the edit mode.

Andy
0
TorrwinCommented:
Yes, there is a way to limit the textbox size in edit mode.  You can do it by using a template column instead of a bound column, as shown below:

<asp:TemplateColumn HeaderText="Job #">
      <HeaderStyle Width="16%"></HeaderStyle>  <!--Whatever width you want this column to be-->
      <ItemTemplate>
                       <asp:Label id="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.job_id") %>'></asp:Label>
      </ItemTemplate>
                <!--Now, set the textbox to be only as wide as the column-->
      <EditItemTemplate>
            <asp:TextBox id="Textbox1" runat="server" Width="100%"></asp:TextBox>
      </EditItemTemplate>
</asp:TemplateColumn>
------------------------------------------------------
Now, as for your problem with the update command.  You want to do something like this:

        If UCase(CTYPE(e.Item.Cells(6).Controls(0), textbox).text) = "YES" Then
            intFMPaper = 1
        Else
            intFMPaper = 0
        End If

Let me know how it goes,

-Torrwin

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RejojohnyCommented:
use the property builder of the datagrid to set the width of each of the columns in pixels or "%"...

Rejo
0
Term56Author Commented:
Torrwin,

<asp:TemplateColumn HeaderText="Job #">
     <HeaderStyle Width="16%"></HeaderStyle>  <!--Whatever width you want this column to be-->
     <ItemTemplate>
                      <asp:Label id="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.job_id") %>'></asp:Label>
     </ItemTemplate>
                <!--Now, set the textbox to be only as wide as the column-->
     <EditItemTemplate>
          <asp:TextBox id="Textbox1" runat="server" Width="100%"></asp:TextBox>
     </EditItemTemplate>
</asp:TemplateColumn>

worked, however, now when I click the update command, none of the fields actually have data in them, this is what I have in my edit section

  Public Sub ItemsGrid_Edit(ByVal source As Object, _
        ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
        Handles DataGrid1.EditCommand
        DataGrid1.EditItemIndex = e.Item.ItemIndex
        DataGrid1.Columns(11).Visible = False
        DataGrid1.Columns(13).Visible = False
        Fill_dataGrid()
    End Sub

and now, when I try to grab values using

CType(e.Item.Cells(0).Controls(0), TextBox).Text

in a query says

Specified cast is not valid.
0
TorrwinCommented:
Ok, for the missing data we just need to make sure to set the text of the textbox in the edit template.  You can do this in the same way as the item template.

Change the edit item template to include the bound data like so:
<asp:TextBox id="Textbox1" runat="server" Width="100%" Text='<%# DataBinder.Eval(Container, "DataItem.job_id") %>'></asp:TextBox>

------------------------------

As for the second part, try using the find control function instead of specifying the control number like this:

CType(e.Item.Cells(X).FindControl("Textbox1"), TextBox).Text

Where TextBox1 is the name of your edit textbox and X is the column number of the row you're editing.

Here's an example from a one of my own datagrids:
Dim sName as String
sName = Replace(CType(e.Item.Cells(3).FindControl("txtAddName"), TextBox).Text, "'", "''").Trim

I add the replace function to fix any possible SQL errors and the trim function to remove any extra spacing.

Let me know how it's working for you,

-Torrwin
0
Term56Author Commented:
thank you for your help Torrwin
0
Term56Author Commented:
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.