"Code, Beer and Music ~ my way of being a programmer"
There are 61 entries for the tag
GridView
Introduction: This question has been asked many times at the forums (http://forums.asp.net) and definitely there are already bunch of different solutions provided. Most of the examples from the web are using DataSource controls (e.g SqlDataSource, ObjectDataSource, etc..) to implement cascading DropDownList in GridView and I can’t seem to find a formal example that demonstrate how to implement it without using DataSource controls. Note: Before you proceed, make sure that you already know the basics ......
This question was asked from the forums.asp.net and thought I’d blog about it for future reference. The question is “how do we set ReadOnly for autogenerated columns in gridview when it’s on edit mode?”. Well as you may know autogenerated columns are created dynamically on the fly and so we need to manually access each columns in the code before we can set their properties. To make it more clear we’ll create a simple demonstration. Consider that we have this HTML mark-up below: <asp:GridView ID="GridView1" ......
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 ......
Recently I was working with data from a generic List<T> and one of my objectives is to get the distinct values that is found in the List. Consider that we have this simple class that holds the following properties: public class Product { public string Make { get; set; } public string Model { get; set; } } Now in the page code behind we will create a list of product by doing the following: private List<Product> GetProducts() { List<Product> products = new List<Product>(); Product ......
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 ......
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 ......
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 ......
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) ......
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 ......
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 ......
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... ......
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 ......
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. ......
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... ......
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 ......
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") ......
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" ......
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... ......
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 ......
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 ......
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 ......
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 ......
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"] ......
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 ......
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 ......
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 ......
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 ......
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 ......
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... ......
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 ......
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 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 ......
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 ......
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"... ......
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" ......
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 ......
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. ......
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 ......
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 ......
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-... ......
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 ......
This example is a continuation of my previous example about “Uploading and Storing Images to Database in ASP.NET”. In this demo, I’m going to show how to display image (binary format) from database to ASP Image control and display its corresponding image information based on user selection. In this demo, we are going to use a Handler.ashx file for fetching the binary data from the database and then stream it. What is a Handler? A handler is responsible for fulfilling requests from a browser. Requests ......
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 ......
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 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 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 ......
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 ......
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; ......
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 ......
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 ......
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 ......
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" ......
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" ......
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 ......
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 ......