How to set GridView EditItemTemplate Textbox to take maximum cell Width? - c#

I have one Gridview with 5 columns including the edit column. When I click Edit I would like the last column EditItemTemplate Textbox 'The_Title' to take up the maximum width of the cell. It never does! (I can shrink the tbTitle with the Width attribute but not increase) I have tried many things including 'GridView1_RowDataBound'. What am I missing.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
for (int i = 0; i < e.Row.Cells.Count - 1; i++)
{
if (i == 4)
{
e.Row.Cells[i].Attributes.Add("style", "white-space:nowrap;padding:0px;margin:0px;width:500px");
}
}
}
GridView .aspx - only thing on the page no update panel (1 GV and 1 SqlDataSouce).
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Width="1000px" OnRowEditing="GridView1_RowEditing" OnPreRender="GridView1_PreRender" OnRowDataBound="GridView1_RowDataBound" OnRowUpdated="GridView1_RowUpdated" OnRowUpdating="GridView1_RowUpdating">
<EditRowStyle BackColor="Red" Width="100%" />
<Columns>
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" Text="Update"></asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="id" InsertVisible="False" SortExpression="id">
<EditItemTemplate>
<asp:Label ID="lblID1" runat="server" Text='<%# Eval("id") %>'></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblID2" runat="server" Text='<%# Bind("id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="The_Source" SortExpression="The_Source">
<EditItemTemplate>
<asp:TextBox ID="tbSrc" runat="server" Text='<%# Bind("The_Source") %>' Width="50px" ></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblSrc" runat="server" Text='<%# Bind("The_Source") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Section" SortExpression="Section">
<EditItemTemplate>
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Section") %>' Width="50px"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label5" runat="server" Text='<%# Bind("Section") %>' Width="50px"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="The_Title" SortExpression="The_Title" HeaderStyle-Width="500px" HeaderStyle-BackColor="Red">
<EditItemTemplate>
<div style="white-space:nowrap;background-color:blue;text-align:center;padding:0px;margin:0px;">
<asp:TextBox ID="tbTitle" runat="server" Text='<%# Bind("The_Title") %>' Width="500px" style="white-space:nowrap;"></asp:TextBox>
</div>
</EditItemTemplate>
<ItemTemplate >
<asp:Label ID="lblTitle" runat="server" Text='<%# Bind("The_Title") %>' Width="500px"></asp:Label>
</ItemTemplate>
<ControlStyle BackColor="#3399FF" />
</asp:TemplateField>
</Columns>
</asp:GridView>
// Result image
Any clues would be appreciated. Thank You.

Using Browser developer tools, you should be able to inspect the resulting mark-up (HTML) for your text box and tinker with it to see what is causing the size restriction.
IE developer tools (F12) will show you the hierarchical (cascading) order where the width setting is being defined.

Tested your GridView. The TextBox tbTitle is 500 px wide, just as expected. There is probably some bootstrap or other css overwriting the width.
What happens if you add a class for it?
<EditItemTemplate>
<asp:TextBox ID="tbTitle" runat="server" CssClass="fullWidth" Text='<%# Bind("The_Title") %>'></asp:TextBox>
</EditItemTemplate>
.fullWidth {
width: 100% !important;
}
Or set it inline as !important. If that does not work then there is probably something else going on.
<asp:TextBox ID="tbTitle" runat="server" style="width: 100% !important" Text='<%# Bind("The_Title") %>'></asp:TextBox>

Related

how to make a read only textbox in gridview edit mode?

I want to make one of the data bound in my gridview uneditable or in my case, I want to make the textbox in edit mode in read only. here is what I have tried but not successful:
TextBox ProductImage = GridView1.Rows[e.RowIndex].FindControl("TextBox1") as TextBox;
ProductImage.ReadOnly = true;
and here is the aspx code:
asp:TemplateField HeaderText="ProductImage" SortExpression="ProductImage">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("ProductImage") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ProductImage") %>' />
</ItemTemplate>
<ControlStyle Width="50px" />
</asp:TemplateField>
can someone help me out?
Have you tried setting ReadOnly to true in your aspx code?
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" ReadOnly="true" Text='<%# Eval("ProductImage") %>'/>
</EditItemTemplate>
Or you could use a Label instead of a TextBox
<asp:Label ID="Label1" runat="server" Text='<%# Eval("ProductImage") %>'/>

Uniquely identify controls in nested gridview for validation

I have a nested grid. I would like to validate a dropdown control within the child grid when the user adds a record. But in a nested grid, the control IDs are not unique. If you have 2 parent rows and a nested grid under each parent the child grid controls will have the same ID. When I validate, the validation is checking all of the nested grids and not just the one that I am trying to add to.
This is the markup:
<asp:GridView ID="GroupGridView" runat="server" AutoGenerateColumns="False"
Caption="Group Information" CaptionAlign="Top" CssClass="grid"
ShowFooter="true" DataKeyNames="GroupID">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:DivExpandCollapse('div<%# Eval("GroupID")%>');">
<img id="imgdiv<%# Eval("GroupID")%>" width="25px" border="0" src="Images/plus.png" /> </a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="GroupID">
<ItemTemplate>
<asp:Label ID="uggvLblGroupID" runat="server" Text='<%# Bind("GroupID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Group Name">
<ItemTemplate>
<asp:Label ID="uggvLblGroupName" runat="server" Text='<%# Bind("GroupName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="uggvDeleteButton" runat="server" CausesValidation="False" CommandName="Delete"
Text="Delete" CssClass="gridActionbutton" OnClientClick="return confirm('Are you sure you want to delete this Group Information?')" >
</asp:Button>
<tr><td colspan="100%">
<div id="div<%# Eval("GroupID") %>" style="display:none">
<asp:GridView ID="GroupMemberGridView" runat="server" AutoGenerateColumns="false"
CssClass="grid" ShowFooter="true">
<Columns>
<asp:TemplateField HeaderText="MemberID">
<ItemTemplate>
<asp:Label ID="mggvLblMemberID" runat="server" Text='<%# Bind("MemberID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Member Name" ItemStyle-Wrap="false">
<ItemTemplate>
<asp:Label ID="mggvLblMemberName" runat="server" Text='<%# Bind("MemberName") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="mggvDDLMemberName" runat="server" ClientIDMode="Static"
class="chosen-single" data-placeholder="Choose member…">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqValueDDLMemberInsert" runat="server" InitialValue="0"
ControlToValidate="mggvDDLMemberName" ValidationGroup="'<%# "InsertGroupMemberValidation_" + Eval("GroupID") %>'
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Center">
<FooterTemplate>
<asp:Button ID="mggvAddButton" runat="server" CommandName="Add" Text="Add Member" Width="90%"
CssClass="gridActionbutton" ValidationGroup='<%# "InsertGroupMemberValidation_" + Eval("GroupID") %>'> CausesValidation="true">
</asp:Button>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</ItemTemplate>
<FooterTemplate>
<asp:Button ID="uggvAddButton" runat="server" CommandName="Add" Text="Add Group" Width="90%" CausesValidation="true"
CssClass="gridActionbutton" ValidationGroup="InsertGroupNameValidation"
</asp:Button>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Regardless of which 'Add Member' button I click, the validation is triggered for all of the nested grids because the Validation Groups are not unique.
How can I uniquely identify the ValidationGroup for each nested grid?
Thanks.
UPDATE
The ValidationGroup identifier works when adding a member to the first nested group but not to subsequent nested grids. It seems it is still going thru all of the nested grids and not just the one from the 'Add' button you clicked.
//Access Validators and Buttons
RequiredFieldValidator RequiredFieldValidator1 = (RequiredFieldValidator)e.Row.FindControl("RequiredFieldValidator1");
RequiredFieldValidator RequiredFieldValidator2 = (RequiredFieldValidator)e.Row.FindControl("RequiredFieldValidator2");
RequiredFieldValidator RequiredFieldValidator3 = (RequiredFieldValidator)e.Row.FindControl("RequiredFieldValidator3");
Button Button = (Button)e.Row.FindControl("Button1");
//Assign validation group to controls.
RequiredFieldValidator1.ValidationGroup = "Gridview1" + e.Row.RowIndex.ToString();
RequiredFieldValidator2.ValidationGroup = "Gridview1" + e.Row.RowIndex.ToString();
RequiredFieldValidator3.ValidationGroup = "Gridview1" + e.Row.RowIndex.ToString();
Button.ValidationGroup = "Gridview1" + e.Row.RowIndex.ToString();

Adding order buttons to a GridView

I have an example from this gridview:
<asp:GridView ID="GridView3" runat="server">
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("id") %>'></asp:Label>
</ItemTemplate>
<ItemStyle></ItemStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("name") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("nome")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And I would like to add a button for ordering the data in each column.
Somebody can help me find the best way to do this?
Sorting is built into the GridView control. There is a control Property called AllowSorting, set this to True and you can sort columns by clicking on the header row titles.
There is no need to add extra buttons, even if you want to do some type of special sorting, you'd still Handle the Sorting event and implement your own methods

set value of textbox from code behind

I'm using asp and have some textboxes where I want to set the value from code behind. The code below is wrapped inside an asp:DetailsView.
The Textbox I want to get and set value of is InsertItemTemplate with ID=strPositionsName
<asp:TemplateField HeaderText="Name" SortExpression="strPositionName">
<InsertItemTemplate>
<asp:TextBox ID="strPositionName" Width="380px" MaxLength="49" runat="server" Text='<%# Bind("strPositionName") %>'></asp:TextBox>
</InsertItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="Textbox1" Width="380px" MaxLength="49" runat="server" Text='<%# Bind("strPositionName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Width="380px" Text='<%# Bind("strPositionName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
I managed to get the value by:
var testName = ((TextBox)DetailsView1.FindControl("strPositionName")).Text;
So I tried using this:
((TextBox)DetailsView1.FindControl("strPositionName")).Text = "textboxvalue";
But it didn't work
Try Following Code
TextBox _txtPositionName=(TextBox)DetailsView1.FindControl("strPositionName");
if(_txtPositionName!=null)
_txtPositionName.Text="textboxvalue";

Gridview how to Subtract two item

I have a grid view.In this i want balance= total paid leave-paid leave taken
what shoul i do
<asp:TemplateField HeaderText="Total Paid Leaves" SortExpression="Location_name">
<EditItemTemplate>
<asp:TextBox ID="txttotal_paid_leaves" runat="server" Text='<%# Eval("total_paid_leaves") %>'>
</asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtNewtotal_paid_leaves" runat="server"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("total_paid_leaves") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Paid Leaves taken">
<EditItemTemplate>
<asp:TextBox ID="txtpaid_leaves_taken" runat="server" Text='<%# Bind("paid_leaves_taken") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtNewpaid_leaves_taken" runat="server">
</asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="lblpaid_leaves_taken" runat="server" Text='<%# Bind("paid_leaves_taken") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Balance">
<ItemTemplate>
----Please guide me in this part----
</ItemTemplate>
</asp:TemplateField>
you can try like this
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%#Convert.ToInt32(Eval("TotalLeave")) -Convert.ToInt32(Eval("LeaveTaken")) %>'></asp:Label>
</ItemTemplate>
Why don't you do that calculation in sql? That's better and easy to manage.
for eample
SELECT TOTAL_LEAVE, LEAVE_TAKEN, (TOTAL_LEAVE - LEAVE_TAKEN) BALANCE
FROM TABLE
WHERE .......

Categories