?
Solved

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

Posted on 2006-03-20
17
Medium Priority
?
954 Views
Last Modified: 2012-06-27
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.
0
Comment
Question by:Term56
  • 7
  • 6
  • 2
  • +2
17 Comments
 
LVL 12

Expert Comment

by:AGBrown
ID: 16237332
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
 
LVL 9

Expert Comment

by:Raju Srivatsavaye
ID: 16237896
I would set the width of each bound column header with certain percentages.That should look real good..
0
 
LVL 12

Expert Comment

by:AGBrown
ID: 16238044
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Term56
ID: 16238059
i'd like to know too srivatsavaye :)
0
 
LVL 12

Expert Comment

by:AGBrown
ID: 16238162
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
 

Author Comment

by:Term56
ID: 16238292
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
 

Author Comment

by:Term56
ID: 16238315
agbrown can you give me an example ?
0
 
LVL 12

Expert Comment

by:AGBrown
ID: 16238352
Not sure about that the update first look, I would open a seperate question for it, sorry.

As for the example, coming up ...
0
 
LVL 12

Expert Comment

by:AGBrown
ID: 16238650
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
 
LVL 12

Expert Comment

by:AGBrown
ID: 16239238
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
 
LVL 12

Expert Comment

by:AGBrown
ID: 16239280
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
 
LVL 13

Accepted Solution

by:
Torrwin earned 2000 total points
ID: 16239302
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
 
LVL 26

Expert Comment

by:Rejojohny
ID: 16244164
use the property builder of the datagrid to set the width of each of the columns in pixels or "%"...

Rejo
0
 

Author Comment

by:Term56
ID: 16248238
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
 
LVL 13

Expert Comment

by:Torrwin
ID: 16248445
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
 

Author Comment

by:Term56
ID: 16257296
thank you for your help Torrwin
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
This Micro Tutorial will teach you how to add a cinematic look to any film or video out there. There are very few simple steps that you will follow to do so. This will be demonstrated using Adobe Premiere Pro CS6.
Despite its rising prevalence in the business world, "the cloud" is still misunderstood. Some companies still believe common misconceptions about lack of security in cloud solutions and many misuses of cloud storage options still occur every day. …
Suggested Courses
Course of the Month13 days, 20 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question