Geeks With Blogs

News

Microsoft MVP


Moderator at CodeASP.NET


Quiz Master




free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer" JavaScript There are 42 entries for the tag JavaScript
FAQ: Highlight GridView Row on Click and Retain Selected Row on Postback
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 ......

Posted On Monday, September 10, 2012 6:07 PM

ComponentOne: New Extensions for Microsoft Visual Studio LightSwitch
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 ......

Posted On Friday, September 7, 2012 7:46 PM

A Monkey Talks about ASP.NET
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 ......

Posted On Thursday, April 14, 2011 2:50 PM

Entity Framework - Editing, Updating and Deleting Data in the Form
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 ......

Posted On Monday, April 4, 2011 8:00 PM

Using Radio Button in GridView with Validation
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 ......

Posted On Thursday, March 3, 2011 5:20 PM

A Simple Collapsible Menu with jQuery
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 ......

Posted On Friday, February 4, 2011 5:02 PM

Validate if aTextBox Value Start with a Specific Letter
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'); ......

Posted On Wednesday, February 2, 2011 12:32 AM

Highlight Row in GridView with Colored Columns
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... ......

Posted On Thursday, January 13, 2011 6:23 PM

FAQ: GridView Calculation with JavaScript - Editable Price Field
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 ......

Posted On Thursday, December 9, 2010 11:43 PM

FAQ: GridView Calculation with JavaScript - Displaying Quantity Total
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 ......

Posted On Thursday, December 9, 2010 5:54 PM

FAQ: GridView Calculation with JavaScript - Formatting and Validation
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... ......

Posted On Thursday, December 9, 2010 5:17 PM

FAQ: GridView Calculation with JavaScript
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. ......

Posted On Wednesday, December 8, 2010 10:29 PM

A Customize MessageBox, ConfirmBox and FrameBox Control for ASP.NET
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 ......

Posted On Tuesday, November 2, 2010 11:01 PM

Master Page and JQuery: Solving Object Expected Error
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 ......

Posted On Wednesday, October 6, 2010 7:44 PM

Adding Dynamic Rows in GridView with TextBox and DropDownList - Validation
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") ......

Posted On Thursday, August 5, 2010 4:10 PM

Display animated gif before Iframe content is loaded
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... ......

Posted On Tuesday, July 13, 2010 8:31 PM

MaskEditExtender and ClearMaskOnLostFocus
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... ......

Posted On Thursday, July 1, 2010 11:04 PM

Editing, Updating and Deleting Data in the Form using LINQ to SQL
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 ......

Posted On Wednesday, May 5, 2010 4:52 PM

FAQ: Cross Browser GridView Fix Header and Footer with ASP.NET Ajax
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 ......

Posted On Wednesday, January 6, 2010 5:17 PM

Limit the Number to be Selected in the ListBox control - (Server Side way)
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: ......

Posted On Tuesday, November 24, 2009 2:52 PM

Hide Panel When Clicking Anywhere in the Page
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> ......

Posted On Sunday, October 18, 2009 2:22 PM

Accessing Controls from ASPX to External JavaScript file
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) ......

Posted On Tuesday, August 18, 2009 10:10 PM

Adding Line Breaks in JavaScript Alert and Confirm popup Message in ASP.NET
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"> ......

Posted On Monday, August 3, 2009 4:45 PM

Moving ListItems between Two ListBox – Client Side Approach
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) ......

Posted On Tuesday, June 23, 2009 4:59 AM

Move TextBox Focus when Hitting Enter Key.
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 ......

Posted On Monday, June 22, 2009 9:09 PM

Creating an Editable Label in ASP.NET
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 ......

Posted On Tuesday, June 9, 2009 7:45 PM

Lists of WYSIWYG Editor
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. ......

Posted On Wednesday, June 3, 2009 5:40 PM

Selecting One RadioButton Vertically and Horizontally
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 ......

Posted On Monday, June 1, 2009 5:24 PM

FAQ: Capturing Browser Close Event
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 ......

Posted On Wednesday, May 20, 2009 6:24 PM

FAQ: Show Large Image on MouseOver using JavaScript
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... ......

Posted On Thursday, May 7, 2009 4:49 PM

Using Session to pass information between pages in ASP.NET
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 ......

Posted On Tuesday, April 14, 2009 4:14 AM

Passing and Retrieving Querystring using JavaScript in ASP.NET
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> ......

Posted On Tuesday, April 14, 2009 3:37 AM

Inserting and Removing ListItems in DropDownList using JavaScript
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 ......

Posted On Tuesday, March 24, 2009 11:56 PM

Search ListBox items using JavaScript
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 ......

Posted On Wednesday, February 25, 2009 8:14 PM

GridView Multiple Delete with CheckBox and Confirm
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" ......

Posted On Sunday, February 22, 2009 2:01 AM

Display Confirmation Message on GridView Deleting
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 ......

Posted On Sunday, February 22, 2009 1:52 AM

Displaying Wait Message on Page Load in ASP.NET
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 ......

Posted On Tuesday, February 17, 2009 5:18 PM

TextBox that Allows Only Numeric Inputs
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 ......

Posted On Tuesday, February 17, 2009 3:54 PM

Restrict number of characters to be entered in the MultiLine TextBox
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 ......

Posted On Tuesday, February 17, 2009 3:44 PM

Display Original Image Size in new window when clicking on the Image
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 ......

Posted On Thursday, September 11, 2008 10:38 AM

Forcing Button Click event to fire up when pressing ENTER Key on TextBox
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 ......

Posted On Thursday, September 11, 2008 10:31 AM

Forcing Button Click event to fire up when pressing ENTER Key on TextBox
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 ......

Posted On Thursday, September 11, 2008 10:26 AM

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net | Join free