"Code, Beer and Music ~ my way of being a programmer"
There are 43 entries for the tag
JavaScript
A couple of months ago I’ve written a simple demo about “Highlighting GridView Row on MouseOver”. I’ve noticed many members in the forums (http://forums.asp.net) are asking how to highlight row in GridView and retain the selected row across postbacks. So I’ve decided to write this post to demonstrate how to implement it as reference to others who might need it. In this demo I going to use a combination of plain JavaScript and jQuery to do the client-side manipulation. I presumed that you already ......
The ComponentOne team presents the most complete collection of extensions for Microsoft Visual Studio LightSwitch. This collection of ready-to-use extensions snaps right into your applications and extends their functionality. You can choose from the following extensions below:" OLAP – instant pivoting data views FlexGrid – grid view with conditional formatting, printing and filtering Chart – the easiest way to get a chart in LightSwitch PDFViewer – open PDFs such as SSRS reports without an external ......
There are times that we need to prompt the users when doing certain actions on the page. One practical example is to confirm the user when deleting a certain record just like what I have demonstrated awhile back about Displaying a Confirmation Message on GridView Deleting. If you noticed on that demo I simply use plain JavaScript to display the confirmation message. In this post I’m going to demonstrate how to use the ConfirmBox control in delete scenario. Note that just for the simplicity of this ......
Last week, I was interviewed by Zandra Nilocas from Microsoft Philippines. It was my first time experience to talk about something in front of the camera so it's not surprising that I looked like an idiot in that interview (you know swiveling my chair back and forth without noticing it). Anyway in the interview we talked about ASP.NET WebForms, MVC and Web Matrix in general and just to elaborate a bit of what we talked about and to clarify things out, I have decided to write this post... WebForms ......
Previously we've talked about how to fetch the data from the database and populate the form with EF. In this example I'm going to demonstrate how to do Edit,Update and Delete operations in the form with Entity Framework. And oh since this is a continuation of my previous example I would suggest you to refer that first before you go any further. STEP 1: Setting up the UI Since this is a continuation of my previous example then I'm jus going to use the same layout and extend it a bit by adding some ......
A developer is asking how to select one radio button at a time if the radio button is inside the GridView. As you may know setting the group name attribute of radio button will not work if the radio button is located within a Data Representation control like GridView. This because the radio button inside the gridview bahaves differentely. Since a gridview is rendered as table element , at run time it will assign different "name" to each radio button. Hence you are able to select multiple rows. In ......
In this post I'll demonstrate how to make a simple collapsible menu using jQuery. To get started let's go ahead and fire up Visual Studio and create a new WebForm. Now let's build our menu by adding some div, p and anchor tags. Since I'm using a masterpage then the ASPX mark-up should look something like this: 1: <asp:Content ID="Content2" ContentPlaceHolderID="MainC... runat="server"> 2: <div id="Menu"> 3: <p>CARS</p> 4: <div class="section"> 5: <a href="#">Car ......
In case you will be working on a page that needs to validate the first character of the TextBox entered by a user then here are two options that you can use: Option 1: Using an array 1: <asp:Content ID="Content1" ContentPlaceHolderID="HeadC... runat="server"> 2: <script type="text/javascript"> 3: function CheckFirstChar(o) { 4: var arr = ['A', 'B', 'C', 'D']; 5: if (o.value.length > 0) { 6: for (var i = 0; i < arr.length; i++) { 7: if (o.value.charAt(0) == arr[i]) { 8: alert('Valid'); ......
I wrote a blog post a while back before here that demonstrate how to highlight a GridView row on mouseover and as you can see its very easy to highlight rows in GridView. One of my colleague uses the same technique for implemeting gridview row highlighting but the problem is that if a Column has background color on it that cell will not be highlighted anymore. To make it more clear then let's build up a sample application. ASPX: 1: <asp:GridView runat="server" id="GridView1" onrowcreated="GridView1_Row... ......
Recently I wrote a series of blog posts that demonstrates how to do calculation in GridView using JavaScripts. You can check the series of posts below: FAQ: GridView Calculation with JavaScript FAQ: GridView Calculation with JavaScript - Formatting and Validation FAQ: GridView Calculation with JavaScript - Displaying Quantity Total Recently a user in the forums is asking how to calculate the total quantity, sub-totals and total amout in GridView when a user enters the price and quantity in the TextBox ......
Previously we've talked about how calculate the sub-totals and grand total in GridView here, how to format the numbers into a currency format and how to validate the quantity to just accept whole numbers using JavaScript here. One of the users in the forum (http://forums.asp.net) is asking if how to modify the script to display the quantity total in the footer. In this post I'm going to show you how to it. Basically we just need to modify the javascript CalculateTotals function and add the codes ......
In my previous post here we've talked about how to calculate the sub-totals and grand total in GridView using JavaScript. In this post I'm going take more step further and will demonstrate how are we going to format the totals into a currency and how to validate the input that would only allow you to enter a whole number in the quantity TextBox. Here are the code blocks below: ASPX Source: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml... ......
In my previous post I wrote a simple demo on how to Calculate Totals in GridView and Display it in the Footer. Basically what it does is it calculates the total amount by typing into the TextBox and display the grand total in the footer of the GridView and basically it was a server side implemenation. Many users in the forums are asking how to do the same thing without postbacks and how to calculate both amount and total amount together. In this post I will demonstrate how to do this using JavaScript. ......
I've been seeing many developers in the forums asking: How can I display a message box from the server (code behind)? How can I customize the javascript confirm and alert popup? How can I display a message box like in windows application? As some of you may already know that displaying a pop-up message box has always been a pain for most developers in web programming. Everyone has probably used the Page.ClientScript.RegisterS... or the ScriptManager.RegisterClien... method to call ......
I was working with a project that uses the concept of master page. Within the master page I have a bunch of UserControls for some specific purposes and one of the UserControl is for the site dynamic menu. The menu was basically built using JQuery and CSS. The menu works fine if you are using it as an anonymous user but if you logged in as authorize user the menu will no longer work for some odd reasons and produces the following script error below in the browser: Message: Object expected Line: 122 ......
In my previous post here I have demonstrated how to add dynamic rows in Gridview with a combination of TextBox and DropDownList. Just in case you need to validate empty TextBox values before adding a new row to the GridView then here's a JavaScript function that you can use for validation: function ValidateEmptyValue() { var gv = document.getElementById("&l... Gridview1.ClientID %>"); var tb = gv.getElementsByTagName("in... for (var i = 0; i < tb.length; i++) { if (tb[i].type == "text") ......
If you are working with iframe in which the content takes time to load, you may want to display a simple loading indicator to the end users instead of letting the users see a blank screen in the page. To do this, here's one way on how to implemet it using javascript. <html xmlns="http://www.w3.org/19... > <head runat="server"> <title></title> <script type="text/javascript"> function hideLoading() { document.getElementById('di... = "none"; document.getElementById('di... ......
I was playing around with ASPNET AJAX MaskEditExtender control and ASPNET Validation controls when I was working with a profile page and doing some input validations. Everything seems to be fine until I was told to always retain the phone mask format in the TextBox. Here’s my code for Phone number masking: <asp:TextBox ID="TXTPhoneNumber" runat="server" MaxLength="13" ValidationGroup="GroupA" /> <asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="TXTPhoneNu... ......
In my previous example we talked about how to fetch data from database and how to populate the form with data using L2S. In this example I’m going to extend a little bit of what I have demonstrated in my previous example. Basically I’m going to show you the basic way on how to edit and delete data from the form and update the database using L2S technology. Since this is a continuation of my previous example so I would suggest you to refer that first before you go any further. STEP 1: Setting up the ......
Technorati Tags: ASP.NET,C#,GridView Many developers from the forums (forums.asp.net) are asking if how to implement fix header in GridView while scrolling. We all know that there are lots of examples out there that provide a solution that are available, however some of the solutions provided are not cross browser compatible. While searching for a cross browser solution, I found this article at devarchive.net and it seems very interesting to me. So I play around with the extender provided by devarchive ......
One of the members in the forum (forums.asp.net) is asking how to limit the number of selected items in the ListBox and so contributors (including me) gave the OP (Original Poster) different ideas on how to validate it. Some of them provided solution using pure JavaScripts and a mixture of code behind and JavaScript. However the OP doesn’t want to use JavaScript validation for some reason, so I decided to post the solution that I have provided on that thread as a reference to others. Here it is: ......
This example shows how to hide a Div when clicking anywhere the page: <html xmlns="http://www.w3.org/19... <head runat="server"> <title>Untitled Page</title> <script type=”text/javascript”> function HideDiv(){ document.getElementById("Co... = 'none'; return false; } function ShowDiv(e){ document.getElementById("Co... = 'block'; if(!e){ e=window.event; } e.cancelBubble=true; return false; } </script> </head> ......
This example shows the basic way on how to access control from external javascript file (.js). Normally, we use the following line below when accessing control within our JavaScript method in the page. document.getElementById('&l... TextBox1.ClientID %>'); AFAIK, Using Inline expression like <% %> will not work within external js files. As a workaround we can pass the id of the control (eg. TextBox) to the funciton as a parameter instead like: External JS file: function GetControlValue(obj) ......
Ok it seems that lot’s of members at the forums is asking on how to display multi-line text in a JavaScript pop up box. So I decided to write this example so that other developers can reference it or if I encounter such a post in the forum then I can simply point them in this example. Check the following code blocks below: <html xmlns="http://www.w3.org/19... <head runat="server"> <title>Untitled Page</title> <script type="text/javascript" language="javascript"> ......
This example demonstrates on how to move items between two ListBox using JavaScript. Here are the code blocks below: <html xmlns="http://www.w3.org/19... <head runat="server"> <title>ListBox Demo</title> <script type="text/javascript" language="javascript"> function AddItemInList(fromLeftToRight, isAll) { var list1 = document.getElementById('&l... ListBox1.ClientID %>'); var list2 = document.getElementById('&l... ListBox2.ClientID %>'); if(Boolean(fromLeftToRight) ......
There are times that we need to use the enter key instead of using the Tab key for moving the focus of the TextBox controls from one to another to perform rapid data entry in the page. This example shows on how to achieve that with the use of JavaScript. Here are the code blocks below: ASPX: <html xmlns="http://www.w3.org/19... > <head id="Head1" runat="server"> <title>Demo</title... </head> <script type="text/javascript" language="javascript"> function controlEnter ......
This demo shows on how to create an "Editable" Label in the page. As we all know, a Label control is intended for displaying read-only data information in the page and thus we cannot make it editable just like the TextBox control. As a workaround we can create a floating Div/Panel with a TextBox. Clicking on the Label will display a Div with a TextBox on it and a Button for updating the Text in the Label. In this demo, i used JavaScript for manipulating the elements in the page and apply a little ......
The following are the Lists of WYSIWYG Editor that you can pick: RadEditor (Telerik). AJAX-enabled. WebHtmlEditor (Infragistics). Cute Editor (CuteSoft) FreeTextBox (FreeTextBox.com). Free for basic edition. Source code available (for a price). Peter's Textboxes (Peter Blum). Suite of enhanced text box controls. UltimateEditor (Karamasoft) Asbru Web Content Editor (Asbru) ASP.Net XHTML WYSIWYG Editor (MoreNet) AspLib Component library (Astron Digital). Includes a WYSIWYG editor, among other things. ......
Recently I have encountered a question at the aspnet forums asking if how to select only one RadioButton vertically and horizontally in a Table.( see this thread). As you can see from that thread, the first solution that I was provided was to use a RadioButtonList Control because it allows you to set the RepeatColumns, RepeatDirection and RepeatLayout attributes. But unfortunately that doesn't actually meets the requirement of the Original Poster (OP). Basically the OP wanted to Select only one RadioButton ......
Some time ago, I always encountered questions in the forums including this thread and this thread on how execute codes when a user closes the browser. AFAIK, the only events that you can use when the browser is closed is the onunload or the onbeforeunload event. The following code blocks below will simulates the closed button of the browser when the user invoked the button and display an alert message informing the user that the window is about to close.. Using the onunload event in the body element:<!DOCTYPE ......
This example shows how to show a bigger Image when the mouse is hover into the original image. The trick here is we are just getting the path of the original image and set the actual size to a bigger size then display it in another Div. Check the code blocks below for your reference. <html xmlns="http://www.w3.org/19... <head runat="server"> <title>Untitled Page</title> <script type="text/javascript" language="ecmascript"> function ShowBiggerImage(obj) { document.getElementById("La... ......
This example demonstrates the basics on how to store and retrieve data between pages using ASP.NET Session. As you may know there are lots of ways on how to pass information between pages and these includes the following: *Sessions *Querystrings *Cross-Page Posting *Cookies *Form Submit *Server.Transfer In this example, I'm going to show the basics on how to store the information in Session and retrieve the value of Session in the next page.. C# protected void Button1_Click(object sender, EventArgs ......
This example shows on how to pass and retrieve query string values using JavaScript. Passsing QueryString to other pages with window.open JavaScript function <html xmlns="http://www.w3.org/19... <head id="Head1" runat="server"> <title>Passing Parameters between pages</title> <script type="text/javascript" language="javascript"> function PassValue() { var paramVal = "Hello ASPNET"; window.open("Default2.aspx?... + paramVal); } </script> </head> <body> ......
This demo shows on how to dynamically adding /removing ListItems in the ASP.NET DropDownList control using JavaScript. Here’s the mark up and the JavaScript code block below: <html xmlns="http://www.w3.org/19... <head runat="server"> <title>Dynamic DropDownList</title> <script type="text/javascript" language="javascript"> function AddItemInList() { var list = document.getElementById('Dr... var box = document.getElementById('Te... var newListItem ......
This example shows how to select ListItems in the ListBox based from the TextBox values using JavaScript. Here’s the code block below. <html xmlns="http://www.w3.org/19... > <head id="Head1" runat="server"> <title>Demo</title... </head> <script type="text/javascript" language="javascript"> function SearchList() { var l = document.getElementById('&l... ListBox1.ClientID %>'); var tb = document.getElementById('&l... TextBox1.ClientID %>'); if(tb.value ......
This demo describes how to implement multiple delete in GridView using CheckBox control and display a confirmation message upon deletion. Assuming that we have this GridView column mark up below <Columns> <asp:TemplateField> <HeaderTemplate> <asp:Button ID="ButtonDelete" runat="server" Text="Delete" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="CheckBox1" runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="CustomerID" ......
This demo describes the different approach to display a confirmation message when deleting a row in GridView and pass the id of the item to the confirmation message. Confirmation means a user is asked first if he/she wanted to delete a record by choosing an option (OK and CANCEL). In this demo, we use the JavaScript confirm function for displaying the confirmation message. Now let’s create our JavaScript confirm function. To do this switch to ASPX source and add the following code block within the ......
This example simulates on how to display a loading message with gif image when the page loads in ASP.NET. <html xmlns="http://www.w3.org/19... ><head id="Head1" runat="server"> <title>Load Wait Message Demo</title></head... type="text/javascript" language="javascript"> if(document.getElementById){ // IE 5 and up, FF var upLevel = true; }else if(document.layers) { // Netscape 4 var ns4 = true; } elseif(document.all) { //IE 4 var ie4 = true; } function ......
This simple JavaScript function validates the TextBox input that allows only numeric values to be entered. <script type ="text/javascript" language="javascript" > function ValidateText(i) { if(i.value.length>0) { i.value = i.value.replace(/[^\d]+/g, ''); } } </script> In your textbox add the onkeyup event or onkeypress. <asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_Tex... onkeyup = "javascript:ValidateText(th... Note: If you wan't ......
This example shows how to limit the number of characters to be typed into the TextBox using JavaScript and display the remaining characters in a Label Control. <script type="text/javascript" language="javascript"> function validatelimit(obj, maxchar) { if(this.id) obj = this; var remaningChar = maxchar - obj.value.length; document.getElementById('&l... Label1.ClientID %>').innerHTML = remaningChar; if( remaningChar <= 0) { obj.value = obj.value.substring(maxchar... alert('Character ......
The following snippet below will display the original Image size in new window when clicking on the image thumbnail using JavaScript.. JAVASCRIPT FUNCTION <script type="text/javascript" language="javascript"> function DisplayNewImageInWidnow() { var img = document.getElementById('&l... Image1.ClientID %>').src; html = "<HTML><HEAD>&l... + "</HEAD><BODY LEFTMARGIN=0 " + "MARGINWIDTH=0 TOPMARGIN=0 MARGINHEIGHT=0><CENTE... + "<IMG ......
I decided to write this article because I always encounter this kind of problem in the ASPNET Forum frequently. So here's a simple (one way) solution on how to invoke the Button Click event when pressing the ENTER key in the TextBox control. ASPX Mark Up and JavaScript function <head> <title>Untitled Page</title> </style> <script type="text/javascript" language="javascript"> function controlEnter (obj, event) { var keyCode = event.keyCode ? event.keyCode : event.which ......
I decided to write this article because I always encounter this kind of problem in the ASPNET Forum frequently. So here's a simple (one way) solution on how to invoke the Button Click event when pressing the ENTER key in the TextBox control. ASPX Mark Up and JavaScript function <head> <title>Untitled Page</title> </style> <script type="text/javascript" language="javascript"> function controlEnter (obj, event) { var keyCode = event.keyCode ? event.keyCode : event.which ......