Home > AJAX, ASP.Net > AJAX Slider Extender Control and GridView for Alphabetical Filtering

AJAX Slider Extender Control and GridView for Alphabetical Filtering


Hi all,

try this example to use AJAX Slider Extender Control with GridView for Alphabetical Filtering

1) Open VS2008 and create a new website and add new web page

2) From Toolbox drag ScriptManager,AJAX Silder Control , Gridview and TextBox Control

(Hint: in this example i will use Northwind database and bind my Gridview from Employees table)


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <style>
 body
 {
 font-family: "trebuchet ms" , sans-serif;
 font-size: 10pt;
 background-color: #fff;
 color: #555;
 line-height: 1.7em;
 }
 p
 {
 paddding-top: 0px;
 }
 table
 {
 border: none;
 border-collapse: collapse;
 margin-bottom: 1.5em;
 }
 table td
 {
 vertical-align: top;
 position: relative;
 }
 td p
 {
 padding: 4px;
 margin: -1px 0px;
 font-size: 8px;
 width: 12px;
 line-height: 10px;
 border: solid 1px #d1d1d1;
 cursor: hand;
 }
 td p.letterSelected
 {
 font-weight: bold;
 width: 14px;
 background-color: #c1c1c1;
 font-size: 10px;
 color: #fff;
 padding: 4px 4px 4px 6px;
 border: solid 1px #d1d1d1;
 }
 .letterbox
 {
 position: absolute;
 top: 100px;
 left: 100px;
 height: 60px;
 width: 100px;
 z-index: 5;
 border: solid 1px gray;
 background: #fff;
 filter: alpha(opacity=70);
 opacity: .7;
 text-align: center;
 font-size: 48px;
 padding-top: 30px;
 font-weight: bold;
 display: none;
 }
 .rowA
 {
 background: #c1c1c1;
 }
 .rowB
 {
 background: #f1f1f1;
 }
 </style>
</head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server" />
 <table>
 <td>
 <asp:TextBox runat="server" ID="SliderBox" />
 <cc1:SliderExtender runat="server" ID="SliderBoxExtender" Maximum="26" Length="515"
 Minimum="0" TargetControlID="SliderBox" Orientation="vertical" />
 </td>
 <td>
 <p id="row_0" onclick="setVal(this.id)">
 All</p>
 <p id="row_1" onclick="setVal(this.id)">
 A</p>
 <p id="row_2" onclick="setVal(this.id)">
 B</p>
 <p id="row_3" onclick="setVal(this.id)">
 C</p>
 <p id="row_4" onclick="setVal(this.id)">
 D</p>
 <p id="row_5" onclick="setVal(this.id)">
 E</p>
 <p id="row_6" onclick="setVal(this.id)">
 F</p>
 <p id="row_7" onclick="setVal(this.id)">
 G</p>
 <p id="row_8" onclick="setVal(this.id)">
 H</p>
 <p id="row_9" onclick="setVal(this.id)">
 I</p>
 <p id="row_10" onclick="setVal(this.id)">
 J</p>
 <p id="row_11" onclick="setVal(this.id)">
 K</p>
 <p id="row_12" onclick="setVal(this.id)">
 L</p>
 <p id="row_13" onclick="setVal(this.id)">
 M</p>
 <p id="row_14" onclick="setVal(this.id)">
 N</p>
 <p id="row_15" onclick="setVal(this.id)">
 O</p>
 <p id="row_16" onclick="setVal(this.id)">
 P</p>
 <p id="row_17" onclick="setVal(this.id)">
 Q</p>
 <p id="row_18" onclick="setVal(this.id)">
 R</p>
 <p id="row_19" onclick="setVal(this.id)">
 S</p>
 <p id="row_20" onclick="setVal(this.id)">
 T</p>
 <p id="row_21" onclick="setVal(this.id)">
 U</p>
 <p id="row_22" onclick="setVal(this.id)">
 V</p>
 <p id="row_23" onclick="setVal(this.id)">
 W</p>
 <p id="row_24" onclick="setVal(this.id)">
 X</p>
 <p id="row_25" onclick="setVal(this.id)">
 Y</p>
 <p id="row_26" onclick="setVal(this.id)">
 Z</p>
 </td>
 <td style="vertical-align: top;">
 <div class="letterbox" id="LetterBox">
 </div>
 <asp:UpdatePanel runat="server" ID="PersonGridUpdatePanel" UpdateMode="conditional">
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="hiddenButton" EventName="Click" />
 </Triggers>
 <ContentTemplate>
 <asp:GridView ID="PersonGrid" runat="server" AllowPaging="true" PageSize="20" AutoGenerateColumns="false"
 Style="z-index: 4;" RowStyle-CssClass="rowA" AlternatingRowStyle-CssClass="rowB">
 <Columns>
 <asp:BoundField DataField="Fullname" HeaderText="Person's Name" />
 </Columns>
 <EmptyDataTemplate>
 No Data found.
 </EmptyDataTemplate>
 </asp:GridView>
 </ContentTemplate>
 </asp:UpdatePanel>
 <asp:Button runat="server" ID="hiddenButton" Style="display: none;" OnClick="LetterSelected"
 UseSubmitBehavior="false" />
 </td>
 </table>
 <script type="text/javascript">
 //! set the java functions to each of the slider events
 function pageLoad(sender, e) {
 var slider = $find('<%=SliderBoxExtender.ClientID %>');
 slider.add_slideStart(sliderStart);
 slider.add_slideEnd(sliderEnd);
 slider.add_valueChanged(valChanged);
 }
 function sliderStart() {
 var fd = document.getElementById('LetterBox');
 fd.style.display = 'inline';
 }

function sliderEnd() {
 var fd = document.getElementById('LetterBox');
 fd.style.display = 'none';
 submitForm();
 }

function valChanged() {
 var fd = document.getElementById('LetterBox');
 var valBox = document.getElementById('<%=SliderBox.ClientID %>');
 var val = valBox.value;
 var i = 0
 var grow
 for (i = 0; i < 27; i++) {
 grow = document.getElementById('row_' + i);
 if (i == val) {
 grow.className = 'letterSelected';
 fd.innerHTML = grow.innerHTML;
 }
 else { grow.className = ''; }
 }
 }

function submitForm() {
 var hidBtn = document.getElementById('<%=hiddenButton.ClientID %>');
 hidBtn.click();

}

function setVal(pID) {
 var slider = $find('<%=SliderBoxExtender.ClientID %>');
 var val = pID.replace('row_', '')
 slider.set_Value(val);
 valChanged();
 submitForm();
 }
 </script>
 </form>
</body>
</html>

In Code behind :-


#region Method
 private void bind(string Letter)
 {
 SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
 SqlCommand comm = new SqlCommand();
 comm.Connection = conn;
 comm.CommandText = @"SELECT(E.LastName + ', ' + E.FirstName) as FullName,E.EmployeeID
 FROM Employees as E
 WHERE (E.LastName like @FirstLetter + '%') ORDER BY E.LastName, E.FirstName";
 comm.Parameters.Add("@FirstLetter", SqlDbType.NVarChar).Value = Letter == "All" ? "" : Letter;
 SqlDataAdapter adpter = new SqlDataAdapter(comm);
 DataTable dt = new DataTable();
 adpter.Fill(dt);
 PersonGrid.DataSource = dt;
 PersonGrid.DataBind();
 }
 #endregion

public string GetSelected(string value)
 {
 string result = string.Empty;
 switch (value)
 {
 case "0":
 result = "All";
 break;
 case "1":
 result = "A";
 break;
 case "2":
 result = "B";
 break;
 case "3":
 result = "C";
 break;
 case "4":
 result = "D";
 break;
 case "5":
 result = "E";
 break;
 case "6":
 result = "F";
 break;
 case "7":
 result = "G";
 break;
 case "8":
 result = "H";
 break;
 case "9":
 result = "I";
 break;
 case "10":
 result = "J";
 break;
 case "11":
 result = "K";
 break;
 case "12":
 result = "L";
 break;
 case "13":
 result = "M";
 break;
 case "14":
 result = "N";
 break;
 case "15":
 result = "O";
 break;
 case "16":
 result = "P";
 break;
 case "17":
 result = "Q";
 break;
 case "18":
 result = "R";
 break;
 case "19":
 result = "S";
 break;
 case "20":
 result = "T";
 break;
 case "21":
 result = "U";
 break;
 case "22":
 result = "V";
 break;
 case "23":
 result = "W";
 break;
 case "24":
 result = "X";
 break;
 case "25":
 result = "Y";
 break;
 case "26":
 result = "Z";
 break;

 }
 return result;
 }

protected void Page_Load(object sender, EventArgs e)
 {
 if (!IsPostBack)
 {
 string selected = GetSelected(SliderBox.Text);
 bind(selected);
 }
 }
 protected void LetterSelected(object sender, EventArgs e)
 {
 string selected = GetSelected(SliderBox.Text);
 bind(selected);
 }

3) In Web.Config we will add connectionstring


<connectionStrings>
 <add name="conn" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>
 </connectionStrings>

Hope this helps

Good Luck

 

Advertisements
Categories: AJAX, ASP.Net
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: