ASP.NET How to recreate the following HTML in a Gridview - asp.net

Hey I am trying to recreate the following HTML
<table border="0" cellspacing="0" cellpadding="2" width="100%" id="productListTable">
<tr>
<th rowspan="2">Product Name</th>
<th rowspan="2" >Pack Size</th>
<th rowspan="2" >Trade Price</th>
<th colspan="2" style="border:none;">Discount</th>
<th rowspan="2" >Actual Price</th>
<th rowspan="2">Stock</th>
<th rowspan="2">Quantity</th>
</tr>
<tr class="sub">
<th >PLC</th>
<th >Total</th>
</tr>
In my Gridview the first tr is no problem as this can just be standard header text in my columns but I am wondering how I can add this sub tr
<tr class="sub">
<th >PLC</th>
<th >Total</th>
</tr>
And also how to add this style, to my existing column
<th colspan="2" style="border:none;">Discount</th>
Heres my gridview at the moment
<asp:GridView ID="productListTable" runat="server" DataSourceID="srcProductListPerCustomer" AutoGenerateColumns="False" AlternatingRowStyle-CssClass="tr_dark" HeaderStyle-CssClass="header_req" BorderWidth="0px" GridLines="None" AllowPaging="true" PageSize="25" EmptyDataText="No records." AllowSorting="false" Width="100%" DataKeyNames="product_ID_key" OnRowDataBound="productListTable_RowDataBound" OnRowCommand="productListTable_RowCommand" >
<Columns>
<asp:TemplateField HeaderText="Product Name" HeaderStyle-Width="250px" SortExpression="productName" ItemStyle-CssClass="product_name" >
<ItemTemplate>
<asp:Label ID="ProductNameField" runat="server" Text='<%# Eval("productName").ToString() %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Pack Size" HeaderStyle-Width="70px" SortExpression="packSize">
<ItemTemplate>
<asp:Label ID="PackSizeField" runat="server" Text='<%# Eval("packSize").ToString()%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Trade Price" HeaderStyle-Width="130px" SortExpression="address">
<ItemTemplate>
<asp:Label ID="TradePriceField" runat="server" Text='<%# DisplayMoney(Eval("tradePrice").ToString())%>'></asp:Label>
<asp:Label ID="TradePriceFieldHidden" runat="server" Text='<%# Eval("tradePrice").ToString()%>' Visible="false"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Discount" HeaderStyle-Width="60px" SortExpression="discount">
<ItemTemplate>
<asp:Label ID="DiscountField" runat="server" Text='<%# Eval("discount").ToString() + "%" %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Actual Price" HeaderStyle-Width="130px" SortExpression="actualPrice">
<ItemTemplate>
<asp:Label ID="ActualPriceField" runat="server" Text='<%# DisplayMoney(Eval("actualPrice").ToString())%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Stock" HeaderStyle-Width="130px" SortExpression="stock_indicator">
<ItemTemplate>
<asp:Label ID="StockField" runat="server" Text='<%# DisplayStockLevel(Eval("stock_indicator").ToString()) %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtQuantity" Columns="5"></asp:TextBox><br />
<asp:LinkButton runat="server" ID="btnRemove" Text="Remove" CommandName="Remove" CommandArgument='<%# Eval("product_ID_key") %>' style="font-size:12px;" Visible="false"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle CssClass="header_req" />
<AlternatingRowStyle CssClass="tr_dark" />
<PagerStyle CssClass="pagination" />
<PagerSettings PageButtonCount="3" FirstPageText="First" LastPageText="Last" NextPageText="Next" PreviousPageText="Previous" Mode="NumericFirstLast" />
</asp:GridView>

I'm not sure about your current scenario, but it seems like you might want to take a look at the ListView control.
Out of the box GridView tends to create a ton of extra HTML to get it to look right. I'm not sure you'll ever be able to get exactly what you're looking for that way.
I did see that you have some paging stuff in there; if you go the ListView route, you'll want to use a DataPager as well.

I would use a ListView instead. It's a little more flexible, and you can just spit out table rows through the item template. It won't be the prettiest HTML ever, but if you're looking to use one of the provided ASP.NET controls for the job, that's probably the most forgiving.
I think you can get away with something like this:
<table cellpadding="3" cellspacing="0">
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<tr>
<td>Test</td>
<td>Test again</td>
</tr>
</ItemTemplate>
</asp:DataList>
</table>

Related

ASPX Gridview - Stretch Datacell over multiple rows

I have a gridview in my APSX that looks like below:
I want to be able to stretch the 'Comments' data cells so they stretch to the bottom of each section (stretch an extra 3 cells down)
I have tried numerous things and nothing seems to be working for me, I was wondering if anyone could point me in the right direction to do this.
This is the code I am using for my Gridview..
...
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%" HeaderText="Project Name">
<ItemTemplate>
<asp:Label ID="ProjectNameLab" runat="server" Text='<%# Bind("[Project Name]")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%" HeaderText="Customer Name" SortExpression="Customer Name">
<ItemTemplate>
<asp:Label ID="CustomerNameLab" runat="server" Text='<%# Bind("[Customer Name]")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%" HeaderText="Month" SortExpression="Month">
<ItemTemplate>
<asp:Label ID="MonthLab" runat="server" Text='<%# Bind("Month")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%" HeaderText="App Date" SortExpression="ApplicationDate">
<ItemTemplate>
<asp:Label ID="ApplicationDateLab" runat="server" Text='<%# Bind("ApplicationDate")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="12%" HeaderText="Value" SortExpression="ThisApp">
<ItemTemplate>
<asp:LinkButton ID="ThisAppLab" runat="server" Text='<%# Bind("ThisApp")%>'></asp:LinkButton>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
Enabled="True" PopupControlID="EditPopup1" TargetControlID="ThisAppLab"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%" HeaderText="Comments" SortExpression="Comments">
<ItemTemplate>
<asp:Label ID="CommentsLab" runat="server" Text='<%# Bind("Comments")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="true">
<ItemTemplate>
<tr>
<td colspan="5">
<td>
<asp:Label Style="padding: 0px 0px 0px 0px" Width="100%" ID="PaidLbl" runat="server" Text='<%# Bind("Paid")%>'></asp:Label>
<itemstyle width="100%" />
</td>
</td>
</tr>
<tr>
<td colspan="5"></td>
<td>
<asp:Label Style="padding: 0px 0px 0px 0px" Width="100%" ID="DifferenceLbl" runat="server"></asp:Label>
<itemstyle width="100%" />
</td>
</tr>
<tr>
<td colspan="5"></td>
<td>
<asp:Label Style="padding: 0px 0px 0px 0px" Width="100%" ID="DateFP" runat="server" Text='<%# Bind("Date")%>'></asp:Label>
<itemstyle width="100%" />
</td>
</tr>
<tr>
<td colspan="5"></td>
<td>
<asp:Label Style="padding: 0px 0px 0px 0px; visibility: hidden" Width="100%" ID="BlankRowLbl" Text="Blank" runat="server"></asp:Label>
<itemstyle width="100%" />
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Any help or advice would be appreciated, Thank you in advance.
Within your template field you should add a table and set the row span to the amount of rows that you want. Something like :
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%" HeaderText="Comments" SortExpression="Comments">
<ItemTemplate>
<table>
<tr>
<td rowspan="3">
<asp:Label ID="CommentsLab" runat="server" Text='<%# Bind("Comments")%>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
EDIT: Try putting the cell in the other template field as another column instead of its own template field.

Page containing multiple Gridview RowEditing Event not firing

Web page is designed using .Net framework 4.5. Web pages contains 3 Grid views as follows:
Code for Gridview is as follows:
<asp:GridView ID="grdADetails" runat="server" AutoGenerateColumns="False" CssClass="tGrid" GridLines="Horizontal" ShowFooter="True" Width="100%" OnRowCancelingEdit="grdADetails_RowCancelingEdit" OnRowCommand="grdADetails_RowCommand" OnRowDataBound="grdADetails_RowDataBound" OnRowDeleting="grdADetails_RowDeleting" OnRowEditing="grdADetails_RowEditing" OnRowUpdating="grdADetails_RowUpdating">
<Columns>
<asp:TemplateField HeaderText="Mode Of Transport">
<EditItemTemplate>
<asp:DropDownList ID="DrpTMode" runat="server" CssClass="trvGridCmbBox" Width="90%">
</asp:DropDownList>
</EditItemTemplate>
<FooterTemplate>
<table border="0" cellpadding="0" cellspacing="0" style="WIDTH: 100%">
<tr>
<td class="tGridTotal" style="Height : 25px;"></td>
</tr>
<tr>
<td class="GridEditArea" style="Height : 25px;">
<asp:DropDownList ID="DrpNTMode" runat="server" CssClass="trvGridCmbBox" Font-Size="8pt" Width="98%">
</asp:DropDownList>
</td>
</tr>
</table>
</FooterTemplate>
<HeaderTemplate>
<asp:Label ID="lblTMode" runat="server" Text="<%$ Resources:EResources, lblModeOfT %>" Width="100%"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblESubTypeCode" runat="server" Text='<%# Bind("ESubTypeCode") %>' Visible="False"></asp:Label>
<asp:Label ID="lblTMode" runat="server" Text='<%# Bind("TMode") %>'></asp:Label>
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="12%" />
</asp:TemplateField>
//For Date part using Ajax Control
<asp:TemplateField HeaderText="Departure On">
<EditItemTemplate>
<asp:TextBox ID="txtDeptOn" runat="server" CssClass="trvGridTextBox" Text='<%# Bind("DeptOn") %>' Width="90%"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="ceDeptOn" runat="server" Format="MM/dd/yyyy" TargetControlID="txtDeptOn" Enabled="true" Animated="true" EnabledOnClient="true" EnableViewState="true" FirstDayOfWeek="Default"/>
</EditItemTemplate>
<FooterTemplate>
<table border="0" cellpadding="0" cellspacing="0" style="WIDTH: 100%">
<tr>
<td class="tGridTotal" style="Height : 25px;"></td>
</tr>
<tr>
<td class="GridEditArea" style="Height : 25px;">
<asp:TextBox ID="txtNewDeptOn" runat="server" CssClass="trvGridTextBox" Width="100%"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="ceNewDeptOn" runat="server" Enabled="true" Format="MM/dd/yyyy" TargetControlID="txtNewDeptOn" Animated="true" EnabledOnClient="true" EnableViewState="true" FirstDayOfWeek="Default"/>
</td>
</tr>
</table>
</FooterTemplate>
<HeaderTemplate>
<asp:Label ID="lblDepartureOn" runat="server" Text="<%$ Resources:EASEResources, lblDeparOn %>" Width="100%"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblDeptOn" runat="server" Text='<%# Bind("DeptOn") %>'></asp:Label>
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="10%" />
</asp:TemplateField>
//Same as above for remaining columns
//For Edit button column
<asp:TemplateField HeaderText="Edit">
<EditItemTemplate>
<asp:ImageButton ID="ImgUpdate" runat="server" CommandName="Update" ImageUrl="~/PL/images/save.png" />
<asp:ImageButton ID="ImageButton4" runat="server" CommandName="Cancel" ImageUrl="~/PL/images/remove1.png" />
</EditItemTemplate>
<FooterTemplate>
<table border="0" cellpadding="0" cellspacing="0" style="WIDTH: 100%">
<tr>
<td class="tGridTotal" style="height: 25px"></td>
</tr>
<tr>
<td class="GridEditArea" aria-orientation="vertical" style="height: 25px">
<asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="False" CommandName="AddNew" CssClass="trvGridTextBox" ImageUrl="~/PL/images/save.png" />
</td>
</tr>
</table>
</FooterTemplate>
<HeaderTemplate>
<asp:Label ID="lblEdit" runat="server" Text="<%$ Resources:EResources, lblEdit %>" Width="100%"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:ImageButton ID="ImageButton2" runat="server" CommandName="Edit" ImageUrl="~/PL/images/edit.png" />
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="4%" />
</asp:TemplateField>
Remaining two grid views are created in the similar format.
<asp:GridView ID="GrdTDetail" runat="server" AutoGenerateColumns="False" CssClass="travelGrid" GridLines="Horizontal" ShowFooter="True" Width="100%" OnRowCancelingEdit="GrdTDetail_RowCancelingEdit" OnRowCommand="GrdTDetail_RowCommand" OnRowDataBound="GrdTDetail_RowDataBound" OnRowDeleting="GrdTDetail_RowDeleting" OnRowEditing="GrdTDetail_RowEditing" OnRowUpdating="GrdTDetail_RowUpdating">
<Columns>
//Other Column Code
//Edit Column Code.
<asp:TemplateField HeaderText="Edit">
<EditItemTemplate>
<asp:ImageButton ID="ImageButton3" runat="server" CausesValidation="False" CommandName="Update" ImageUrl="~/PL/images/save.png" />
<asp:ImageButton ID="ImageButton4" runat="server" CausesValidation="False" CommandName="Cancel" ImageUrl="~/PL/images/remove1.png" />
</EditItemTemplate>
<FooterTemplate>
<table border="0" style="WIDTH: 100%">
<tr>
<td class="travelGridTotal" style="Height : 25px;"></td>
</tr>
<tr>
<td class="GridEditArea" style="Height : 25px;">
<asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="False" CommandName="AddNewACC" CssClass="trvGridTextBox" ImageUrl="~/PL/images/save.png" />
</td>
</tr>
</table>
</FooterTemplate>
<HeaderTemplate>
<asp:Label ID="lblEdit" runat="server" Text="<%$ Resources:EResources, lblEdit %>" Width="100%"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:ImageButton ID="ImageButton2" runat="server" CausesValidation="False" CommandName="Edit" ImageUrl="~/PL/images/edit.png" />
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="4%" />
</asp:TemplateField>
</Columns>
<FooterStyle CssClass="GridFooter" />
<HeaderStyle CssClass="travelGridhead" /
</asp:GridView>
//3rd Gridview code
<asp:GridView ID="GrdOtherExp" runat="server" AutoGenerateColumns="False" CellPadding="0" CssClass="travelGrid" GridLines="Horizontal" ShowFooter="True" Width="100%" OnRowCancelingEdit="GrdOtherExp_RowCancelingEdit" OnRowCommand="GrdOtherExp_RowCommand" OnRowDataBound="GrdOtherExp_RowDataBound" OnRowDeleting="GrdOtherExp_RowDeleting" OnRowEditing="GrdOtherExp_RowEditing" OnRowUpdating="GrdOtherExp_RowUpdating">
<Columns>
//Other Column Code
//Edit Column Code
<asp:TemplateField HeaderText="Edit">
<EditItemTemplate>
<asp:ImageButton ID="ImageButton3" runat="server" CausesValidation="False" CommandName="Update" ImageUrl="~/PL/images/save.png" />
<asp:ImageButton ID="ImageButton4" runat="server" CausesValidation="False" CommandName="Cancel" ImageUrl="~/PL/images/close.png" />
</EditItemTemplate>
<FooterTemplate>
<table border="0" cellpadding="0" cellspacing="0" style="WIDTH: 100%">
<tr>
<td class="travelGridTotal"></td>
</tr>
<tr>
<td class="GridEditArea"> <asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="False" CommandName="AddNewOExp" CssClass="trvGridTextBox" ImageUrl="~/PL/images/save.png" Height="16px" Width="16px" />
</td>
</tr>
</table>
</FooterTemplate>
<HeaderTemplate>
<asp:Label ID="lblEdit" runat="server" Text="<%$ Resources:EResources, lblEdit %>" Width="100%"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:ImageButton ID="ImageButton2" runat="server" CausesValidation="False" CommandName="Edit" ImageUrl="~/PL/images/edit.png" />
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="2%" />
</asp:TemplateField>
</Columns>
<FooterStyle CssClass="GridFooter" />
<HeaderStyle CssClass="travelGridhead" /
</asp:GridView>
Each grid view has its own RowEditing, RowDataBound, RowUpdating, RowCancelEditing events. Gridview functionality is as follows:
User can enter data from footer row and using Save button having
command name as 'AddNew' saves the entered data to Item template in
row format. RowCommand event code is as follows:
protected void grdADetails_RowCommand(object sender, GridViewCommandEventArgs e)
{
DataTable dtADetails = (DataTable)ViewState["dtAccDetails"];
ViewState["dtADetails"] = dtADetails;
if (e.CommandName.Equals("AddNew"))
{
//function to add data
//function to check required fields
}
}
User can edit and update the row data on RowEding event. Row edit button has command name as 'Edit'.
protected void grdADetails_RowEditing(object sender, GridViewEditEventArgs e)
{
grdADetails.EditIndex = e.NewEditIndex;
DataTable dtADetails = (DataTable)ViewState["dtADetails"];// cache data to session
//Code for editing the functionality.
}
User can save the edited row data or cancel the editing.
After publishing the pages to production server only one grid view events get fired, remaining two grid view events do not gets fired. Each editing button has command name as 'Edit' to fire edit event. Each

Why extra cells generate automatically?

My problem is that, in my GridView, empty cells are generated automatically. I'd like for them to not appear. I have both ShowHeaderWhenEmpty and AutoGenerateColumns at false and the same amount for TempateFields, ths and tds. Here's how it appears:
When empty, there's one empty cell above the first column.
After a PostBack, but still empty, there's empty cell that takes the entire row above.
But, when there's data, it is perfect.
I can't post images because I have not enough reputation, but I hope you still visualize and understand.
Here is my aspx code:
<asp:GridView ID="GridViewCommentaires" runat="server" ShowHeaderWhenEmpty="false"
ShowFooter="true" AutoGenerateColumns="false" BorderColor="Black">
<Columns>
<asp:TemplateField HeaderText="Date" ItemStyle-Width="100">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:HiddenField ID="HiddenFieldIdCommentaire" runat="server" Value='<%# Eval("[idCommentaire]") %>' />
<asp:Label ID="LabelCommentaireDate" runat="server" Text='<%# Convert.ToDateTime(Eval("dtHrEntree")).ToString("d") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox Width="100%" runat="server" ID="TextBoxCommentaireDate" Enabled="false"
BorderStyle="None" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Entré par" ItemStyle-Width="175">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:Label ID="LabelCommentaireModifiePar" runat="server" Text='<%# Eval("[modifieParComplet]") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox Width="100%" runat="server" ID="TextBoxCommentaireModifiePar" Enabled="false"
BorderStyle="None" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Commentaire" ItemStyle-Width="725">
<ItemTemplate>
<asp:Label ID="LabelCommentaire" Width="700px" runat="server" Text='<%# Eval("[commentaire]") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox Width="100%" ID="TextBoxCommentaire" runat="server" BorderStyle="None" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButtonSupprimerCommentaire" CssClass="ImageSupprimer" OnClick="LinkButtonSupprimerCommentaire_Click"
Text="" ToolTip="Supprimer" runat="server" ForeColor="Transparent" Width="16px"
Height="16px" OnClientClick="return confirm('Supprimer le commentaire ?')" />
</ItemTemplate>
<FooterTemplate>
<asp:LinkButton ID="LinkButtonAjouterCommentaire" CssClass="ImageSauvegarder" OnClick="LinkButtonAjouterCommentaire_Click"
Text="" ToolTip="Ajouter" runat="server" ForeColor="Transparent" Width="16px"
Height="16px" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<tr>
<th scope="col">
Date
</th>
<th scope="col">
Entré par
</th>
<th scope="col">
Commentaire
</th>
<th scope="col">
</th>
</tr>
<tr>
<td style="width: 100px">
<asp:TextBox Width="100%" runat="server" ID="TextBoxCommentaireDate" Enabled="false"
BorderStyle="None" />
</td>
<td style="width: 175px">
<asp:TextBox Width="100%" runat="server" ID="TextBoxCommentaireModifiePar" Enabled="false"
BorderStyle="None" />
</td>
<td style="width: 725px">
<asp:TextBox Width="100%" ID="TextBoxCommentaire" runat="server" BorderStyle="None" />
</td>
<td align="center">
<asp:LinkButton ID="LinkButtonAjouterCommentaire" CssClass="ImageSauvegarder" OnClick="LinkButtonAjouterCommentaire_Click"
ToolTip="Ajouter" runat="server" ForeColor="Transparent" Width="16px"
Height="16px" />
</td>
</tr>
</EmptyDataTemplate>
</asp:GridView>
That is very weird. I hope you can help me. Thanks in advance!
Most likely the reason for this behavior is inconsistent markup that you receive for no data. EmptyDataTemplate is used to defined the content of the row to show for empty data set:
The empty data row is displayed in a GridView control when the data source that is bound to the control does not contain any records. You can define your own custom user interface (UI) for the empty data row by using the EmptyDataTemplate property.
So what I think is happening is that your markup is inserted inside the tr tag created by the GridView, thus giving you a markup like this:
<table> <-- comes from GridView
<tr> <-- comes from GridView
<tr> <-- comes from your template
<th>...
</tr>
<tr> <-- comes from your template
<td>...
</tr>
That could easily lead to UI fluctuations.
Simple fix, although I am not 100% sure it will work, is to wrap your template in proper <table> tag:
<EmptyDataTemplate>
<table>
<tr>...
</table>
</EmptyDataTemplate>
If you have issues with the style of EmptyDataTemplate, use EmptyDataRowStyle to control its appearance:
To control the style of the empty data row, use the EmptyDataRowStyle property.
Another approach would be to rethink the way you treat no data case, perhaps hide GridView completely and show some panel with textboxes inside.

Gridview edit not working

I have the following gridview:
<asp:GridView ID="GrdAll" runat="server" AutoGenerateColumns="false" ShowHeader="false"
Width="40%" GridLines="None" CellPadding="2" CellSpacing="2">
<AlternatingRowStyle CssClass="AltColor22" />
<RowStyle CssClass="AltColor21" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table width="100%" class="TableBorder">
<tr>
<td valign="top" align="left">
<asp:Label ID="lblName" runat="server" />
<hr />
</td>
</tr>
<tr>
<td valign="top" align="left" class="TableBorder">
<asp:GridView ID="GrdContent" runat="server" AutoGenerateColumns="False"
Width="100%" GridLines="None" CellPadding="2" CellSpacing="2"
OnRowDataBound="GrdContent_RowDataBound" OnRowEditing="GrdContent_RowEditing"><%----%>
<Columns>
<asp:TemplateField HeaderText="Kiosk ID" HeaderStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:Label ID="lblKiosID" runat="server"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtKiosk" runat="server" Text ='<%#Eval("HBEmailID") %>'></asp:TextBox>
</EditItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Email ID" HeaderStyle-HorizontalAlign="Left">
<HeaderStyle HorizontalAlign="Left" />
<ItemTemplate>
<asp:Label ID="lblEmail" runat="server"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtEmail" runat="server" Text ='<%#Eval("HBEmailID") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit"
Text="Edit" ></asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="LinkButton3" runat="server" CommandName="Update"
Text="Update"></asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Cancel"
Text="Cancel"></asp:LinkButton>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
In this, edit functionality is not working.
In clicking of edit button, it shows me nothing. (It should show me textbox to edit)
Following is code:
Protected Sub GrdContent_RowEditing(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs)
Dim row As GridViewRow = DirectCast(TryCast(sender, Control).Parent.Parent, GridViewRow)
Dim index As Integer = row.RowIndex
CType(row.FindControl("GrdContent"), GridView).EditIndex = e.NewEditIndex
DBName = CType(row.FindControl("lblName"), Label).Text
bindContentGrid(CType(row.FindControl("GrdContent"), GridView), DBName)
End Sub
Please help me, it does not gives me error, but it also not showing me textbox to edit.
The issue could be on the following code
bindContentGrid(CType(row.FindControl("GrdContent"), GridView), DBName)
If that code does not return any records, then nothing will be displayed. Make sure it is returning some rows.

gridview edittemplate not showing content

I have grid view with three column name, rate, category
I am also using ajax rate here and one dropdown within edittemplate which binded with sqldatasource.
But when click on edit it is not showing the drop down.
Please help to sort out this problem.
Code is
<asp:gridview id="GVTweet" runat="server" allowpaging="True" allowsorting="True"
autogeneratecolumns="False" gridlines="None" pagesize="15" width="700px" onselectedindexchanged="GVTweet_SelectedIndexChanged"
onrowcancelingedit="GVTweet_RowCancelingEdit" onrowediting="GVTweet_RowEditing"
onrowupdated="GVTweet_RowUpdated" onrowupdating="GVTweet_RowUpdating">
<HeaderStyle />
<AlternatingRowStyle Height="70px" />
<RowStyle Height="70px" />
<Columns>
<asp:TemplateField HeaderImageUrl="~/images/twet1.png" HeaderText="Tweets"
ItemStyle-Height="70px">
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="auto">
<tr style="width:400px;">
<td align="left" style="height:70px;" valign="top">
<span class="box_imag">
<asp:Image ID="ScreenImage0" runat="server" height="50"
ImageUrl='<%#DataBinder.Eval(Container.DataItem,"ImageUrl")%>' width="50" />
</span><span class="box_cont">
<asp:Label ID="lblId" runat="server"
Text='<%#DataBinder.Eval(Container.DataItem, "id")%>' Visible="false">
</asp:Label>
<div>
<strong>
<a href="javascript:void(0)"
onclick='setscreenname('<%#DataBinder.Eval(Container.DataItem, "ScreenName")%>')'
rel="external">
<asp:Label ID="lblScreenName0" runat="server"
Text='<%#DataBinder.Eval(Container.DataItem, "ScreenName")%>'></asp:Label>
</a>
</strong>
<asp:Label ID="lblText0" runat="server"
Text='<%#DataBinder.Eval(Container.DataItem, "Text")%>'></asp:Label>
</div>
<div class="meta">
<asp:Label ID="lblDate0" runat="server"
Text='<%#DataBinder.Eval(Container.DataItem, "Date")%>'></asp:Label>
</div>
</span>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderImageUrl="~/images/rate1.png"
HeaderStyle-CssClass="headerCss1" HeaderText="Rate(1-5)"
SortExpression="Rating" >
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="auto">
<tr style="width:150px;" valign="top" >
<td style="height:70px;">
<asp:UpdatePanel ID="updtpnlTweet0" runat="server">
<ContentTemplate>
<cc1:Rating ID="rateTweet" runat="server" CurrentRating='<%# Bind("Rating") %>'
EmptyStarCssClass="empatyStarRating" FilledStarCssClass="filledStarRating"
MaxRating="5" onchanged="rateTweet_Changed" StarCssClass="ratingStar"
WaitingStarCssClass="savedStarRating">
</cc1:Rating>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderImageUrl="~/images/category1.png"
HeaderStyle-CssClass="headerCss2" HeaderStyle-Width="148px"
HeaderText="Categorize It" ItemStyle-CssClass="iteamHeader2">
<ItemTemplate>
<table width="auto" border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="top" style="width:150px;" >
<td align="center" valign="top" style="height:70px; float:left;" >
<asp:Label ID="lblid1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"CategoryName")%>' ></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList ID="ddldivcategory" runat="server" Width="100px" CssClass="dropdowntweet"
DataSourceID="SqlDataSource1" DataTextField="CategoryName" DataValueField="CategoryId" >
</asp:DropDownList>
</EditItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" />
</Columns>
</asp:gridview>
Try declaring the DataKeyNames property on the gridview.
<asp:GridView ID="GVTweet" runat="server" DataKeyNames="PrimaryKeyName"...
use like this and change datasource is solved my problem
Try this
protected void GVTweet_RowEditing(object sender, GridViewEditEventArgs e)
{
GVTweet.EditIndex = e.NewEditIndex;
//Load Grid
}
<asp:gridview id="GVTweet" runat="server" allowpaging="True" allowsorting="True"
autogeneratecolumns="False" gridlines="None" pagesize="15" width="700px" onselectedindexchanged="GVTweet_SelectedIndexChanged"
onrowcancelingedit="GVTweet_RowCancelingEdit" onrowediting="GVTweet_RowEditing"
onrowupdated="GVTweet_RowUpdated" onrowupdating="GVTweet_RowUpdating">

Resources