ASP.net (Google me: akash02designer): 2015-03-29

Thursday 2 April 2015

Responsive gridview

Create div and inside gridview in html

Open css file or style tag

Add media query to decrease the width of screen.
eg:-

<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>

CSS
---------------
<style>

#grid_div{
width:500px;
overflow:scroll;
}

@media only screen and (min-width:150px) and (max-width:600px) {
#grid_div{
width:150px;
overflow:scroll;
}
}
</style>

JQUERY
------------------
Download 2 jquery files

a) jquery-1.11.2.min.js
b) footable.js

<script src="Jquery/jquery-1.11.2.min.js"></script>
<script src="Jquery/footable.js"></script>

<script type="text/javascript">
$(function () {
$('#<%=church_gridview.ClientID %>').footable({
breakpoints: {

phone: 150,
tablet: 640

}
});
});
</script>

HTML
------------
<div id="grid_div">

<asp:GridView ID="church_gridview" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="church_sqldatasource" PageSize="3" CssClass="footable" AllowPaging="True">
<Columns>

<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="return confirm('Are you sure you?');"
CommandName="Delete" CausesValidation="false">Delete</asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>
<asp:CommandField ShowEditButton="True" CausesValidation="false" />
<asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
<asp:BoundField DataField="church_name" HeaderText="church_name" SortExpression="church_name" />
<asp:BoundField DataField="church_address" HeaderText="church_address" SortExpression="church_address" />
<asp:BoundField DataField="church_ph" HeaderText="church_ph" SortExpression="church_ph" />
<asp:BoundField DataField="church_email" HeaderText="church_email" SortExpression="church_email" />
<asp:BoundField DataField="church_website" HeaderText="church_website" SortExpression="church_website" />
<asp:BoundField DataField="District" HeaderText="District" SortExpression="District" />
</Columns>
</asp:GridView>

</div>

Code Behind
--------------------
protected void Page_Load(object sender, EventArgs e)
{

if (!IsPostBack)
{
gridview_bind_responsive();
}

}

public void gridview_bind_responsive()
{

church_gridview.DataBind();
church_gridview.UseAccessibleHeader = true;
church_gridview.HeaderRow.TableSection = TableRowSection.TableHeader;

TableCellCollection cells = church_gridview.HeaderRow.Cells;
cells[0].Attributes.Add("data-hide", "expand");
cells[1].Attributes.Add("data-class", "expand");
cells[2].Attributes.Add("data-hide", "phone,tablet");

cells[3].Attributes.Add("data-hide", "expand");
cells[4].Attributes.Add("data-hide", "phone,tablet");

cells[8].Attributes.Add("data-hide", "phone,tablet");
cells[7].Attributes.Add("data-hide", "phone,tablet");
cells[6].Attributes.Add("data-hide", "phone,tablet");
cells[5].Attributes.Add("data-hide", "phone,tablet");

}

Wednesday 1 April 2015

Add javascript alert to asp.net button

Method: 1

-----------------

function alert_me() {

return confirm('Hello!');

}

</script>

<asp:Button ID="Button4" OnClientClick="alert_me()"

Text="Click Me" runat="server" />

<br />

Method: 2

-----------------

<asp:Button ID="Button5" OnClientClick="return confirm('are you sure?')"
Text="Click Me" runat="server" />

Sunday 29 March 2015

Page Numbers to Datalist in dynamic

No . of results for your filter coding is not shown here,but u can add from querying it.
No css is shown in this coding.
HTML
-----------

<div id="m_right_panel">

<div>
<table>
<tr>
<td>
<asp:Label ID="m_page_lbl" runat="server" Text="Page:" Visible="False" CssClass ="font_class"></asp:Label></td>
<td>
<asp:Repeater ID="rptPager" runat="server">
<ItemTemplate>
<asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
CssClass='<%# Convert.ToBoolean(Eval("Enabled")) ? "page_enabled" : "page_disabled" %>'
OnClick="Page_Changed" OnClientClick='<%# !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : "" %>'></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</td><td></td>
<td style ="text-align :center ;">
<asp:Label ID="m_search_result_lbl" runat="server" Text="" CssClass ="font_class"></asp:Label></td>
</tr>
</table>

</div>
<div id="meeting_datalist_div">
<asp:DataList ID="meeting_datalist" runat="server" RepeatDirection="Horizontal" ShowFooter="False" ShowHeader="False" CellPadding="10" RepeatLayout="Flow" HorizontalAlign="Left" Width="100%" >
<ItemStyle Height ="100%" />
<ItemTemplate >
<div style="margin:10px;padding:10px;height:320px">

<table id="meetings_tbl" >
<tr>
<td style="text-align: center">

<asp:Label ID="Label4" runat="server" Text='<% #Bind("title")%>'></asp:Label>
</td>
</tr>
<tr>

<td style ="text-align :center;">
<asp:Image ID="Image1" runat="server" ImageUrl='<% #Bind("imageurl")%>' Width="180px" Height="180px" />

</td>
</tr>
<tr>
<td >

<asp:Label ID="Label5" runat="server" Text="Ministries:"></asp:Label>

<asp:Label ID="Label2" runat="server" Text='<% #Bind("ministries")%>'></asp:Label>

</td>
</tr>
<tr>
<td>

<asp:Label ID="Label6" runat="server" Text="Comments:"></asp:Label>

<asp:Label ID="comments_lbl" runat="server" Text='<% #Bind("comments")%>'></asp:Label>

</td>
</tr>
<tr>
<td>

<asp:Label ID="Label8" runat="server" Text="Meeting starts on:"></asp:Label>

<asp:Label ID="Label9" runat="server" Text='<% #Bind("meeting_start_dt")%>'></asp:Label></td>
</tr>
<tr>
<td>

<asp:Label ID="Label7" runat="server" Text="Posted date:"></asp:Label>

<asp:Label ID="posted_lbl" runat="server" Text='<% #Bind("posted_date")%>'></asp:Label></td>
</tr>
<tr>
<td></td>
</tr>
</table>

</div>
</ItemTemplate>
</asp:DataList>
</div>

</div>

STORED PROCEDURE
------------------------------

CREATE PROCEDURE [dbo].[GetCustomersPageWise]
@PageIndex INT = 1
,@PageSize INT = 10
,@RecordCount INT OUTPUT,
@from_dt varchar(50),
@to_dt varchar(50),
@district varchar(100)
AS
BEGIN
SET NOCOUNT ON;
SELECT ROW_NUMBER() OVER
(
ORDER BY [id] ASC
)AS RowNumber
,[title]
,[ministries]
,[comments]
,[meeting_start_dt]
,[posted_date]
,[imageurl]
INTO #Results
FROM [customer_post_ad] where district=@district and meeting_start_dt between @from_dt and @to_dt order by title

SELECT @RecordCount = COUNT(*)
FROM #Results

SELECT * FROM #Results
WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1

DROP TABLE #Results
END

CODE-BEHIND
-----------------------

using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Security;

string con = ConfigurationManager.ConnectionStrings["prayermeeting_mdf"].ConnectionString;
private int PageSize = 2;

protected void meeting_search_btn_Click(object sender, EventArgs e)
{

this.GetCustomersPageWise(1);
}

private void GetCustomersPageWise(int pageIndex)
{
string constring = ConfigurationManager.ConnectionStrings["prayermeeting_mdf"].ConnectionString;

string district = m_district_ddl.SelectedItem.Text.ToString();
string from_dt = m_frm_dt.Text;
string to_dt = m_to_dt.Text;
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("GetCustomersPageWise", con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
cmd.Parameters.AddWithValue("@PageSize", PageSize);
cmd.Parameters.AddWithValue("@district", district);
cmd.Parameters.AddWithValue("@from_dt", from_dt );
cmd.Parameters.AddWithValue("@to_dt", to_dt);
cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4);
cmd.Parameters["@RecordCount"].Direction = ParameterDirection.Output;
con.Open();
IDataReader idr = cmd.ExecuteReader();
meeting_datalist.DataSource = idr;
meeting_datalist.DataBind();
idr.Close();
con.Close();
int recordCount = Convert.ToInt32(cmd.Parameters["@RecordCount"].Value);
this.PopulatePager(recordCount, pageIndex);
m_page_lbl.Visible = true;

m_search_result_lbl.Text = "No. of results for your filter: "+recordCount ;
}
}
}

private void PopulatePager(int recordCount, int currentPage)
{
List<ListItem> pages = new List<ListItem>();
int startIndex, endIndex;
int pagerSpan = 5;

//Calculate the Start and End Index of pages to be displayed.
double dblPageCount = (double)((decimal)recordCount / Convert.ToDecimal(PageSize));
int pageCount = (int)Math.Ceiling(dblPageCount);
startIndex = currentPage > 1 && currentPage + pagerSpan - 1 < pagerSpan ? currentPage : 1;
endIndex = pageCount > pagerSpan ? pagerSpan : pageCount;
if (currentPage > pagerSpan % 2)
{
if (currentPage == 2)
{
endIndex = 5;
}
else
{
endIndex = currentPage + 2;
}
}
else
{
endIndex = (pagerSpan - currentPage) + 1;
}

if (endIndex - (pagerSpan - 1) > startIndex)
{
startIndex = endIndex - (pagerSpan - 1);
}

if (endIndex > pageCount)
{
endIndex = pageCount;
startIndex = ((endIndex - pagerSpan) + 1) > 0 ? (endIndex - pagerSpan) + 1 : 1;
}

//Add the First Page Button.
if (currentPage > 1)
{
pages.Add(new ListItem("First", "1"));
}

//Add the Previous Button.
if (currentPage > 1)
{
pages.Add(new ListItem("<<", (currentPage - 1).ToString()));
}

for (int i = startIndex; i <= endIndex; i++)
{
pages.Add(new ListItem(i.ToString(), i.ToString(), i != currentPage));
}

//Add the Next Button.
if (currentPage < pageCount)
{
pages.Add(new ListItem(">>", (currentPage + 1).ToString()));
}

//Add the Last Button.
if (currentPage != pageCount)
{
pages.Add(new ListItem("Last", pageCount.ToString()));
}
rptPager.DataSource = pages;
rptPager.DataBind();
}

protected void Page_Changed(object sender, EventArgs e)
{
int pageIndex = int.Parse((sender as LinkButton).CommandArgument);
this.GetCustomersPageWise(pageIndex);
}

Responsive datalist change the list on fly / screen width

<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<head>

CSS

-------

church_display_tbl {
width: 100%;
height: 100px;
padding-left: 5px;
float: left;
}

#church_data_div {
height:445px;
overflow :scroll ;
}

#church_tbl {
margin-top: 40px;
width: 210px;
height: 150px;
font-size: 13px;

float: left;

}

@media only screen and (min-width:150px) and (max-width:600px) {

#church_data_div {
height:150px;
overflow :scroll ;
}
}

HTML

----------

Total Pageviews