GridView with Hyperlink column - c#

I have this GridView in my page:
<asp:GridView ID="GridView2" runat="server" DataSourceID="SqlDataSource2"
AllowPaging="True" PageSize="20" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
And this is the SqlDataSource:
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>"
SelectCommand="SELECT country AS Country,count(country) As Count FROM client GROUP by country ORDER BY count(country) DESC;" ></asp:SqlDataSource>
And i want that the name will be hyper link to somethis like this:
/Details.aspx?country=countryname
How i can implement it?

Use a <TemplateField> with a HyperLink control in it, like this:
<asp:GridView ...>
<Columns>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:HyperLink runat="server" ID="HyperLink1"
NavigateUrl='<%# "Details.aspx?country=" + Eval("Country")%>'
Text='Details'>
</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

<asp:HyperLink runat="server" ID="HyperLink1"
NavigateUrl='<%# "/Details.aspx?country=" + Eval("Country")%>'
Text='Details'>
</asp:HyperLink>

Related

pass querystring value of linkbnbutton placed in gridview to iframe source

I need to pass the querystring value, of linkbutton to iframe source here is the Code
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
Width="100%" AutoGenerateColumns="False" ShowHeaderWhenEmpty="True" DataKeyNames="ItemCode">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
<Columns>
<asp:BoundField DataField="State" HeaderText="State"/>
<asp:BoundField DataField="City" HeaderText="City"/>
<asp:BoundField DataField="LandlineNo1" HeaderText="Contact"/>
<asp:BoundField DataField="Item_name" HeaderText="Name"/>
<asp:BoundField DataField="Qty" HeaderText="qty"/>
<asp:BoundField DataField="rate" HeaderText="Amount"/>
<asp:BoundField DataField="DeliveryDate" HeaderText="Deliverydate"/>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDetails" runat="server" Text="Release" PostBackUrl='<%# "~/popup.aspx?RowIndex=" + Container.DataItemIndex %>'></asp:LinkButton>
<cc1:modalpopupextender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="lnkDetails"
CancelControlID="Button2" BackgroundCssClass="Background">
</cc1:modalpopupextender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style = "display:none">
<iframe style=" width: 600px; height: 400px;" id="irm1" src="popup.aspx?id=<% =request.Querystring(" id=")%>" runat="server"></iframe>
<br/>
<asp:Button ID="Button2" runat="server" Text="Close" />
</asp:Panel>
how to pass the value of querystring to popup.aspx page for now its
going null

GridView columns header text

I Have this GridView :
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"
AllowPaging="True" PageSize="20" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
And this id the SqlDataSource1 :
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:connectionString %>"
ProviderName="<%$ ConnectionStrings:connectionString.ProviderName %>"
SelectCommand="SELECT count(city),city FROM users GROUP by city ORDER BY count(city) DESC;" ></asp:SqlDataSource>
And in the GridView the headers for the columns is count(city),city.
How should i change the columns names?
Change your SQL to:
SelectCommand = "SELECT count(city) As CityCount, city FROM users ..."
Therefore renaming the header to CityCount using ALIAS
For more flexibility, disable autogeneration of column from the Gridview and specify it manually: AutoGenerateColumns="False"
<asp:GridView AutoGenerateColumns="False" ID="GridView1" runat="server"
DataSourceID="SqlDataSource1" AllowPaging="True" PageSize="20"
CellPadding="4" ForeColor="#333333" GridLines="None">
<asp:BoundField DataField="CityCount" HeaderText="Number of Cities" />
</asp:GridView>
You can change your Sql select query using alias as codingbiz mention in his answer
OR
Code: Dynamically set headertext
GridView1.Columns[ColumnIndex].HeaderText = "Header text";
try this
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AllowPaging="True"
PageSize="20" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false"><%--add attribute AutoGenerateColumns="false" --%>
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
<Columns>
<asp:BoundField HeaderText="Total" DataField="City_Total" />
<asp:BoundField HeaderText="City" DataField="City" /> <%--Header Text => Whatever you want to display as name ;DataField=> name of field--%>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:connectionString %>"
ProviderName="<%$ ConnectionStrings:connectionString.ProviderName %>" SelectCommand="SELECT count(city) as City_Total,city FROM users GROUP by city ORDER BY count(city) DESC;">
</asp:SqlDataSource>
Change your sql query to the following
SELECT count(city) As CityCount, city FROM users GROUP by city ORDER BY count(city) DESC;"
and then within the grid view add bound fields with the header text set to whatever you want
<Columns>
<asp:BoundField DataField="CityCount" HeaderText="City Count"
SortExpression="CityCount" />
<asp:BoundField DataField="city" HeaderText="City "
SortExpression="city" />
</Columns>
You should change the query like this
SELECT count(city) AS CityCount, city FROM users GROUP by city ORDER BY count(city) DESC;
You Can Change Your SQL
CMD="SELECT Count(City) As Count_City, etc,... FROM [Tbl_Name]
From where I see it, You could do it 2 ways :
1) Update your SQL query :
SELECT count(city) as CityCount,city as CityName FROM users GROUP by city ORDER BY count(city) DESC;
2) Use the ´TemplateField´ or BoundField functionality of gridview (and then defining yourself your columns) :
<asp:TemplateField HeaderText="Discount" HeaderText="City Count" >
<ItemTemplate>
<asp:Literal ID="CityCount" runat="server" Text='<%# Eval("CityCount").ToString() %>'></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
In that case don't forget to add the following attribute to your gridview, cause else you'll have duplicate column... :
AutoGenerateColumns="false"

Enable multiple select in GridView with custom data source

I have this GridView that uses a custom data source:
<asp:ScriptManager ID="DateManager" runat="server" />
<asp:UpdatePanel ID="setDate" runat="server"
UpdateMode="Conditional"
ChildrenAsTriggers="true">
<ContentTemplate>
<asp:GridView ID="res" runat="server"
AutoGenerateColumns="False"
CellPadding="4"
ForeColor="#333333"
GridLines="None"
Width="600px"
AllowPaging="True">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="Ty" HeaderText="Type" />
<asp:BoundField DataField="time" HeaderText="Time" />
<asp:BoundField DataField="duration" HeaderText="Duration" />
<asp:BoundField DataField="confirmed" HeaderText="Status" />
<asp:CommandField SelectText="SelectIt" ShowSelectButton="True" />
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
How can I enable multiple select on it?
You can add CheckBox near evey row like code below and select multiple lines.
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox runat="server" ID="RowLevelCheckBox" />
</ItemTemplate>
</asp:TemplateField>
For detailed information check these articles : Article1 Article2

MySql gridview delete command

I have this GridView:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="#333333"
GridLines="None">
<AlternatingRowStyle BackColor="White" />
<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>
<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
CommandName="Delete"
onclientclick="javascript:return confirm('are you sure you want to delete.');"
Text="Delete"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="id" HeaderText="id" SortExpression="id"/>
<asp:BoundField DataField="email" HeaderText="email" SortExpression="email" />
<asp:BoundField DataField="first" HeaderText="first" SortExpression="first" />
<asp:BoundField DataField="last" HeaderText="last" SortExpression="last" />
<asp:BoundField DataField="gender" HeaderText="gender"
SortExpression="gender" />
<asp:BoundField DataField="birthday" HeaderText="birthday"
SortExpression="birthday" />
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<SortedAscendingCellStyle BackColor="#FDF5AC" />
<SortedAscendingHeaderStyle BackColor="#4D0000" />
<SortedDescendingCellStyle BackColor="#FCF6C0" />
<SortedDescendingHeaderStyle BackColor="#820000" />
</asp:GridView>
And this is the SqlDataSource:
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:clientConnectionString %>"
ProviderName="<%$ ConnectionStrings:clientConnectionString.ProviderName %>"
SelectCommand="SELECT * FROM Client;"
DeleteCommand="DELETE FROM Client WHERE id = #id AND email = #email;">
<DeleteParameters>
<asp:Parameter Name="id" Type="String" />
<asp:Parameter Name="email" Type="String" />
</DeleteParameters>
</asp:SqlDataSource>
And when i try to excute a delete i get this error:
Parameter '#id' must be defined.
Exception Details: MySql.Data.MySqlClient.MySqlException: Parameter '#id' must be defined.
You may want to add the DataKeyNames attribute to your GridView
You must set the DataKeyNames property in order for the automatic update and delete features of the GridView control to work. The values of these key fields are passed to the data source control in order to specify the row to update or delete. See this link
DataKeyNames="id,email"
In the context of your Gridview.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="#333333"
GridLines="None" DataKeyNames="id,email">

How I can display Image on mouseover event on asp:linkButton

I am using asp.net framework 3.5 and c# 2.0. I am able to bind data in to gridview.
Actually I want to display Image on mouseover event on asp:linkButton, which is used in grid view
<asp:GridView ID="gvTemplate" runat="server" AllowPaging="True" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333" GridLines="None" ShowFooter="True" Width="100%"
OnRowCommand="gvTemplate_RowCommand" OnRowDataBound="RowDataBound" OnPageIndexChanging="gvTemplate_PageIndexChanging">
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:TemplateField HeaderStyle-HorizontalAlign="Left" HeaderText="Sr. No">
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Template Name" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:LinkButton ID="lBtTempID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"tempName") %>'
CommandName='<%# DataBinder.Eval(Container.DataItem,"tempID") %>' CommandArgument="tempID" onmouseover="javascript:showImage(this.id)"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-HorizontalAlign="Left" HeaderText="Template Type">
<ItemTemplate>
<asp:Label ID="lbltempType" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"tempType") %>' />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
If you can use jquery it would be like this
$('.lBtTempClass').mouseover(function() {
/// Do your code
});
you should add a css class to link button
<asp:LinkButton ID="lBtTempID" CssClass="lBtTempClass" runat="server" >

Categories

Resources