Merge column header in gridview - c#

I've been try to merge the header column from 2 into 1, but the example and i already tried it with something like this
GridView.Controls[0].Controls.AddAt(0, oGridViewRow); the question and the example that floating around was just adding 1 column, and add it in the top of the old column, not merging it. So i want to actually merging 1 column and the rest of the column is still the same. Here is the picture of gridview column that i want to merge :
I want to Merge the "Action" column header from 2 into 1. So below the action column, there will be an edit and delete.
Oh i almost forgot, Here is the gridview code that handle the action column :
<asp:CommandField ShowEditButton="true" HeaderText="Action"/>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="linkDelete" runat="server"
CommandArgument = '<%# Eval("XXX")%>'
OnClientClick = "return confirm('Do you want to delete?')"
Text = "Delete" OnClick = "DeleteDetail"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>

Although I am strictly against hard-coding, this is what I have, you can write this in 'RowDataBound' event of gridview:-
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[3].ColumnSpan = 2;
e.Row.Cells[4].Visible = false;
e.Row.Cells[3].Text = "Action";
}
Here, You need the change the cell index according to your gridview design.

You can use Templates to customize how your column header and data look like
The below is a very simplified example that should show the desired result
But you will need to work on hadnling Edit and Delete actions your own way
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<div> Action </div>
</HeaderTemplate>
<ItemTemplate>
Edit | Delete
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
As you see, my idea is not merging the headers of both columns. Rather, I put the data of of both columns in a single column under single header. I think it achieves the same result.

Related

Rowdeleteing event in Gridview

I have been trying to write this simple logic of deleting a row from the gridview and from the SQL database of the selected row, but keep getting a null reference to cell, which has the primary key [ID] in a field.
Here's my html:
<asp:GridView ID="grvInventoryEdit" runat="server" BackColor="White" onrowdeleting="grvInventoryEdit_RowDeleting"
onrowediting="grvInventoryEdit_RowEditing"
onrowupdating="grvInventoryEdit_RowUpdating">
<Columns>
<asp:CommandField ShowEditButton="True" />
<asp:CommandField ShowDeleteButton="True" /><asp:TemplateField HeaderText="Id">
<ItemTemplate>
<%#Eval("No")%>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox runat="server" ID="txtEditNo" ReadOnly="True" Text='<%#Eval("No")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>........ </Columns> </asp:GridView>
And my back-end code for rowdeleting event is :
protected void grvInventoryEdit_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
TextBox id = (TextBox)grvInventoryEdit.Rows[e.RowIndex].FindControl("txtEditNo");
Asset asset = db.Assets.Single(a => a.No == Convert.ToInt32(id));
db.Assets.DeleteOnSubmit(asset);
db.SubmitChanges();
binddata();
}
and when the event fires, this is what i am seeing while debugging:
I am not sure why i am getting a null value ,though, there is a value for that cell.
Could you tell me what i am doing wrong ?
Regards,
Might be it is due to the readonly property of textbox, not suer.
If you want to use the image button for edit and delete then use
protected void ibtnDelete_Click(object sender, ImageClickEventArgs e)
{
GridViewRow gvRow = (GridViewRow)((ImageButton)sender).NamingContainer;
Int32 UserId = Convert.ToInt32(gvUsers.DataKeys[gvRow.RowIndex].Value);
// delete and hide the row from grid view
if (DeleteUserByID(UserId))
gvRow.Visible = false;
}
For complete code see
You are passing TextBox object instead instead of Text property of TextBox
Asset asset = db.Assets.Single(x=>x.No == Convert.ToInt32(id.Text));
and your TextBox is also coming null means it's unable to find it in GridView, try like this:
TextBox id = e.Row.FindControl("txtEditNo");
Also see this CodeProject article to understand how to use ItemTemplate and EditItemTemplate
why are you adding a second commandfield instead of just enabling the delete button on the existing one.
if you are using a command field you should be supplying an compatible datasource that provides Delete functionality
if you're "rolling your own" delete functionality then just use a regular Button control and supply a CommandName and CommandArgument, such as CommandName="MyDelete" CommandArgument=<row number> where <row number> is supplied via GridView RowDataBound() event.
Regardless of how you choose to implement Delete you should be placing the key field in the GridView DataKeys Property and not as a field within each row. This will make obtaining the PK far easier than what you are trying to do
I guess, in my HTML, i have only the value that's bound to the item, is being displayed, and there are no textboxes in my <ItemTemplate>, hence, it pulls null value. Whereas, in my <EditItemTemplate> there is a textbox, which can pull the value from the cell.
So I changed my HTML to this:
<asp:TemplateField HeaderText="Id">
<ItemTemplate>`<asp:label runat="server" ID="lblEditNo" ReadOnly="True" Text='<%#Eval("No")%>'></asp:label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox runat="server" ID="txtEditNo" ReadOnly="True" Text='<%#Eval("No")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
and no change in my codebehind, and this resolved the issue.

Hyperlink in Gridview which is autogenerated in C#

I have a Gridview which is autogenerated by fetching data from various tables.
Now my requirement is i need to make my first column as hyperlink so that if it is clicked then it has to navigate to another page with hyperlinked value.
In the second page i have Lable this label should show the hyperlink value and based on that the data will be populated on the second page.
For example:
I have a gridview with 10 columns..My first column is Emp Id.
If that id is clicked it has to take me to second page and the label control must get this id value and based on that id the rest of the info like emp name emp DOB should be filled.
i am using C# as my code behind.
Can anyone help me to proceed..
Awaiting ur reply
You need the <asp:HyperLinkField />
<asp:GridView>
<Columns>
<asp:HyperLinkField HeaderText="Id" DataTextField="YourID" DataNavigateUrlFields="YourID"
DataNavigateUrlFormatString="SecondPage.aspx?Id={0}" />
</Columns>
</asp:GridView>
You might need to remove the AutoGenerateColumns="true" property and type the fields yourself, selecting only the columns you want to show - using <asp:BoundFied DataField="ColumnName" />
In case you want to pass multiple values in the querystring, separate the fields with comma
DataNavigateUrlFields="YourID, SecondField"
and your format string would be
DataNavigateUrlFormatString="SecondPage.aspx?Id={0}&param2={1}"
Other links
HyperLinkField.DataNavigateUrlFormatString Property
How to pass multiple values in HyperlinkField
You can use a TemplateField column in your GridView:
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="linkToDetails" runat="server" NavigateUrl='Details.aspx?empId=<%# Eval("empId") %>' Text='<%# Eval("empId") %>'></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
On the Details.aspx page you should get the empId from the QueryString and get the details from the database.

GridView Row Number using Markup (only)

I have a requirement to display row number in grid view. What is the best way to display the row number using BoundField or TemplateField?
Note: This need to be done using markup only (without code behind).
Note: When sorting happens, the row number should not be in sequence, the first row should go down with its content.
I have already referred the following:
http://social.msdn.microsoft.com/forums/en-US/winformsdatacontrols/thread/2eead3e3-5cc2-40f7-a91c-8f7942d5329c/
<asp:TemplateField HeaderText="#" >
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
By the way, this solution proposed in article you referred. Why you don't like it and ask here?
The best place to do this would be to use the templatefield
<asp:TemplateField HeaderText="Row Number">
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
An examples http://www.devcurry.com/2010/01/add-row-number-to-gridview.html
The BoundField displays the value of specified DataSource field as text.
The TemplateField allows to mix html or make use of web controls.
Please refer to the following explanation to confirm the difference.
http://forums.asp.net/t/1804988.aspx/1
The gridview is rendered as html table. If you don't want to calculate the row number in code behind, you should use JQuery.
var rowCount = $('#myTable tr').length;
And you should fill the table footer with rowCount value.

Gridview Header customizing issue

If we add a customer header to the gridview, will it add extra row?
Currently I have a gridview with four columns and, when I add a custom header gridview coming with a five rows.
My code looks like this...
<asp:TemplateField HeaderText="" ItemStyle-Width="4%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<asp:DropDownList ID="Select" runat="server">
<asp:ListItem>Country</asp:ListItem>
<asp:ListItem>Region</asp:ListItem>
<asp:ListItem>Title</asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="" ItemStyle-Width="4%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:HiddenField ID="Id" Value='<%#Eval("id")%>' runat="server" />
<asp:Literal ID="ltrImage" runat="server"></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
and three other TemplateFields...
Is there any problem of adding header this way? Any other way to add customer header without having this issue?
My desired output should look like this
Search Result Search By (Dropdownlist)
Data column1 Data column2 Data column3 Data column4
The one I am getting now is
Sort By (Dropdownlist)
Data column1 Data column2 Data column3 Data column4
Could anyone help if have an idea?
Thanks in advance
You just added another column with custom header to your gridview. If you want to customize a header of the first column, just customize the header of your first template field:
<asp:TemplateField HeaderText="" ItemStyle-Width="4%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<asp:DropDownList ID="Select" runat="server">
<asp:ListItem>Country</asp:ListItem>
<asp:ListItem>Region</asp:ListItem>
<asp:ListItem>Title</asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<asp:HiddenField ID="Id" Value='<%#Eval("id")%>' runat="server" />
<asp:Literal ID="ltrImage" runat="server"></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
If this dropdownlist is too big or if you want add some additional text in the header, you can always create HeaderTemplate for other TemplateFields of merge some of the column's headers in code behind (example for "merging" two first headers, Id of the gridView is gridView1):
protected void gridView1_PreRender(object sender, EventArgs e)
{
int indexOfColumnToSpan = 0;
int indexOfColumnToRemoveHeader = 1;
gridView1.HeaderRow.Cells[indexOfColumnToSpan].ColumnSpan = 2;
gridView1.HeaderRow.Cells.RemoveAt(indexOfColumnToRemoveHeader);
}
well, you have not actually added a header row, but a header column .. which is basically just another column with more controls ..
why dont you place your DropDownList before your GridView, and then you can write some code behind handling the DropDownList_SelectedIndexChanged event to sort the Data ?
I have implemented this without using the filters within the GridView. Then you can handle the events separately, and populate the GridView accordingly.
What you are actually adding is a column, instead of a row. That's why you are getting that result.
Hope this helps!

Asp.net table display using grid view and deleting one row in the website

I am displaying a table in a grid view in a asp.net webpage. I want the user to select one row in the website and delete it. How can I do that. I have a delete button in the same page, where I will do code behind to drop the row in the database. But my problem is how can user select one row in the table .
<asp:GridView ID="GridView1" runat="server" CssClass="style29">
<Columns>
<asp:TemplateField HeaderText="Send Message to Group">
<ItemTemplate>
<asp:LinkButton ID="LinkButton2" runat="server"
PostBackUrl='<%# Eval("GroupName", "SendMessage.aspx?GroupName={0}") %>'
Text='Send Message'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Is it possible to do without a check box? Or can I add a delete image to the table in a separate column and on clicking the button the row will be deleted.
You should add:
<asp:CommandField ShowSelectButton="True"/>
on your gridview.
Use ICallbackEventHandler to trigger an action on the server.
But my problem is how can user select one row in the table .
this code adds a Select button:
<asp:CommandField ShowSelectButton="True" />
Now your problem is only to get the server to execute some piece of code, do that using ICallbackEventHandler or Ajax.

Categories

Resources