We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

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

Term56
Term56 asked
on
Medium Priority
978 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.
Comment
Watch Question

Commented:
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
Raju SrivatsavayeSoftware Engineer

Commented:
I would set the width of each bound column header with certain percentages.That should look real good..

Commented:
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?

Author

Commented:
i'd like to know too srivatsavaye :)

Commented:
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

Author

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 ?

Author

Commented:
agbrown can you give me an example ?

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

As for the example, coming up ...

Commented:
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
}

Commented:
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

Commented:
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
Commented:
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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
use the property builder of the datagrid to set the width of each of the columns in pixels or "%"...

Rejo

Author

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.

Commented:
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

Author

Commented:
thank you for your help Torrwin
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.