GridView CSS problem. How to add CSS to header tr - c#

Can i in GridView add css to only first(headr) tr. I know how to add css to th inside header trr but i don't know if is possible to add css to trr?
GRIDVIEW:
<asp:GridView ID="gwCompanies" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Ime">
<ItemTemplate>
<asp:Image ID="imgServiceOpen" runat="server" ToolTip="Restavracija sprejema naročila" ImageUrl="~/Images/cheff-icon.png" Visible='<%# Convert.ToBoolean(Eval("ServiceOpen")) %>' />
<asp:HyperLink ID="hlEdit" runat="server" NavigateUrl='<%# GetOrderArticlesUrl(Eval("CompanyId")) %>'>
<asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Naslov">
<ItemTemplate>
<asp:Label ID="lblFullAddress" runat="server" Text='<%# GetFullCompanyAddress(Container.DataItem) %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<asp:Label ID="lblEmptyCompaniesGrid" runat="server" Text="Ne najdem restavracij!"></asp:Label>
</EmptyDataTemplate>
</asp:GridView>
output i want
<table id="rest_list">
<tr class="top_tab">
<td class="top_tab_title">Ime</td>
<td class="top_tab_title">Naslov</td>
</tr>
<tr>
<td class="rest_name">Murka</td>
<td>Točen naslov pizzerije</td>
</tr>
<tr>
<td class="rest_name">Lastoria</td>
<td>Točen naslov pizzerije</td>
</tr>
<tr>
<td class="rest_name">Skok</td>
<td>Točen naslov pizzerije</td>
</tr>
<tr>
<td class="rest_name">Tara</td>
<td>Točen naslov pizzerije</td>
</tr>
</table>

You can add a class with the HeaderStyle property, like this:
<asp:GridView ID="gwCompanies" runat="server" AutoGenerateColumns="false">
<HeaderStyle CssClass="top_tab" />
Or in the GridView tag, like this:
<asp:GridView ID="gwCompanies" runat="server" HeaderStyle-CssClass="top_tab" AutoGenerateColumns="false">

Not sure I understand correctly, but you should use a HeaderTemplate to define your header row, e.g:
<asp:TemplateField HeaderText="Ime">
<ItemTemplate>
...
</ItemTemplate>
<HeaderTemplate>
put here the content for the header row of this column
</HeaderTemplate>
</asp:TemplateField>
Then you can apply whatever style you want to your header.

Related

how to visible false edit commandbutton inside Gridview

I am working on an asp.net application. In which i have added a commandbutton which is used to edit the row. My Gridview is
<asp:GridView ID="gvCustomerPaymentDetails" runat="server"
AutoGenerateColumns="false" ShowFooter="true" OnRowEditing="EditPayment"
OnRowUpdating="UpdatePayment" OnRowCancelingEdit="CancelEdit"
CssClass="table table-bordered table-hover" Style="margin-left: 5px; margin-right: 5px;">
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="lblID" runat="server" Text='<%# Eval("ID")%>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="2%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Pay Amount">
<ItemTemplate>
<asp:Label ID="lblPayAmount" runat="server" Text='<%# Eval("Pay_Amount")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtPayAmount" runat="server" style="width:100%" Text='<%# Eval("Pay_Amount")%>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtPayAmount" style="width:100%" runat="server"></asp:TextBox> </FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:LinkButton ID="linkPayNow" runat="server" Text="Pay Now" CommandArgument='<%#Eval("ID") %>' CommandName="Pay"></asp:LinkButton>
<asp:Label ID="txtStatus" runat="server" Text="Paid" Style="margin-left: 20px;" Visible="false"></asp:Label>
<asp:LinkButton ID="lnkRemove" runat="server" CommandArgument='<%# Eval("ID")%>' OnClientClick="return confirm('Do you want to delete?')"
Text="Delete" OnClick="DeletePayment"></asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="AddNewPayment" CommandName="Footer" />
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" />
</Columns>
<EmptyDataTemplate>
<tr>
<th scope="col">Pay Amount
</th>
<th scope="col"></th>
</tr>
<tr>
<td>
<asp:TextBox ID="txtPayAmount" runat="server" />
</td>
<td>
<asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="AddNewPayment" CommandName="EmptyDataTemplate" />
</td>
</tr>
</EmptyDataTemplate>
</asp:GridView>
I have a Label "lblStatus" which will be either 0 or 1. If its value is 1, then i want to visible false the Update and edit commandbutton of that specific row. I have searched a lot but not found any perfect solution. Please help me someone.
In this case, I would convert the CommandField to TemplateFields. To do so, you will click on the smart tag in the gridview in design view. What this will do is change the commandfields to linkbuttons, where you can set it to false in the behind code. You will want to give your new linkbuttons proper ID's so you can find them in the behind code. Then you will create a databound method.. like..
protected void GridView1_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
//Code Here to Disable button. I'd use a Foreach loop like this.
foreach(GridViewRow gvr in GridView1.Rows)
{
Label label = ((Label)gvr.FindControl("label"));
LinkButton edit = ((LinkButton)gvr.FindControl("edit"));
if (label.Text == 1)
{
edit.Visible = false;
}
}
}
Hopefully this puts you in the right direction. I think this should do the trick.

Mess table in GridView and run time error

I want to create a table as below to interact with database to retrieve, delete, update data.
My output in design view is very messy. And when i try to run the page i receive the following error:
Control 'GridView1' of type 'GridView' must be placed inside a form tag with runat=server.
Please advise me for enhancement based on below data table and my coding.
.aspx:
<div class="modal-bg">
<asp:GridView ID="GridView1" runat="server" EnableEventValidation="false"
BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px"
CellPadding="4" Width="426px">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
UsernameLast Login Status
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("UserName") %>'></asp:Label>
</ItemTemplate>
<HeaderTemplate>
Active Role
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("ActiveRole") %>'></asp:Label>
</ItemTemplate>
<HeaderTemplate >
Full name
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("FullName") %>'></asp:Label>
</ItemTemplate>
<HeaderTemplate>
Email Address
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label4" runat="server" Text='<%# Eval("EmailAddress") %>'></asp:Label>
</ItemTemplate>
<HeaderTemplate>
Last Login Status
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label5" runat="server" Text='<%# Eval("Last Login Status") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<button id="newuserbutton" onclick="return newuserbutton_onclick()">
Create New User</button>
Thank you for helps.
Did you actually try to place your control inside the <form runat="server"></form> tags?
Surround your html code with tag => <form runat="server"> ... </form>

DataList Control Arrange

I want to create DataList control and I want to have 2 columns first for "First Name" second for "Last Name". Like this:
First Name|Second Name
Peter &nbsp Johnson
John &nbsp Peterson
When I try with this code, isn't working. This isn't arrange the names as I want:
<asp:DataList ID="NamesDataList" runat="server" >
<HeaderTemplate>
First Name
Last Name
</HeaderTemplate>
<ItemTemplate>
<%# Eval("FirstName")%>
<%# Eval("LastName")%>
</ItemTemplate>
</asp:DataList>
I want to have DataList control like this one for example. https://www.packtpub.com/sites/default/files/Article-Images/asp.net-img03.png
Try this
<asp:DataList ID="NamesDataList" runat="server" >
<HeaderTemplate>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table>
<tr>
<td><asp:Label ID="lblRaterName" runat="server" Text='<%# Eval("FirstName")%>'></asp:Label> </td>
<td><asp:Label ID="lblRaterName" runat="server" Text='<%# Eval("LastName")%>'></asp:Label></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>

ASP GridView Problem

Im working on the front end development for a website built in .net, This is the first time I've done this and I'm having trouble trying to alter a table.
The code which outputs my table is...
<asp:GridView ID="GV_Concepts" runat="server" AutoGenerateColumns="False" DataKeyNames="ConCatID"
BorderStyle="None" GridLines="None" ShowHeader="False" BorderWidth="0px" CssClass="DashBoard_Concepts">
<Columns>
<asp:TemplateField HeaderText="Catalog">
<ItemTemplate>
<asp:Label ID="LB_Cata" runat="server" Text='<%# Bind("ConCatalog") %>'></asp:Label>
</ItemTemplate>
<HeaderStyle CssClass="col-b" />
</asp:TemplateField>
<asp:TemplateField HeaderText=" Concept Version" ItemStyle-Width="" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<div class="conceptstd">
<asp:DataList ID="DataList1" runat="server" RepeatColumns="3" BorderStyle="None"
DataSource='<%# Bind("DS_Version")%>'>
<ItemTemplate>
<asp:HyperLink ID="HL_ConcLoc" runat="Server" CssClass="linkage" NavigateUrl='<%# Bind("FileName") %>'
Target="_blank" Text='<%# Bind("Ver") %>'></asp:HyperLink>
<asp:LinkButton ID="LB_remove" runat="server" CommandArgument='<%# Bind("ConceptID") %>'
OnClick="LB_removecon_Click" CssClass="link-btn">Remove</asp:LinkButton>
<asp:LinkButton ID="LB_sign" runat="server" CommandArgument='<%# Bind("ConceptID") %>'
OnClick="LB_signcon_Click" CssClass="sign-off-btn" Visible='<%# SignedCheck(DataBinder.Eval(Container.DataItem,"SignOff")) ?true:false %>'>Sign Off</asp:LinkButton>
<asp:Literal ID="Lit_SignedCon" Visible='<%# SignedCheck(DataBinder.Eval(Container.DataItem,"SignOff")) ?false:true %>'
runat="server"><b>Signed Off</b></asp:Literal>
</ItemTemplate>
</asp:DataList>
</div>
</ItemTemplate>
<HeaderStyle CssClass="col-c" />
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
Currently no concepts
</EmptyDataTemplate>
</asp:GridView>
The html equivalent of this is something similar too...
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
However I need 5 columns not 2, I've tried reading up on the syntax but thought I'd ask here also, Thanks for any help.
I'm not exactly sure how your dataset is structured, but do you need that datalist in there or can you just put the controls in their own ItemTemplate in the GridView? This would give you 5 columns:
<asp:GridView ID="GV_Concepts" runat="server" AutoGenerateColumns="False" DataKeyNames="ConCatID"
BorderStyle="None" GridLines="None" ShowHeader="False" BorderWidth="0px" CssClass="DashBoard_Concepts">
<Columns>
<asp:TemplateField HeaderText="Catalog">
<ItemTemplate>
<asp:Label ID="LB_Cata" runat="server" Text='<%# Bind("ConCatalog") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="HL_ConcLoc" runat="Server" CssClass="linkage" NavigateUrl='<%# Bind("FileName") %>'
Target="_blank" Text='<%# Bind("Ver") %>'></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LB_remove" runat="server" CommandArgument='<%# Bind("ConceptID") %>'
OnClick="LB_removecon_Click" CssClass="link-btn">Remove</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LB_sign" runat="server" CommandArgument='<%# Bind("ConceptID") %>'
OnClick="LB_signcon_Click" CssClass="sign-off-btn" Visible='<%# SignedCheck(DataBinder.Eval(Container.DataItem,"SignOff")) ?true:false %>'>Sign Off</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Literal ID="Lit_SignedCon" Visible='<%# SignedCheck(DataBinder.Eval(Container.DataItem,"SignOff")) ?false:true %>'
runat="server"><b>Signed Off</b></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
Currently no concepts
</EmptyDataTemplate>
</asp:GridView>
Of course, this ruins your binding to your datasource, but I'm not sure if I can accurately help you with fixing that :(
the number of column is automatically generated according to asp:templatefield
when you have two templatefield, the only two column will be generated, and the number
of rows depend on data.
so if you need 5 columns you have to put 5 templatefield inside the girdiview
Why do you "need" 5 columns? For layout? Perhaps a GridView isn't the right solution given what you're trying to accomplish. Could a Repeater that generates your content accomplish the same thing?

Handling repeater events aynchronously

I have a custom search control on my page (asp.net) which contains a textbox and a repeater for displaying results.
The repeater is populated with a callback as the user types ... nice and simple callback.
...
When a search result is selected the repeater fires off a postback and the itemcommand event is raised (as expected) ... and this event adds a child repeater to itself and binds a child list to the current item.
My problem is that I don't want my parent repeater to fire off a full postback because the page is quite time consuming to render.
I tried putting the control / just the outer repeater in to an ajax update panel control but it appears to still fire a ful postback.
Can anyone shed any light on how I might tell a repeater to fire its item command event in a callback instead of a postback?
I'm guessing this involves a load of manual wiring for my repeater item controls but i'm hoping theres a control somewhere that handles all that for me :)
EDIT : Sample of my situation ....
<asp:UpdatePanel ... >
<asp:Repeater ...>
<itemTemplate> <asp:LinkButton ... CommandArg='<%= Eval("ID") %>' CommandName="select" /> </itemTemplate>
</asp:Repeater>
</asp:UpdatePanel>
So my question is ...
How do i tell the repeater "fire this link buttons onclick as a callback instead of a postback"
the process of wrapping up the repeater in an update panel doesn't help because the ID of the link button is dynamic and therefore I cannot (not inline anyway) add a trigger for the link button.
If i manually add a trigger to the panel in the repeaters onitembound event i get an exception from .Net sayingt he callback reference is invalid ... i guess this is because im trying to attach a callback trigger to a control that is already handling a postback event or something setup by the repeater ...
EDIT 2 : Sample of the scenario faced here
essentially because this control X number of times on the page virtually everything has to be dynamic.
The control implements ICallbackHandler and the search bx code (not included below) fires off an ajax call onkeyup when the user types in company names (so it works a bit like google).
I was hoping that when a user clicked on a company name from the list it would ajax call back / partial postback to recover the sub list of branches thus preventing the full page flicker you get with a full postback.
Then a user would select a branch and it would do a full postback which would result in several server actions taking place.
This works fine as is ... its just not the cleanest user experience.
<div id='<%= this.UniqueID + "Results" %>' class="results">
<asp:Repeater ID="ui_lstCompanies" runat="server" onitemcommand="ui_lstCompanies_ItemCommand">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<asp:Panel ID="item" runat="server">
<li>
<asp:LinkButton ID="ui_btnSelectCompany" runat="server" CommandName="Select" Text='<%# Eval("Name") %>' />
</li>
</asp:Panel>
<asp:Panel ID="selectedItem" runat="server" Visible="false">
<li>
<hr /><h4><%# Eval("Name") %></h4>
<asp:Repeater ID="ui_lstBranches" runat="server" onitemcommand="ui_lstBranches_ItemCommand" >
<HeaderTemplate>
<table style="border-collapse:collapse;">
<tr><th> </th><th>Branch Name</th><th>Branch Address</th><th>Tel</th><th>Fax</th><th>Email</th></tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td> </td>
<td><asp:LinkButton ID="ui_btnSelectBranch1" runat="server" CommandArgument='<%# Eval("ID") %>' CommandName="Select" Text='<%# Eval("Name") %>' /></td>
<td><asp:LinkButton ID="ui_btnSelectBranch2" runat="server" CommandArgument='<%# Eval("ID") %>' CommandName="Select" Text='<%# Eval("Address") %>' /></td></td>
<td><asp:LinkButton ID="ui_btnSelectBranch3" runat="server" CommandArgument='<%# Eval("ID") %>' CommandName="Select" Text='<%# Eval("Telephone1") %>' /></td></td>
<td><asp:LinkButton ID="ui_btnSelectBranch4" runat="server" CommandArgument='<%# Eval("ID") %>' CommandName="Select" Text='<%# Eval("Fax") %>' /></td></td>
<td><asp:LinkButton ID="ui_btnSelectBranch5" runat="server" CommandArgument='<%# Eval("ID") %>' CommandName="Select" Text='<%# Eval("Email") %>' /></td></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<hr />
</li>
</asp:Panel>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</div>
I had a similar problem as you did. If you replace the linkbuttons with regular asp:button and continue to use the repeater's itemcommand event as you were, it will work. Why? I don't know. However, it works. It may not look good with your design, but it triggers the asynch postback that you desired.
<asp:Repeater runat="server" ID="rpt1">
</asp:Repeater>
<asp:UpdatePanel runat="server" ID="up1">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rpt1"/>
</Triggers>
<ContentTemplate>
<asp:Repeater runat="server" ID="rpt2">
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
This should then perform an async call to all commands from rpt1.
Just Replace these repeater control's with yours
EDIT:
I've basically created a mockup of your code with different fields etc. I assume the code below is what you tried and it was not working? If so then I've got no idea why it's not working on your side as it is on myne, there must be some slight difference somewhere that we're not picking up.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<div id='<%= this.UniqueID + "Results" %>' class="results">
<asp:Repeater ID="ui_lstCompanies" runat="server" OnItemCommand="ui_lstCompanies_ItemCommand">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<asp:Panel ID="item" runat="server">
<li>
<asp:LinkButton ID="ui_btnSelectCompany" runat="server" CommandName="Select" Text='<%# Eval("Name") %>' />
</li>
</asp:Panel>
<asp:Panel ID="selectedItem" runat="server" Visible="false">
<li>
<hr />
<h4>
<%# Eval("Name") %></h4>
<asp:Repeater ID="ui_lstBranches" runat="server" OnItemCommand="ui_lstBranches_ItemCommand">
<HeaderTemplate>
<table style="border-collapse: collapse;">
<tr>
<th>
</th>
<th>
Branch Name
</th>
<th>
Branch Address
</th>
<th>
Tel
</th>
<th>
Fax
</th>
<th>
Email
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
</td>
<td>
<asp:LinkButton ID="ui_btnSelectBranch1" runat="server" CommandArgument='<%# Eval("ID") %>'
CommandName="Select" Text='<%# Eval("Name") %>' />
</td>
<td>
<asp:LinkButton ID="ui_btnSelectBranch2" runat="server" CommandArgument='<%# Eval("ID") %>'
CommandName="Select" Text='<%# Eval("Address") %>' />
</td>
</td>
<td>
<asp:LinkButton ID="ui_btnSelectBranch3" runat="server" CommandArgument='<%# Eval("ID") %>'
CommandName="Select" Text='<%# Eval("Telephone1") %>' />
</td>
</td>
<td>
<asp:LinkButton ID="ui_btnSelectBranch4" runat="server" CommandArgument='<%# Eval("ID") %>'
CommandName="Select" Text='<%# Eval("Fax") %>' />
</td>
</td>
<td>
<asp:LinkButton ID="ui_btnSelectBranch5" runat="server" CommandArgument='<%# Eval("ID") %>'
CommandName="Select" Text='<%# Eval("Email") %>' />
</td>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<hr />
</li>
</asp:Panel>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Categories

Resources