ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial: Datalist

Showing posts with label Datalist. Show all posts

Sunday, March 6, 2016

Filter the record using Alphabets pager in asp.net

In this tutorial I am going to explain how to filter the record using Alphabets pager in asp.net

In the previous article I have explained how to Bind comma separated values tolistbox in asp.net in ASP.Net using C# and VB.net, how to get comma separatedvalues (data) from database and bind to checkboxlist in ASP.Net and how toinsert multiple selected items of Listbox to database as comma separated inASP.Net.

Description:

To implement this functionality I am using datalist control (alphabets pager) and gridview control (to show the record).

Implementation:

I have created table Tb_Movie and dummy data.

Id	int
Name	varchar(50)
Genre	varchar(50)
Budget	int

Create a store to get data from database:

How to generate alphabets A to Z in asp.net

Vijay Saklani Asp.Net , C#.Net

In this article I am going to explain how to generate alphabets A to Z in asp.net

In the previous article I have explained how to change background and border ofasp.net textbox on focus using CSS, how to disable Dropdownlist some itemsbased on condition in asp.net using C#, VB.net and how to remove the selecteditem from dropdownlist in asp.net using C#, VB.net.

Implementation:

HTML Markup:

<asp:DataList ID="dtlalphabets" runat="server" RepeatDirection="Horizontal">

<asp:Label ID="lbl" runat="server" Text='<%#Eval("Value")%>' CssClass="lable" ></asp:Label>

</ItemTemplate>

</asp:DataList>

Generate Alphabets

Create a method to generate alphabets and show in datalist data control

C# Code:

How to Create Image Gallery in Asp.net using Datalist Data Control

Vijay Saklani Asp.Net , Datalist

Introduction: In this article I will explain how we can Create Image gallery in Asp.net using Datalist Data Control.

Description:

Here I use the Datalist Data control to create Image galley, user click on Image, image will open in popup and able to see images via click on Next and Previous button.

Take a new project/Website. Add webform to project and drag and drop the Datalist Control from Toolbox. Here I bind Datalist control using SqlDataSource. Put the below style and script in between Head Tag:

.BackGround

{

display: none;

position: absolute;

top: 0px;

left: 0px;

background-color:black;

z-index:100;

opacity: 0.8;

filter: alpha(opacity=60);

-moz-opacity:0.8;

min-height: 100%;

}

#showImage

{

display: none;

z-index: 1000;

position: fixed;

top: 0;

left: 0;

background-color:White;

height: 550px;

width: 630px;

padding: 3px;

border: solid 1px black;

}

.galleryTable

{

border:double 1px #D9D9D9;

width:200px;

text-align:left;

}

.dlgallery

{

margin-left:200px;

}

</style>

Dynamic vertical expanding and collapsing menu using jquery in asp.net

Vijay Saklani Asp.Net , C#.Net

In this article I am going to explain how to create dynamic expanding and collapsing vertical menu using Jquery in asp.net.

In the previous article I have explained Change the background color of div usingJquery and Change the background color of webpage using colorpicker Jquery inasp.net.

Description:

Recently I have got a requirement to make the vertical menu with expand and collapse. To implement this functionality I have used the datalist control.

Implement Google like Custom Pagination in Datalist Control in Asp.net

Vijay Saklani Asp.Net , C#.Net

In this tutorial I try to explain how to implement Google like custom pagination in Datalist control in asp.net

Description:

In the previous article I have explained Highlight The Current (selected) PageNumber in Repeater Pagination and Implement Custom Attractive Pagination inRepeater Control in Asp.net Tips & Guide

Implementation:

By default Datalist data control doesn’t have paging option. So we have to write the custom code to implement the pagination functionality. In this tutorial I am going to implement the pagination in Datalist data control like Google.

To implement this I am using Two Datalist control (One to display Data and another one for pagination) and two link buttons to go Next and previous page. So drag and drop the required controls from the toolbox to webform.

Add the style to Head section of webform

Zoom the image on mouse hover in asp.net Datalist control using magnify Jquery

Vijay Saklani Asp.Net , C#.Net

Introduction: In this article I try to explain how to zoom the image on mouse hover in asp.net Datalist control using magnify Jquery.

Description:

In the previous article I have explained Pagination in asp.net Listview controlusing Datapager and Add dynamically created controls to webpage and read theirvalues in asp.net.

Display, Insert, Edit, Update and delete data with datalist control in asp.net

Vijay Saklani Asp.Net , C#.Net

Introduction: In this article I am going to explain how to Display, Insert, Edit, Update and delete data using datalist control in asp.net

Description:

In this example I have insert the data into database table using FooterTemplate of datalist control. To make this example live use the code step wise.

Using Ajax rating control inside Datalist in asp.net

Vijay Saklani Asp.Net , C#.Net

Introduction: In this article I will explain how to use the Ajax rating control inside Datalist in asp.net.

Description:

In this example hotels details is displayed and datalist control and users will rate it. To implement the functionality follow the below given steps:

Steps 1: Create 2 tables one to store the hotel detail (Tb_Hotel) and 2^nd one have rating (Tb_Rating):

Freeze the Datalist header using Jquery in asp.net

Vijay Saklani Asp.Net , Datalist

Introduction: In this article today I will explain how to Freeze the Datalist header using Jquery in asp.net

Description:

To implement this functionality we use the FreezeHeader Jquery Plugin. To make it functional in project follow the below given steps:

Step 1 : Download the FreezeHedaer Jquery Plugin and keep it in js folder of website.

Step 2 : After that link the js file to webform (default.aspx) before </head>tag.

Display multiple records per row with Datalist control in asp.net (C#, VB)

Vijay Saklani Asp.Net , C#.Net

Introduction: In this article today I will explain how we can display multiple records per row with Datalist control in asp.net (C#, VB)

Description:

In the previous article I have explained Freeze the Gridview header using Jquery in asp.net, Send email tomultiple users selected in gridview using asp.net (C#, VB) and Take automaticsnapshot (screenshot) and email it using asp.net (C#, VB).

We can customize the Datalist layout through its RepeatColumns and RepeatDirection properties. In this example I want to display 4 records in a row with horizontal direction (Left to right).

Drag and the drop the Datalist control from toolbox to webform and designed the webform as shown below:

How to Export Datalist Data to Excel document in Asp.net

Vijay Saklani Asp.Net , C#.Net

Introduction: In this post I will explain how we can Export the Datalist Data to Excel Document in Asp.net.

Description:

In the last post I have explained How to Export DatalistData to PDF file in Asp.net, How to Bind Datalist.
Here I bind the Datalist control using Sqldatasource. See the .aspx desgin below:

<div>

<asp:DataList ID="dlstudent" runat="server" DataKeyField="STUDENT_ID"

DataSourceID="SqlDataSource1">

<td><b>Student Name</b> </td>

<td>Student Address</td>

<td>Student Class</td>

</tr>

</HeaderTemplate>

<td align="center"><asp:Label ID="lblname" runat="server"

Text='<%# Eval("STUDENT_NAME") %>'></asp:Label></td>

<td align="center"><asp:Label ID="lbladdress" runat="server"

Text='<%# Eval("STUDENT_ADDRESS") %>'></asp:Label></td>

<td align="center"><asp:Label ID="lblclass" runat="server"

Text='<%# Eval("STUDENT_CLASS") %>'></asp:Label></td>

</ItemTemplate>

</asp:DataList>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:TestBlogConnectionString %>"

SelectCommand="SELECT * FROM [STUDENT_DETAIL]"></asp:SqlDataSource>

<br />

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Export To Excel" />

</div>

</form>

How to Export Datalist Data into Word Document in Asp.net

Vijay Saklani Asp.Net , C#.Net

Introduction: In this article I will explain how we can export the Datalist Data into Word Document in Asp.net.

Description:

In the last article I have explained How to Export Data of Datalist into Pdf in Asp.net, How to Bind Datalist in Asp.net.

Add a new webform to project. Drag and drop the controls from Toolbox. Here I bind the Datalist using Sqldatasource. As shown below:

<div>

<asp:DataList ID="dlstudent" runat="server" DataKeyField="STUDENT_ID"

DataSourceID="SqlDataSource1">

<td><b>Student Name</b> </td>

<td>Student Address</td>

<td>Student Class</td>

</tr>

</HeaderTemplate>

<td align="center"><asp:Label ID="lblname" runat="server"

Text='<%# Eval("STUDENT_NAME") %>'></asp:Label></td>

<td align="center"><asp:Label ID="lbladdress" runat="server"

Text='<%# Eval("STUDENT_ADDRESS") %>'></asp:Label></td>

<td align="center"><asp:Label ID="lblclass" runat="server"

Text='<%# Eval("STUDENT_CLASS") %>'></asp:Label></td>

</ItemTemplate>

</asp:DataList>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:TestBlogConnectionString %>"

SelectCommand="SELECT * FROM [STUDENT_DETAIL]"></asp:SqlDataSource>

<br />

 <asp:Button ID="Button2" runat="server" Text="Export To Word Document"

onclick="Button2_Click" />

</div>

</form>

How to Export Data of Datalist into Pdf in Asp.net using iTextSharp DLL

Vijay Saklani Asp.Net , Datalist

Introduction: In this post I will try to explain how we can export the data of Datalist to PDF in Asp.net.

Description:

In last article I have explain How to bind Datalist Controlin Asp.net. here I bind the datalist control using Sqldatasource. See below:

<asp:DataList ID="dlstudent" runat="server" DataKeyField="STUDENT_ID" CellPadding="3"

DataSourceID="SqlDataSource1">

<table><tr><td><b>Student Name</b> </td>

<td><asp:Label ID="STUDENT_NAMELabel" runat="server"

Text='<%# Eval("STUDENT_NAME") %>' /></td></tr>

<tr> <td><b>Student Address</b></td>

<td><asp:Label ID="STUDENT_ADDRESSLabel" runat="server"

Text='<%# Eval("STUDENT_ADDRESS") %>' /></td> </tr>

<tr><td><b>Student Class</b></td>

<td><asp:Label ID="STUDENT_CLASSLabel" runat="server"

Text='<%# Eval("STUDENT_CLASS") %>' /></td> </tr></table>

</ItemTemplate>

</asp:DataList></td></tr></table>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:TestBlogConnectionString %>"

SelectCommand="SELECT * FROM [STUDENT_DETAIL]"></asp:SqlDataSource>

<br />

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Export to Pdf" />

</div>

</form>

How to Bind Datalist in Asp.net

Vijay Saklani Asp.Net , C#.Net

Introduction: In this post I try to explain how to bind Datalist control in Asp.net using Store procedure.

Description:

I have created a table name STUDENT_DETAIL and insert data into table. STUDENT_ID is primary key.

STUDENT_ID	int
STUDENT_NAME	varchar(50)
STUDENT_ADDRESS	varchar(50)
STUDENT_CLASS	varchar(50)

Create a Store Procedure:

CREATE PROCEDURE DISPLAY_DATA

BEGIN

SET NOCOUNT ON;

SELECT * FROM dbo.STUDENT_DETAIL

END

How to Bind, Edit, Delete and Update in Datalist in Asp.net?

Vijay Saklani Asp.Net , C#.Net

Introduction: In this post I will explain you how to bind, edit, delete and update the Datalist data control in Asp.net.

Description:

I have created a table name STUDENT_DETAIL.

STUDENT_ID	int
STUDENT_NAME	varchar(50)
STUDENT_ADDRESS	varchar(50)
STUDENT_CLASS	varchar(50)

STUDENT_ID is primary key.

Now open the Visual Studio>Go to File>New>Website. Add the Connectionstring in web.config file of website.

</connectionStrings>

<system.web>

</system.web>

</configuration>

Sunday, March 6, 2016

Filter the record using Alphabets pager in asp.net

Monday, February 29, 2016

How to generate alphabets A to Z in asp.net

Friday, January 1, 2016

How to Create Image Gallery in Asp.net using Datalist Data Control

Friday, December 18, 2015

Dynamic vertical expanding and collapsing menu using jquery in asp.net

Wednesday, July 15, 2015

Implement Google like Custom Pagination in Datalist Control in Asp.net

Friday, June 26, 2015

Zoom the image on mouse hover in asp.net Datalist control using magnify Jquery

Wednesday, June 17, 2015

Display, Insert, Edit, Update and delete data with datalist control in asp.net

Monday, June 15, 2015

Using Ajax rating control inside Datalist in asp.net

Sunday, April 12, 2015

Freeze the Datalist header using Jquery in asp.net

Friday, April 3, 2015

Display multiple records per row with Datalist control in asp.net (C#, VB)

Tuesday, July 9, 2013

How to Export Datalist Data to Excel document in Asp.net

Saturday, July 6, 2013

How to Export Datalist Data into Word Document in Asp.net

Saturday, June 29, 2013

How to Export Data of Datalist into Pdf in Asp.net using iTextSharp DLL

Thursday, May 16, 2013

How to Bind Datalist in Asp.net

Friday, May 10, 2013

How to Bind, Edit, Delete and Update in Datalist in Asp.net?

Popular Posts

Labels