GridView

There are 54 entries for the tag GridView

Show Large Image on Mouseover with jQuery

I’ve been seeing many members in the forums asking how to display a large copy of the image on mouseover. Some of them are displaying the image in a Repeater, GridView or DataList control. I didn’t find any direct solution that shows the scenario they wanted so I thought of writing this post to demonstrate how to go about it. I know there are lot of ways of doing/implementing a solution for this scenario and this is just one them. In this example I’m going to use the DataList control for displaying...

Masterpage, User Control, Modal Popup and Update Panel - Passing values to parent page.

A developer is asking how to pass data from a UserControl control to the main page. Basically, the scenario is that he has a user control which contains a GridView and wrap arround within asp Ajax UpdatePanel control. The UserControl will then be used at the page that is hosted within a master page. The page contains some TextBox in which it will be populated once the user selects a row from the GridView also on that page the Modalpop is defined. To achieve that, here's one solution I've provided...

Tip Of The Day - Remove GridView Row Highlighting on Edit Mode

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)...

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...

Uploading Image to a Folder and Display the Image after Upload

I wrote a series of blog posts awhile back before that demonstrates the following: Uploading and Storing Images to Database in ASP.NET Displaying Image to Image Control based on User Selection in ASP.NET FAQ: Displaying Image from Database to GridView Control Uploading and Storing Image Path to Database and Image to Folder - Part 1 Uploading and Storing Image Path to Database and Image to Folder - Part 2 (Displaying of Images) Validate Image extensions upon Upload In this post I'm going to demonstrate...

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...

Inserting and Deleting Sub Rows in GridView

A user in the forums (http://forums.asp.net) is asking how to insert sub rows in GridView and also add delete functionality for the inserted sub rows. In this post I'm going to demonstrate how to this in ASP.NET WebForms. The basic idea to achieve this is we just need to insert row data in the DataSource that is being used in GridView since the GridView rows will be generated based on the DataSource data. To make it more clear then let's build up a sample application. To start fire up Visual Studio...

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...

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...

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...

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....

Building Dynamic Repeater Rows

Few months ago I wrote a series of blog posts about creating a dynamic rows in GridView and Table. In this example I'm going to demonstrate how to build a simple form that allows you to create a dynamic row using the standard ASP Repeater control. To get started, let’s grab a Repeater control from the Visual Studio Toolbox and place it in the WebForm. The mark up should look something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml...

Tip/Trick: Fixing GridLines Border Color in IE8

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...

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")...

Adding Dynamic Rows in GridView with TextBox and DropDownList

Few months ago I wrote a sample demo on how to Add Dynamic Rows in GridView with TextBoxes and how to Add Dynamic Rows in GridView with DropDownLists. I have had a few comments and emails asking how to do the same with a combination of TextBox and DropDownList. In this post, I'm going to show you the way on how to this. Here are the code blocks below: ASPX: <asp:gridview ID="Gridview1" runat="server" ShowFooter="true" AutoGenerateColumns="false"... <Columns> <asp:BoundField DataField="RowNumber"...

GridView BoundField Column: Accessing TextBox Control on Edit Mode

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...

FAQ: How to- Generate Dynamic TexBox in the Form and Save the values to Database

Few months ago I've been seeing many users in the forum asking how to generate dynamic textbox on the form and save the values to the database on Button click, so I've decided to write this post and wrap up all the examples that I wrote before on how to accomplish the task using different controls so that when I encounter such or similar questions again in the forum, I can simply refer them to this post. Here are those examples: Using ASP Table: FAQ: Dynamically Adding Rows in ASP Table on Button...

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...

Move Multiple Rows Between GridViews

This example shows how to move multiple rows between GridViews. The main idea here is to use a CheckBox control for selecting the rows to be removed from one GridView to another and vise versa. Take a look at sample screen shots below: On initial load: Selecting rows from the left GridView: After Moving the selected rows to the right GridView: As you notice the selected rows are automatically sorted by its ID upon moving. Selecting rows from the Right GridView: After Moving the selected rows to the...

UPDATED: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality

In my previous post, I have posted the updated the codes about Adding Dynamic Rows in ASP.Net GridView Control with TextBoxes because there is a bug on that. So obviously the codes in my other example about Adding a Delete functionality in Dynamic TextBoxes in GridView is affected. To fix the issue then you can refer to this updated code below: protected void LinkButton1_Click(object sender, EventArgs e) { LinkButton lb = (LinkButton)sender; GridViewRow gvRow = (GridViewRow) lb.NamingContainer; int...

UPDATED: Adding Dynamic Rows in ASP.Net GridView Control with TextBoxes

Well its seems that there is a little bug with my previous article about “ Adding Dynamic Rows in ASP.Net GridView Control with TextBoxes “. The problem is that whenever you change the value of the previous data in the TextBox the updated values will not reflect on postbacks. So I have modified a bit of my codes at AddNewRowToGrid() and SetPreviousData() methods to fix the issue. Here are the code blocks below for the updates: private void AddNewRowToGrid() { int rowIndex = 0; if (ViewState["CurrentTable"]...

Adding Dynamic Rows in ASP.Net GridView Control with TextBoxes

Adding Dynamic Rows in ASP.Net GridView Control with TextBoxes

Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality

In my previous examples, I have demonstrated on how to add dynamic rows in GridView control with TextBoxes and how to save the values into the database. Now, seems that most of the developers are asking if how to add a delete functionality with it. So in this example, I’m going to show on how to delete a certain row in the dynamic GridView with TextBoxes. Note: Before reading this example, then be sure to refer my previous examples mentioned above so that you will have a basic idea on how does the...

Uploading and Storing Image Path to Database and Image to Folder - Part 2 (Displaying of Images)

In my previous example, we have learned on how to save the actual image to a folder and image path to the database. In this example, I’m going to show on how to display those images in a GridView and Repeater control. To get started, let’s create a method for fetching the image information from the database. Here’s the code block below: private DataTable GetData() { DataTable dt = new DataTable(); SqlConnection connection = new SqlConnection(GetConnection... try { connection.Open(); string...

Uploading and Storing Image Path to Database and Image to Folder - Part 1

I decided to write this example because this has been asked many times at the forums. In my previous article I have shown on how to Upload and Save the Images to Database, In this article I will show on how to upload and save the image to folder and path to database. To get started, let’s create a simple database table for storing the Image information and path to the database. I this example I named the table as “ImageInfo” with the following fields below: Note:I set the Id to auto increment so...

Save Dynamic TextBox Values from GridView to Database

In my previous article, I have demonstrated on how to add dynamic rows in GridView control with TextBoxes. Now, seems that most of the developers are asking if how to save all the data that was entered from the dynamic textbox in the GridView to the database. So in this example, I’m going to show on how to save them all in the database. To get started then lets create a sample Table in SQL Server. In this example, I named the table as “SampleTable” with the following fields below: Note: I set the...

Sorting GridView Manually with TemplateFields

I decided to write this example because this has been asked many times at the forums. In this article, I will show on how to sort GridView columns manually using a DataTable. Note that in this example, I used my own database for populating the GridView. See Adding Rows in GridView for more info. Now to get started lets set up the GridView with TemplateField columns. Since we are working with TemplateFields then we need to handle sorting manually by adding a LinkButton control inside the HeaderTemplate...

Adding Dynamic Rows in GridView with DropDownLists

Few days ago, a developer posts a comment in my previous article about “Adding Dynamic Rows in ASP.Net GridView Control with TextBoxes” asking if how to implement the same functionality with DropDownList. In this example, I will going to show on how to generate a Row in GridView with DropDownList when clicking a Button that is residing inside a GridView Footer and retain the Selected Items of the DropDownList on postbacks. Here are the code blocks below: ASPX Source: <html xmlns="http://www.w3.org/19...

Ways on how to Hide AutoGenerateColumns in GridView.

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...

FAQ: How to Get Hidden Column values in GridView

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...

Adding Rows in GridView with Edit, Update and Delete Functionality

This example is a continuation of my previous post about “Adding Rows in GridView”. In this example I will going to demonstrate on how we are going to do Edit, Update and Delete operations in GridView using TemplateField Columns. If you wan’t to implement those operations using BoundField Columns then you can refer to my previous example about “GridView: Insert, Edit, Update and Delete – the ADO.NET way”. Since this example is a continuation, then I would recommend you to start reading this example...

Adding Rows in GridView

This example shows on how to add rows of data in the GridView control. In this example, I created a simple database table called “Table1” for storing the data. The Table has the following columns: Id – PK Employees Position Team Note that I added some dummy data in table that I have created so that we can display something in the GridView when the page is loaded for the first time. To get started, let’s grab a GridView Control from the Visual Studio ToolBox and place it in the webform. Then set up...

Adding Dynamic Rows in GridView with TextBoxes

Introduction: I decided to write this article because this has been asked so many times before at the forums(http://forums.asp.net) . Basically, this example shows on how to generate a Row in GridView with TextBoxes when clicking a Button that is residing inside the GridView footer. To get started, let’s grab a GridView control from the Visual Studio Toolbox and put it in the WebForm. The mark up would look something like this: <asp:gridview ID="Gridview1" runat="server" ShowFooter="true" AutoGenerateColumns="false"...

Move AutoGenerate Columns at LeftMost Part of the GridView Columns

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"...

How to: Generate Control Events that Resides within a GridView TemplateField

I decided to post this because this has been asked many times before at the forums. So for those who doesn't know how to generate a control event that are residing within the TempleFields of GridView then you can follow these few steps below: * Switch to Design View in Visual Studio Designer * Right Click on the GridView * Select Edit Template and then Select the Column where the Control that you wan't to generate the event resides (e.g Button, TextBox, etc..) * The GridView will then changed to...

FAQ: Calculate Totals in GridView and Display it in Footer - Server side approach

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....

Pivot Data in GridView - A Generic Pivot Method with DataTable

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...

Filter GridView Data based from Date Ranges

This example shows how to filter data in GridView based from two given dates. For example you have two Calendar Control which is allows you to select the Start Date and End Dates accordingly. These selected dates will then be displayed in TextBoxes and later on you wish to Grab the data from the database based from the dates (StartDate and EndDate) that is displayed in the TextBox and bind the result to a GridView control. Here are the code blocks below: private string GetConnectionString(){ //call...

How to: Wrap the data of a Particular Column in GridView

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-...

FAQ: Displaying Image from Database to GridView Control

I wrote this demo because I observed that lots of people in the forum (forums.asp.net) always ask questions on how to display Image that was stored in the database to GridView control. Before reading this example, be sure that you have already know how to upload image to the database. If you are not familiar with it then I would suggest you to read my previous example about “Uploading and Storing Images to Database in ASP.NET”. In this demo, we are going to use a Handler.ashx file for fetching the...

Tip/Trick: Show Header and Footer of GridView when no Data returned.

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...

Tip/Trick: Highlighting GridView Rows on Mouseover

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...

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"...

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...

GridView Insert, Edit, Update and Delete – The Ado.Net way

This demo is a continuation of my previous example “Binding GridView with Data”. If you are not familiar of binding the GridView the ado.net way then I would suggest looking at my previous example first before you proceed to this example. Basically, this demo describes the basic way to do INSERT, EDIT, UPDATE and DELETE data in ASPNET GridView Control using the ADO.NET way. STEP 1: Creating a DataBase Table In this demo, I presumed that you already have a basic background on how to create a simple...

Binding GridView with Data - The ADO.NET way

This example demonstrates how to populate GridView with data from the database using the ADO.NET way. Before you proceed reading this example be sure that you know the basics of ADO.NET manipulation. If you are not familiar with ADO.NET then I would suggest you to refer at the following link below: ADO.NET Tutorial STEP 1: Setting up the Connection String - Open your Web.config file and set up your connection string like below: <connectionStrings> <add name="MyDBConnection" connectionString="Data...

Accessing Controls in GridView TemplateFields on GridView Edit Mode

This example demonstrates how to access ASP.NET server controls that resides within the TemplateField Column of GridView on Edit Mode. In this example we are using the PreRender event of GridView instead of RowEditing event since we cannot directly access controls at RowEditing event of GridView. See below for example: protected void GridView1_PreRender(object sender, EventArgs e){ if (this.GridView1.EditIndex != -1){ Button b = GridView1.Rows[GridView1.Ed... as Button;...

Limiting the Data being displayed in the GridView and Display Tooltip

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...

Binding one GridView with Different tables from the database based on user selection

Biding one GridView with Different tables from the database based on user selection By: Vincent Maverick Durano This article demonstrates on how are we going to bind a GridView with different data from different tables based from the selection in the RadioButonList.. In-order to achieve this functionality then we need to dynamically generates a boundfield columns because the GridView will have different datafields to display. Also note that Im using the Northwind database here just for demo. STEP...

Adding Rows in GridView without using a Database

This article describes on how to add rows in GridView without using a database. Basically the GridView will be populated with data based on the values entered in the TextBox on Button Click and retain the GridView data on post back. STEP 1: Add One TextBox, One Button and One GridView control the web form. The ASPX mark-up should look like these below <asp:TextBox ID="TextBox1" runat="server"/> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> <asp:GridView...

Adding Multiple Columns and Rows in GridView without using a Database

This article describes on how to add multiple columns and rows in GridView without using a database. Basically the GridView will be populated with data based on the values entered in each TextBoxes on Button Click and retain the GridView data on post back. STEP 1: Add Three TextBox, One Button and One GridView control the web form. The ASPX mark-up should look like these below <asp:TextBox ID="TextBox1" runat="server"/> <asp:TextBox ID="TextBox2" runat="server"/> <asp:TextBox ID="TextBox3"...

Adding multiple Columns and Rows in GridView without a Database

This article describes on how to add multiple columns and rows in GridView without using a database. Basically the GridView will be populated with data based on the values entered in each TextBoxes on Button Click and retain the GridView data on post back. STEP 1: Add Three TextBox, One Button and One GridView control the web form. The ASPX mark-up should look like these below <asp:TextBox ID="TextBox1" runat="server"/> <asp:TextBox ID="TextBox2" runat="server"/> <asp:TextBox ID="TextBox3"...

Creating a Data Access Framework

Introduction: This article describes on how to create a data access architecture using sqlclient objects that will returns a DataTable. It also discusses here on how to use and access a certain method in a particular class for you to manipulate the data into your codes. Please note that I am using the Northwind database here and all the codes in this article are written in C# language. STEP1: Adding a Class First, I added some folders under my App_Code folder to store some classes. This class includes...

Creating a Simple Data Access Framework in ASP.NET

Introduction: This article describes on how to create a data access architecture using sqlclient objects that will returns a DataTable. It also discusses here on how to use and access a certain method in a particular class for you to manipulate the data into your codes. Please note that I am using the Northwind database here and all the codes in this article are written in C# language. STEP1: Adding a Class First, I added some folders under my App_Code folder to store some classes. This class includes...