"Code, Beer and Music ~ my way of being a programmer"
There are 52 entries for the tag
TipsTricks
Typically we will attach the mouseover and mouseout client-side events on the gridview rows to highlight rows on mouseover, but there are cases that we don't want to make the row highlighted when we are on edit mode. To do this we can check the GridView EditIndex to determine if the row is on edit mode and then do the validation there. Here's a sample code block below of what I am talking about: protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) ......
I was playing around with CSS and ASP.NET AJAX Modal Popup Control and wanted to have a popup that has a rounded corner outer shadows on it without using images. After searching the web for an existing solution I found this link and tried to apply it on my modal. Luckily I was able to make it work. Here's the whole code for my experiment: 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml... 2: <%@ Register Assembly="AjaxControlToolkit" ......
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. ......
There are times that we need to set the border color of the GridView just like in my case, I was told to set the border color of GridView to a particular color instead of the default black. What I did is simply use the BorderColor property of the GridView and set it declaratively like below: <asp:GridView ID="GridView1" runat="server" GridLines="Both" BorderColor="Red"><as... Here's how it looks when we run that one in the browser. Firefox 3.5 Safari 5 IE 8 Noticed that in IE8 ......
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 ......
If you are working with GridView BoundField Columns and wanted to access the TextBox control on row editing for whatever reasons (which means when you click on the Edit link) then below is an example on how to do it. Let say for example you need to change the BackColor of the TextBox on edit mode. So at PreRender event of GridView, you can do something like this:protected void GridView1_PreRender(object sender, EventArgs e) { if (this.GridView1.EditIndex != -1) { TextBox tb = (TextBox)GridView1.Rows[Gri... ......
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... ......
Few months ago I've been seeing many users in the forums asking how to retain the selected tab in JQuery Tab across postbacks, so I've decided to write this post as reference to others who might encounter this kind of scenario. To describe the scenario, lets go a head and create the HTML mark up and construct the tabs. Here’s the markup below: <html xmlns="http://www.w3.org/19... > <head runat="server"> <title>JQuery Demo</title> <link href="jquery-ui-1.8.1.custo... ......
Recently, one of the members at forums.asp.net is asking how to highlight multiple dates in the ASP Calendar and make it selectable and make rest of the un-highlighted dates disabled. So I thought of sharing the solution that I have provided on that thread as a reference to others who might need it. Here's the code block below: C# public partial class _Default : System.Web.UI.Page { private List<DateTime> listDates; protected void Page_Load(object sender, EventArgs e) { //Suppose that you have ......
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) ......
Many members in the forums are asking if why is it that an integer value with a leading zero is being trimmed off when converting it to a string? Consider this example: int num = 0123456; // a 7 numbers string sNum = num.ToString(); //The result will give you 123456 What happened to the leading zero? Well basically, leading zero has no significance to an integer because by nature an integer with a value of 01 is simply the same as 1. So based on the example above we have an integer value of 0123456 ......
Recently, one of the members in the forum (http://forums.asp.net) is asking if how to remove a particular column in a DataTable if all values in the row of that column are null or empty. So I decided to post the solution that I have provided in that thread as a reference to others who encounter the same problem. Just for the simplicity of this demo, I created a sample DataTable with a dummy data on it just for us to test. Here’s the code block below: private DataTable CreateDataTable() { DataTable ......
In order to hide those, we can set the BorderStyle and the PartChromeType attribute of the WebZone to none after we set the display mode of WebPartManager to browse just like below: protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { WebPartManager1.DisplayMode = WebPartManager.BrowseDispla... foreach (WebPartZone wz in WebPartManager1.Zones) { wz.BorderStyle = BorderStyle.None; wz.PartChromeType = PartChromeType.None; } } } That’s simple! Technorati Tags: ASP.NET,WebParts,TipsTricks ......
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"> ......
In my previous two examples, we have learned on how to Upload and Save the Image to a Folder and path to database and how to Save the Image to the Database. The two previous examples only tackle the basics about uploading and saving a file without validating the file to be uploaded. In this example, I’m going to show on how to validate a file that only allows image files to be uploaded using server side validations. Here are the code blocks below: private void StartUpLoad() { if (FileUpload1.HasFile) ......
I decided to write this example because this has been asked many times before at the forums. As you may know, we cannot "directly" hide AutoGenerateColumns in our codes using the code below: GridView1.Columns[index].Vi... = false; Why? This is because auto generated columns are not added in the GridView columns collection.Using the code above will give you "index was out of range error". In this example I will show the different ways on how to hide specific column in GridView with AutoGenerateColumns ......
This example shows on how to get all server controls ID in the page using recursive FindControl. Here are the code blocks below: protected void Page_Load(object sender, EventArgs e) { GetPageControlsID(Page); } public void GetPageControlsID(Control Parent) { string txBoxID = string.Empty; string ddListID = string.Empty; string lblID = string.Empty; System.Collections.Speciali... strColTxtBoxID = new System.Collections.Speciali... System.Collections.Speciali... ......
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 ......
I decided to write this simple demo because this issue has been asked many times at the forums. Hidden columns are fields in GridView that you don’t want to expose or show in the page, usually this field is the primary key of the data. Since a primary is a confidential data then you might want to hide it to the users. Most people usually use BoundField columns for displaying the data and just hide the field that contains the primary key. In this example, I will demonstrate two ways on how to access ......
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 ......
There are certain scenarios that we need to combine an AutoGenerated Columns with TemplateField Columns or even BoundField Columns in the GridView. As we all know, by default the GridView will automatically display all the AutoGenerated Columns to the rightmost column of the GridView. Consider this example below: Assuming that we have this GridView markup below: <asp:GridView ID="GridView1" runat="server"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:Button ID="Button1" ......
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 ......
I decided to write this post because I always encounter this kind of issue so many times before at the forums. The main question is that they want to automatically calculate the totals when a user enter an amount from the TextBox control that is residing in the GridView template. So this example shows the basic way on how to achieve this with the server side manipulations. Note that this demo requires that you know the basics of ADO.NET and for binding a GridView control with data from database. ......
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 “PIVOT” the original data that is displayed in the GridView. To start then lets grab two GridViews from the Visual Studio Toolbox and place it to your webform. The ASPX source would look something like this: ORIGINAL Table: <asp:GridView ID="GridView1" runat="server"> </asp:GridView><br /><br /> PIVOTED Table: <asp:GridView ID="GridView2" runat="server" ShowHeader="false"> </asp:GridView> Now, lets create the Generic method for Pivoting ......
The following code block below will allow you to display spacing or indention in the DropDownList items. protected void Page_Load(object sender, EventArgs e){ if (!Page.IsPostBack) { const string spaceChar = " &n... "; DropDownList1.Items.Add(new ListItem("Parent Item 1", "Parent Item 1")); DropDownList1.Items.Add(new ListItem("Parent Item 2", "Parent Item 2")); DropDownList1.Items.Add(new ListItem(Server.HtmlDecode(... + "Sub1 Item 2"), "Sub1 Item 2")); DropDownList1.Items.Add(new ......
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... ......
One of the member at the http://forums.asp.net ask if how to wrap the data in the GridView Control. See this thread (http://forums.asp.net/t/14... I decided to post the solution that I was provided in that thread as a reference for all who needs a solution for the same issue. Here’s the code block below: protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Cells[0].Attributes.A... "word-break:break-all;word-... ......
Here an example on how to disable or set the calendar previous dates to not selectable. ASPX: <asp:Calendar ID="Calendar1" TodayDayStyle-Font-Underlin... runat="server" SelectionMode="None" OnDayRender="Calendar1_DayR... > <DayStyle Font-Underline="False" Wrap="False" /> </asp:Calendar> RELEVANT CODE: protected void Calendar1_DayRender(object sender, DayRenderEventArgs e){ if (e.Day.Date < DateTime.Now.Date){ e.Day.IsSelectable = false; e.Cell.ForeColor = System.Drawing.Color.Gray; ......
I decided to write this example because I always encounter this kind of question at http://forums.asp.net/. This example basically changes the background color of the calendar dates based on the event dates from the database. You can tweak the codes provided in this example to suit your needs. Here are the code blocks below: protected void Calendar1_DayRender(object sender, DayRenderEventArgs e) { DataTable dt = GetDates(); DateTime eventDate; string eventType = string.Empty; if (dt.Rows.Count > ......
This example shows the different ways on how to clear control values in the page. Here are the following approaches that you can use. 1. Creating a method that would loop through the page controls and clear its values accordingly like: private void ClearControls() { foreach (Control c in Page.Controls) { if (c.GetType().ToString() == "System.Web.UI.WebControls.... { TextBox tb = (TextBox)c; if (tb != null) { tb.Text = string.Empty; } } if (c.GetType().ToString() == "System.Web.UI.WebControls.... ......
This example shows the enhanced version of my previous example about Creating Custom WebPartZones with Custom verbs (Move right/ Move Left). One of the most common issues with ASPNET WebPart in ASPNET 2.0 is the drag-and-drop functionality in firefox. As you may know the drag-and-drop feature of WebParts will not work in firefox once it is placed inside an UpdatePanel control. So in this article, I will show how are we going to move certain WebParts in different zones without the drag and drop functionality ......
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 ......
There are two basic ways on how to display two fields from database in the DropDownList. The first one is concatenating it in the sql query and the second one is concatening it programmatically in codes. Manipulating the sql query to concatenate two fields. Here’s the code block below. private void BindDropDownList() { DataTable dt = new DataTable(); SqlConnection connection = new SqlConnection(GetConnection... try { connection.Open(); string sqlStatement = "SELECT CustomerID + ' ---- ' + ......
This example demonstrates how to show the Header and Footer of GridView when no data returned from the DataSet or DataTable. The trick here is to add a new blank row to the DataTable that you used as your DataSource if there was no data returned in your query. Here’s the method for showing the Header and Footer of GridView when no data returned in the query. private void ShowNoResultFound(DataTable source, GridView gv) { source.Rows.Add(source.NewR... // create a new blank row to the DataTable ......
This demo shows on how to do multiple date selections in the standard ASP.NET Calendar Control. The basic idea here is we use List collection to hold the selected dates from the calendar control and store them into Session to keep the selected dates on postbacks and assigned the selected dates back based from the list values at SelectionChanged event.. Here's the code blocks below: First we need to declare the following namespace below for us to use the List Class using System.Collections.Generic; ......
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 shows on how to add a default Select option in the DropDownList. I decided to write this sample demo because I always encounter this question at the ASP.NET forums. To make this work then you just need to set the property AppendDataBoundItems to TRUE in the DropDownList. Here’s an example for adding a Select option declaratively at the mark up. <asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="true"... <asp:ListItem Value="-1">Select</as... ......
Here’s an example on how to highlight GridView rows on mousover at RowCreated or RowDataBound event of GridView by simply adding an attributes to the row. Here’s the code block: protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { string onmouseoverStyle = "this.style.backgroundColor... string onmouseoutStyle = "this.style.backgroundColor... if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes.Add("onmou... onmouseoverStyle); e.Row.Attributes.Add("onmou... ......
This example demonstrates how to print or display the contents of the MultiLine TextBox in a Label Control and retain its line breaks. Basically MultiLine Mode of TextBox uses Environment.NewLine to create a new line. So if you try to display the values of TextBox in a Label Control or print it on the page and retain its position then you can replace the Environment.NewLine with <BR> Tag since Label control doesn't recognized Environment.NewLine. Here's a sample demo below for your reference: ......
This example shows how we are going to set the Height of the MultiLine TextBox automatically when the contents of the TextBox is larger than the size of the TextBox. First thing you need is DON'T set the Height of the TextBox in the mark up (ASPX) and then do the following: C# protected void TextBox1_Load(object sender, EventArgs e){ int charRows = 0; string tbCOntent; int chars = 0; tbCOntent = TextBox1.Text; TextBox1.Columns = 10; chars = tbCOntent.Length; charRows = chars / TextBox1.Columns; int ......
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 ......
This example shows how to limit the number of Listitems to be selected in the ListBox control. ASPX <html xmlns="http://www.w3.org/19... ><head runat="server"> <title>Untitled Page</title> <script type="text/javascript" language="javascript"> function GetCurrentItemsSelected(obj) { var o = obj; document.getElementById('&l... HiddenField1.ClientID %>').value = o; } </script></head>... <form id="form1" runat="server"> <asp:ListBox ......
The following snippet below describes on how we are going to set the ListItem Background Color based on the Color name displayed in the DropDownList ASPX MARKUP OF DROPDOWNLIST <asp:DropDownList ID="DropDownList1" AppendDataBoundItems="true" runat="server" AutoPostBack="True" OnSelectedIndexChanged="Dro... OnLoad="DropDownList1_Load"... <asp:ListItem Value="-1">Select</as... <asp:ListItem Value="0">Red</asp:Li... <asp:ListItem ......
The following snippet below describes on how we are going to limit the Text displayed in the boundfield column of the GridView and display the original data in the ToolTip when user hovers the mouse for a particular cell. C# protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { ViewState["OrigData"] = e.Row.Cells[0].Text; if (e.Row.Cells[0].Text.Length >= 30) //Just change the value of 30 based on your requirements { e.Row.Cells[0].Text ......
Here's an example on how to pass Multiple querystrings in the page.. Page1 protected void Button1_Click(object sender, EventArgs e) { string strName = "VINZ"; string strAddress = "CEBU"; string strDate = DateTime.Now.ToShortDateStr... Response.Redirect(string.Fo... } The on Page2 you can get each values this way below protected void Page_Load(object sender, EventArgs e) { if ((Request.QueryString["para... ......
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 ......