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
Related
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>
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") %>'/>
I have a problem with adding a new row with several controls like textBoxes into Header of GridView. When I add them into Header in GridView_RowCreated method with ...
if (e.Row.RowType == DataControlRowType.Header)
{
GridViewRow r = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
TableCell tc = new TableCell();
.. they always are put into first row, not second. How can I change it? I want my created row put in second Header Row. I tried to do it by myself, Firstly, I modified ShowHeader into false and add both first and second rows programmatically, but it is wrong way, aspecially when grid has no data to show but it is necessary to show header. I found this discussion similar discussion, but intellisence doesn't know about override PrepareControlHierarchy. I tried to search it with Object browser, and found that this is method of GridView, but I couldn't plug it and test. Maybe somebody knows easier solution for this prob.
I need some assist.
UPDATED!!!
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" DataKeyNames="username" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None" onrowcreated="GridView1_RowCreated">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="username" SortExpression="username">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("username") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name" SortExpression="Name">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Surname" SortExpression="Surname">
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("Surname") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
UPDATED!!!!
Yes, profs you are right, in my case it is the easiest way to put controls in HeaderTemplate. I forgot about it. But I have a little question, how can I add names of columns without adding additional Labels? Here is my code:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" DataKeyNames="username" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None" onrowcreated="GridView1_RowCreated">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField **HeaderText="username"** SortExpression="username">
<HeaderTemplate>
**<asp:Label ID="Label4" runat="server" Text="username"></asp:Label>**<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("username") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name" SortExpression="Name">
<HeaderTemplate>
<asp:Label ID="Label4" runat="server" Text="Name"></asp:Label><br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Surname" SortExpression="Surname">
<HeaderTemplate>
<asp:Label ID="Label4" runat="server" Text="Surname"></asp:Label><br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("Surname") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
I marked bold strings. If I leave without Label (just with HeaderText="username") it isn't show me any name in header column. Only if I add Labels it shows my names. What is wrong with it?
Dynamically you would have to add a second header row after every has been databound
Example in VB but you should be able to convert it easily enough.
Private Sub GridView1_DataBound(sender As Object, e As EventArgs) Handles GridView1.DataBound
// Add checks for row count.
// create a new row
Dim gvr As New GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal)
Dim gvc As TableCell
// Create a new empty cell
gvc = New TableCell()
//add a new TextBox to the cell
gvc.Controls.Add(New TextBox())
// Add the cell to the row
gvr.Cells.Add(gvc)
// repeat above as necessary
// Add row to Gridview at index 1 (0 is bound header)
// GridView1.Controls(0) is the Gridview table
GridView1.Controls(0).Controls.AddAt(1, gvr)
End Sub
The simplest solution is to not attempt to do it in the code behind. Instead utilize the HeaderTemplate for your TemplateFields.
Here is one as an example:
<asp:TemplateField HeaderText="username" SortExpression="username">
<HeaderTemplate>
username
<br />
<asp:TextBox ID="username" runat="server" />
</HeaderTemplate>
<ItemTemplate...
</asp:TemplateField>
I have a gridview with a hyperlink:
<asp:GridView ID="gvEmployees" runat="server" AutoGenerateColumns="False"
CssClass="table table-hover table-striped" GridLines="None" >
<Columns>
<asp:TemplateField HeaderText="Name" SortExpression="EmployeName">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server"
Text='<%# Bind("EmployeName") %>' ></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ID" SortExpression="EmployeID" Visible="False">
<ItemTemplate>
<asp:Label ID="lblID" runat="server" Text='<%# Bind("EmployeID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
However, it should only appear as a hyperlink if the employeeID is that of the logged in employee.
I can do all that, but what I do not know is how to make the hyperlink look like a Label. It's easy to have it not link anywhere, but I do not know how to make it look like a label.
Thanks
I believe if you set Enabled="false" it does. If it does not, then the only way to do that is put both a HyperLink and Label in the cell, and show the link when appropriate, and the label when appropriate, hiding the other one (which can be easily done in RowDataBound event).
I've inherited some code, littered with GridView's, and I've noticed the following sorts of references in the OnItemDataBound method:
Label lblSomething = (Label)e.Row.Cells[3].FindControl("lblSomething");
Label lblSomethingElse = (Label)e.Row.Cells[3].FindControl("lblSomethingElse");
The "issue" is that lblSomething and lblSomethingElse aren't actually in the same cell, but they both appear to be working correctly anyway. Simplifying a bit:
<Columns>
<asp:TemplateField runat="server" HeaderText="Online materials available to assign">
<ItemTemplate>
<asp:Label ID="lblThis" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Assign" HeaderStyle-Width="75px">
<ItemTemplate>
<asp:Label ID="lblThat" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Assign" HeaderStyle-Width="75px">
<ItemTemplate>
<asp:Label ID="lblSomething" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Assign" HeaderStyle-Width="75px">
<ItemTemplate>
<asp:Label ID="lblSomethingElse" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
Is this behavior expected? If it doesn't matter what cell I'm using the FindControl() with, can I safely/reliably simplify with this instead?
Label lblSomething = (Label)e.Row.FindControl("lblSomething");
Label lblSomethingElse = (Label)e.Row.FindControl("lblSomethingElse");
If not, is it reliable to just use Cells[0].FindControl()?
Should I be worried that the cell mismatch is working only by a happy accident, and that I need to fix these cell indexes ASAP, lest everything break?
Or, am I underestimating the power of FindControl()?
After some experimentation, I've found that the following works perfectly fine.
Label lblSomething = (Label)e.Row.FindControl("lblSomething");
Label lblSomethingElse = (Label)e.Row.FindControl("lblSomethingElse");
Whether this is "best practice" is beyond me.
Also, I've removed runat="server" from the first TemplateField in the markup to match the others. It's unnecessary, apparently. (Who knew?)
<Columns>
<asp:TemplateField HeaderText="Online materials available to assign">
<ItemTemplate>
<asp:Label ID="lblThis" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Assign" HeaderStyle-Width="75px">
<ItemTemplate>
<asp:Label ID="lblThat" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Assign" HeaderStyle-Width="75px">
<ItemTemplate>
<asp:Label ID="lblSomething" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Assign" HeaderStyle-Width="75px">
<ItemTemplate>
<asp:Label ID="lblSomethingElse" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
Label myLabel = e.row.FindControl("myControl") as Label;
if(myLabel !=null)
{
// Do some work
}
I prefer using as for casting.