<asp:GridView ID="GridView1" runat="server"
AllowPaging="True" AllowSorting="True"
DataMember="DefaultView"
DataSourceID="SqlDataSource1"...
>
<RowStyle BackColor="#EFF3FB" />
<Columns>
<asp:BoundField ...
<asp:CommandField ButtonType="Image" DeleteText="Delete" ShowDeleteButton="True" DeleteImageUrl="images/deletered1.png"></asp:CommandField>
</Columns>
<FooterStyle BackColor="#507CD1" .../>
</asp:GridView>
I have a grid view with a an <asp:CommandField> in every row but I can't find a prperty to set a tooltip text("delete") or confirm message box (something like "Are you sure?" Yes No)
Try converting your CommandField to a TemplateField, like this:
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:Button ID="deleteButton" runat="server" CommandName="Delete" Text="Delete"
OnClientClick="return confirm('Are you sure you want to delete this user?');" />
</ItemTemplate>
</asp:TemplateField>
Then you just need to handle your Command in code-behind.
I'm trying to validate a page on our ASP.Net site that the developers used a gridview on. It seems that initially they are using a "placeholder" gridview that is getting hidden or visible based on some buttons being clicked to show data. Before these button clicks however, I'm seeing an empty table and the validation tool I'm using is complaining about no tbody or tr tags. Is there a way to completely hide the table tag or alternately to insert a tbody/tr within the hidden gridview?
Here is the gridview tag in the aspx.vb file:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" summery="This table displays system notification items."
AllowPaging="True" PagerSettings-Position="Top" PagerStyle-HorizontalAlign ="Right" PageSize ="15" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="image1" runat="server" ImageUrl="~/cmsicons/flag_red.gif" AlternateText="Overdue" Visible='<%# Eval("IsVisible")%>'/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataFormatString="{0:MM/dd/yyyy}" DataField="showdate" HeaderText="Due Date"
SortExpression="showdate" />
<asp:BoundField DataFormatString="{0:MM/dd/yyyy}" DataField="ModifiedDate" HeaderText="ModifiedDate"
SortExpression="ModifiedDate" />
<asp:TemplateField HeaderText="Data ID" SortExpression="DataRecordID">
<ItemTemplate>
<asp:HyperLink text='<%# Eval("DataRecordID") %>' runat="server" NavigateUrl='<%# Eval("DataRecordID", "CMSManageAllDataRecord.aspx?dataid={0}") %>' ></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="RecordName" HeaderText="Title"
SortExpression="RecordName" />
<asp:BoundField DataField="subcdrl" HeaderText="CDRL Number"
SortExpression="subcdrl" />
<asp:BoundField DataField="subcdrl" HeaderText="Sub Cdrl Count"
SortExpression="subcdrl" Visible ="false" />
<asp:BoundField DataField="StatusName" HeaderText="Status"
SortExpression="StatusName" />
</Columns>
<EmptyDataTemplate>
<div>No Data found</div>
</EmptyDataTemplate>
<FooterStyle CssClass="GridViewFooterStyle" />
<RowStyle CssClass="GridViewRowStyle" />
<SelectedRowStyle CssClass="GridViewSelectedRowStyle" />
<AlternatingRowStyle CssClass ="GridViewAlternatingRowStyle" />
<PagerStyle CssClass="GridViewPagerStyle" HorizontalAlign="Right" />
<HeaderStyle CssClass="GridViewHeaderStyle" />
</asp:GridView>
And here is the output I see when I view source:
<div class="AspNet-GridView" id="ctl00_ContentPlaceHolder1_GridView1">
<table cellpadding="0" cellspacing="0" summary="">
</table>
</div>
You can definitely hide it with Javascript, if that's an option, one way would be
<script>
function hideGV(){
document.getElementById('<%=GridView1.ClientID%>').style.display='none';
}
</script>
If rather want to insert the tbody/tr elements and using jQuery is an option for you, here's an example.
jQuery option to insert tbody/tr
<script>
$(function(){
$('#<%=GridView1.ClientID%>').append('<tbody><tr><td></td></tr></tbody>');
});
</script>
I am really frustrated to find a solution for my scenario. I have two gird when First grid is used show the shop information and the second grid is used to edit the offers related to the shop information. When the users edit the second grid i will just update the text box values related to the grid selection row. in my code behind file i can see the data fetching from the grid and assigning into the text boxes but when the function call (imgEdit_click) finished the page does not show the values. Editing functionality can be done in many ways but my scenario is what i explained earlier . I have the checked page there is no Postback action has been called after the method I could not find the solution can anyone help me to figure it out.
Following are my source and code behind codes.
My design Source :
<div class="field">
<asp:TextBox ID="txtareaOfferDesc" runat="server" TextMode="MultiLine" ></asp:TextBox>
</div>
<div class="field">
<asp:TextBox ID="txtTimeStarts" runat="server" CssClass="textfield"></asp:TextBox>
<cc1:CalendarExtender
ID="CalendarExtender2"
runat="server"
TargetControlID="txtTimeStarts"
CssClass="CalendarCSS">
</cc1:CalendarExtender>
<div class="datefld">
<label class="name">Offer end date/time (optional)</label>
<div class="field">
<asp:TextBox ID="txtTimeEnd" runat="server" CssClass="textfield"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender4" runat="server" TargetControlID="txtTimeEnd"
CssClass="CalendarCSS">
</cc1:CalendarExtender> `
<asp:GridView ID="gvShopDeal" runat="server" AutoGenerateColumns="false"
CssClass="tblexistoffer" DataKeyNames="ShopID" AllowPaging="True"
AllowSorting="True">
<Columns>
<asp:TemplateField>
<HeaderTemplate >
<asp:CheckBox ID="chkHeader" runat="server" />
<asp:Label ID="lblSelectAll" Text="Select All" runat="server"></asp:Label>
</HeaderTemplate>
<ItemTemplate >
<asp:CheckBox ID="chkRow" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ShopID" HeaderStyle-Width="10%" HeaderText="Shop ID" />
<asp:BoundField DataField="ShopName" HeaderStyle-Width="40%" HeaderText="Shop Name" />
<asp:BoundField DataField="Street" HeaderStyle-Width="40%" HeaderText="Street" />
<asp:BoundField DataField="City" HeaderText ="City" />
</Columns>
</asp:GridView>
<asp:Button ID="btnCreateDeal" runat="server" Text="Create Offer"
CssClass="grnbtn" OnClientClick="return CheckDealValidation(this)" onclick="btnCreateDeal_Click"></asp:Button>
<asp:Button ID="btnDefCancel" runat="server" Text="Cancel" CssClass="greybtn"></asp:Button>
<asp:UpdatePanel ID="UpdateExistingOffer" runat="server">
<ContentTemplate>
<asp:GridView ID="gvExistingOffers" runat="server" CssClass="tblexistoffer"
AutoGenerateColumns="false" DataKeyNames="OfferID" AllowPaging="True"
AllowSorting="True">
<Columns>
<asp:BoundField DataField="OfferID" HeaderText="OfferID" />
<asp:BoundField DataField="Description" HeaderText="OfferName" />
<asp:BoundField DataField="Status" HeaderText="Status" />
<asp:BoundField DataField="OfferType" HeaderText="OfferType" />
<asp:BoundField DataField="StartDate" HeaderText="StartDate">
<ItemStyle CssClass="Hide" />
<HeaderStyle CssClass="Hide" />
</asp:BoundField>
<asp:BoundField DataField="EndDate" HeaderText="EndDate" >
<ItemStyle CssClass="Hide" />
<HeaderStyle CssClass="Hide" />
</asp:BoundField>
<asp:TemplateField HeaderText="Edit" HeaderStyle-Width="5%">
<ItemTemplate>
<asp:ImageButton ID="imgbtnEdit" ImageUrl="~/Merchant/images/edit.jpg" runat="server" Width="25" Height="25" onclick="imgbtnEdit_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Code Behind File :
protected void imgbtnEdit_Click(object sender, ImageClickEventArgs e)
{
ImageButton btndetails = sender as ImageButton;
GridViewRow gvrow = (GridViewRow)btndetails.NamingContainer;
fferIDForShop = Convert.ToInt32(gvExistingOffers.DataKeys[gvrow.RowIndex].Value);
ShopList objShopID = ShopService.GetShopID(OfferIDForShop);
(txtareaOfferDesc.Text) = gvrow.Cells[1].Text.Trim();
txtTimeStarts.Text = gvrow.Cells[4].Text;
txtTimeEnd.Text = gvrow.Cells[5].Text;
}
Thanks
Vijay
Issue is because textboxes are out of Update Panel, So just put everything in update panel it will start functioning or just comment out update panel and then try the same thing.
I have a gridview. Is it possible to modify the gridview so that I can have multiple rows in the column headers? For example, the following code generates the table in the picture below.
<asp:GridView ID="productsGridView" Runat="server" DataSourceID="productDataSource" AutoGenerateColumns="False" AllowSorting="True" BorderWidth="2px"
BackColor="White" GridLines="None" CellPadding="3" CellSpacing="1" BorderStyle="Ridge" BorderColor="White" AllowPaging="True">
<FooterStyle ForeColor="Black" BackColor="#C6C3C6"></FooterStyle>
<PagerStyle ForeColor="Black" HorizontalAlign="Right" BackColor="#C6C3C6"></PagerStyle>
<HeaderStyle ForeColor="#E7E7FF" Font-Bold="True" BackColor="#4A3C8C"></HeaderStyle>
<Columns>
<asp:BoundField HeaderText="Product" DataField="ProductName" SortExpression="ProductName"></asp:BoundField>
<asp:BoundField HeaderText="Unit Price" DataField="UnitPrice" SortExpression="UnitPrice" DataFormatString="{0:c}">
<ItemStyle HorizontalAlign="Right"></ItemStyle>
</asp:BoundField>
<asp:BoundField HeaderText="Units In Stock" DataField="UnitsInStock" SortExpression="UnitsInStock" DataFormatString="{0:d}">
<ItemStyle HorizontalAlign="Right"></ItemStyle>
</asp:BoundField>
<asp:BoundField HeaderText="Quantity Per Unit" DataField="QuantityPerUnit"></asp:BoundField>
</Columns>
<SelectedRowStyle ForeColor="White" Font-Bold="True" BackColor="#9471DE"></SelectedRowStyle>
<RowStyle ForeColor="Black" BackColor="#DEDFDE"></RowStyle>
</asp:GridView>
This table only has one row in the column header. What I am looking for is something like this:
Any Ideas on how I can achieve this? Is this even possible?
If you use a TemplateField instead, you can control the header template as well, which can be custom ASPX markup. The downside is that you have to display the data manually with Labels instead of using the simpler BoundField properties. However, this also allows you to layout the data in a custom layout to fit with the heading:
<Columns>
<asp:TemplateField>
<HeaderTemplate>
Weight<br />
Date | Time<br />
Product
</HeaderTemplate>
<ItemTemplate>
<asp:Label runat="server" Text='<%#Eval("Weight") %>'></asp:Label><br />
<asp:Label runat="server" Text='<%#Eval("Date") %>'></asp:Label> |
<asp:Label runat="server" Text='<%#Eval("Time") %>'></asp:Label><br />
<asp:Label runat="server" Text='<%#Eval("Product") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
I dragged and dropped a GridView from toolbox to Aspx page.the design code looks like this
<asp:GridView ID="gridview1" runat="server" style="text-align:center;width: 1327px;"
CellPadding="4" ForeColor="#333333" GridLines="None" AllowPaging="True"
EnableSortingAndPagingCallbacks="True" PageSize="50" AutoGenerateEditButton="True">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center"
Height="12px" VerticalAlign="Bottom" Width="12px" Wrap="False" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
I have a column by name Address in database.The table is bound to this grid view using following VB.NET code
Dim ds as Data.DataSet
Dim da As New OleDbDataAdapter("select col1,col2,col3,col4,col5,col6,col7,col8,col9,col10,Address from table, con)
da.Fill(ds)
gridviewrealestate.DataSource = ds
gridviewrealestate.DataBind()
Now,When the gridview is displayed,the columns are very close to each other due to large information present in Address Column.I want to set the Address Column to a particular width.
Please help me how to do this.
<asp:GridView ID="GridView1" runat="server">
<HeaderStyle Width="10%" />
<RowStyle Width="10%" />
<FooterStyle Width="10%" />
<Columns>
<asp:BoundField HeaderText="Name" DataField="LastName"
HeaderStyle-Width="10%" ItemStyle-Width="10%"
FooterStyle-Width="10%" />
</Columns>
</asp:GridView>
I know this is an old Question, but it popped up when I was looking for a solution to the same issue, so I thought that I would post what worked for me.
<asp:BoundField DataField="Description" HeaderText="Bond Event" ItemStyle-Width="300px" />
I used the ItemStyle-Width attribute on my BoundField and it worked very nicely I haven't had any issues yet.
I didn't need to add anything else to the rest of the code to make this work either.
Set width
HeaderStyle-width
for Example HeaderStyle-width="10%"
This what worked for me. set HeaderStyle-Width="5%", in the footer set textbox
width Width="15",also set the width of your gridview to 100%. following is the one of the column of my gridview.
<asp:TemplateField HeaderText = "sub" HeaderStyle-ForeColor="White" HeaderStyle-Width="5%">
<ItemTemplate>
<asp:Label ID="sub" runat="server" Font-Size="small" Text='<%# Eval("sub")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txt_sub" runat="server" Text='<%# Eval("sub")%>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txt_sub" runat="server" Width="15"></asp:TextBox>
</FooterTemplate>
You need to convert the column into a 'TemplateField'.
In Designer View, click the smart tag of the GridView, select-> 'Edit columns'.
Select your column you wish to modify and press the hyperlink converting it to a template. See screenshot:
Converting column to template.
Note: Modifying your datasource might regenerate the columns again, so it might make changes to your template columns.
Ref: https://msdn.microsoft.com/en-us/library/bb288032.aspx
Add HeaderStyle-Width and ItemStyle-width to TemplateFiels
<asp:GridView ID="grdCanceled" runat="server" AutoGenerateColumns="false" OnPageIndexChanging="grdCanceled_PageIndexChanging" AllowPaging="true" PageSize="15"
CssClass="table table-condensed table-striped table-bordered" GridLines="None">
<HeaderStyle BackColor="#00BCD4" ForeColor="White" />
<PagerStyle CssClass="pagination-ys" />
<Columns>
<asp:TemplateField HeaderText="Mobile NO" HeaderStyle-Width="10%" ItemStyle-Width="10%">
<ItemTemplate>
<%#Eval("mobile") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name" HeaderStyle-Width="10%" ItemStyle-Width="10%">
<ItemTemplate>
<%#Eval("name") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City" HeaderStyle-Width="10%" ItemStyle-Width="10%">
<ItemTemplate>
<%#Eval("city") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Reason" HeaderStyle-Width="25%" ItemStyle-Width="25%">
<ItemTemplate>
<%#Eval("reson") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Agent" HeaderStyle-Width="10%" ItemStyle-Width="10%">
<ItemTemplate>
<%#Eval("Agent") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date" HeaderStyle-Width="10%" ItemStyle-Width="10%">
<ItemTemplate>
<%#Eval("date","{0:dd-MMM-yy}") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="DList" HeaderStyle-Width="10%" ItemStyle-Width="10%">
<ItemTemplate>
<%#Eval("service") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="EndDate" HeaderStyle-Width="10%" ItemStyle-Width="10%">
<ItemTemplate>
<%#Eval("endDate","{0:dd-MMM-yy}") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="5%" ItemStyle-Width="5%">
<ItemTemplate>
<asp:CheckBox data-needed='<%#Eval("userId") %>' ID="chkChecked" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
There are two steps:
You must set an appropriate width for GridView like this: Width="2000px".
You can set width of Colum by setting [ItemStyle-Width] Like this: ItemStyle-Width="300px".
** You can set width by setting fixed Pixels like "150 px" or by percentage like"10%".
<asp:BoundField DataField="ElementName" HeaderText="RBI GL Name" ItemStyle-Horizontal ItemStyle-Width="50px" HeaderStyle-Width="50px"/>