Archive

Archive for May, 2012

Select All CheckBoxes in Repeater Control

May 23, 2012 2 comments

Hi all,

try this example to select all checkbox in Repeater control when i check a CheckBox in header


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <script type="text/javascript">
 function checkAll(cb) {
 var ctrls = document.getElementsByTagName('input');
 for (var i = 0; i < ctrls.length; i++) {
 var cbox = ctrls[i];
 if (cbox.type == "checkbox") {
 cbox.checked = cb.checked;
 }
 }
 }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
 <HeaderTemplate>
 <table style="width: 60%; margin: 2px;">
 <tr style="background-color: Gray;">
 <th>
 <asp:CheckBox ID="cbCheckAll" runat="server" Text="Select All" OnClick="checkAll(this)" />
 </th>
 <th>
 Category Name
 </th>
 <th>
 Description
 </th>
 </tr>
 </HeaderTemplate>
 <ItemTemplate>
 <tr>
 <td>
 <asp:CheckBox ID="chk" runat="server" />
 </td>
 <td>
 <asp:Label ID="lbl_Name" runat="server" Text='<%#Eval("CategoryName")%>'></asp:Label>
 </td>
 <td>
 <asp:Label ID="lbl_Description" runat="server" Text='<%#Eval("Description")%>'></asp:Label>
 </td>
 </tr>
 </ItemTemplate>
 </asp:Repeater>
 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
 SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
 </asp:SqlDataSource>
 </div>
 </form>
</body>
</html>

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Javascript

Validation Summary Popup UI Modification with JQuery

Hi all,

try this example to use Validation Summary as Popup with JQuery


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <style>
 .itemContent
 {
 margin:2px 0px 2px 0px;
 clear:both;
 border-width:0px;
 }
 .itemContent label
 {
 display:block;
 float:left;
 margin-right:5px;
 width:150px;
 text-align:right;
 }
 .itemContent div.controls
 {
 display:block;
 float:left;
 }
 </style>
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
 <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
 <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />

 <script type="text/javascript">
 $(document).ready(function() {
 $("#btnSaveInfo").click(function() {
 document.TimeID = setTimeout("checkMessage()", 5);
 });
 });
 function checkMessage() {
 if ($("div#vsInfo").length > 0) {
 $("#dialog").empty();
 $("#dialog").append($("div#vsInfo UL"));
 $("#dialog").dialog({
 title: $("div#vsInfo").text(),
 close: function(event, ui) {
 clearTimeout(document.TimeID);
 }
 });
 clearTimeout(document.TimeID);
 }
 else
 document.TimeID = setTimeout("checkMessage()", 5);
 }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div id="dialog" style="display:none">
 </div>
 <div class="itemContent">
 <label></label>
 <div class="controls" style="display:none">
 <asp:ValidationSummary ID="vsInfo" runat="server" HeaderText="Following error occurs:"
 ShowMessageBox="false" ShowSummary="true" DisplayMode="BulletList" />
 </div>
 </div>
 <div class="itemContent">
 <label>First name</label>
 <div class="controls">
 <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
 <asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ControlToValidate="txtFirstName"
 Text="*" ErrorMessage="Provide first name"></asp:RequiredFieldValidator>
 </div>
 </div>
 <div class="itemContent">
 <label>Last name</label>
 <div class="controls">
 <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
 <asp:RequiredFieldValidator ID="rfvLastName" runat="server" ControlToValidate="txtLastName"
 Text="*" ErrorMessage="Provide last name"></asp:RequiredFieldValidator>
 </div>
 </div>
 <div class="itemContent">
 <label></label>
 <div class="controls">
 <asp:Button ID="btnSaveInfo" runat="server" Text="Save data" />
 </div>
 </div>
 </form>
</body>
</html>

Hope this helps

Good Luck

Categories: ASP.Net, Jquery

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

 

Categories: AJAX, ASP.Net

Get Text and Value Pair with AJAX AutoComplete Extender in Gridview

May 6, 2012 6 comments

Hi all

try this example to Get Text and Value Pair with AJAX AutoComplete Extender in Gridview

In previous post i show how to Get Text and Value Pair with AJAX AutoComplete Extender

Get Text and Value Pair with AJAX AutoComplete Extender

Step1 :- Create a new Website and add web page

Step2:- Add Web.Config file and add the connection String of your Database to be like that


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

Step3 :- Open web page and Add ScriptManager and  Gridview control and Bind it using SqlDataSource control and put them inside UpdatePanel control so your page will be like


<head runat="server">
 <title></title>
 <script type="text/javascript">
 function IAmSelected(source, eventArgs) {
 if (source) {
 // Get the HiddenField ID.
 var hiddenfieldID = source.get_id().replace("AutoCompleteExtender1", "HiddenField1");
 $get(hiddenfieldID).value = eventArgs.get_value();
 }
 alert("HiddenFieldID :" + hiddenfieldID + " HiddenFieldValue : " + $get(hiddenfieldID).value);
 alert(" Key : " + eventArgs.get_text() + " Value : " + eventArgs.get_value());
 }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
 CellPadding="4" DataKeyNames="ProductID" DataSourceID="SqlDataSource1"
 ForeColor="#333333">
 <RowStyle BackColor="#EFF3FB" />
 <Columns>
 <asp:BoundField DataField="ProductID" HeaderText="ProductID"
 InsertVisible="False" ReadOnly="True" SortExpression="ProductID" />
 <asp:BoundField DataField="ProductName" HeaderText="ProductName"
 SortExpression="ProductName" />
 <asp:TemplateField HeaderText="Category Name" SortExpression="CategoryID">
 <ItemTemplate>
 <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
 <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
 DelimiterCharacters="" Enabled="True" TargetControlID="TextBox1"
 ServicePath="AutoExtender.asmx"
 CompletionSetCount="20" OnClientItemSelected="IAmSelected"
 MinimumPrefixLength="1"
 ServiceMethod="GetCategoryName" ContextKey="HiddenField1">
 </cc1:AutoCompleteExtender>
 <asp:HiddenField ID="HiddenField1" runat="server"
 />
 </ItemTemplate>
 </asp:TemplateField>
 </Columns>
 <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
 <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <EditRowStyle BackColor="#2461BF" />
 <AlternatingRowStyle BackColor="White" />
 </asp:GridView>
 <asp:SqlDataSource ID="SqlDataSource1" runat="server"
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
 SelectCommand="SELECT Products.ProductName, Products.ProductID, Products.CategoryID, Categories.CategoryName FROM Products INNER JOIN Categories ON Products.CategoryID = Categories.CategoryID">
 </asp:SqlDataSource>
 <asp:Button ID="Button1" runat="server" Text="Get Value" onclick="Button1_Click" />
 <br />
 <asp:Label ID="Label1" runat="server" ></asp:Label>
 </div>
 </form>

Step4 :- Add a new Web Service and name it AutoExtender.asmx and add this Web method


[WebMethod]
 public string[] GetCategoryName(string prefixText, int count)
 {
 if (count == 0)
 {
 count = 10;
 }
 List<string> listString = new List<string>();
 using (SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Northwind;Integrated Security=True"))
 {
 SqlCommand cm = new SqlCommand("SELECT CategoryName,CategoryID FROM Categories Where CategoryName like '" + prefixText + "%'", con);
 con.Open();
 SqlDataReader dr = cm.ExecuteReader();
 if (dr.HasRows)
 {
 while (dr.Read())
 {
 listString.Add(AutoCompleteExtender.CreateAutoCompleteItem(dr["CategoryName"].ToString(), dr["CategoryID"].ToString()));
 //c.FullName, serializer.Serialize(c))
 }
 }
 }
 string[] str = listString.ToArray();
 return str;
 }

Now run your website

Hope this helps

Good Luck

 

Categories: AJAX, ASP.Net