Posts

Showing posts with the label GridView

Donate

ASP.NET Web Forms GridView Show Confirm Dialog Using jQueryUI Dialog

Image
Good day! I've had some ASP.NET Webforms projects before that use the window confirm dialog box to prompt for alerts before doing any action in the page or control. Since I want these projects to be more interactive in nature, I decided to replace some of the confirm dialogs using jQueryUI. As of this time there are still tons of ASP.NET Webforms projects in maintenance mode. So it's safe to say that this technology will still be around for a couple of years. This tutorial does not use database but primarily focused on using the jQuery UI Dialog for ConfirmDelete action rather than using the traditional Window ConfirmDialog. To begin with, simply create an ASP.NET Webforms project with a Models folder. Inside that folder is a class that contains Contact information. [Serializable] public class Contact { public int ID { get ; set ; } public string Name { get ; set ; } public string Phone { get ; set ; } public string Address { get ; set ; } public strin

ASP.NET Web Forms GridView With Running Total Per Group Using JavaScript

Image
Basing from the post DataTable With Running Total Per Group which applies running total to a DataTable object, we can also achieve the same functionality through the front-end side by changing the structure of the GridView control given that this is an ASP.NET WebForm application. The snippet to set the control's data source is simple such as below: dt.Columns.AddRange( new DataColumn[ 5 ] { new DataColumn( "SrNo" , typeof ( int )), new DataColumn ( "PartyName" , typeof ( string )), new DataColumn ( "ItemName" , typeof ( string )), new DataColumn ( "ChqAmt" , typeof ( int )), new DataColumn ( "PartyCode" , typeof ( string ))}); dt.Rows.Add( 1 , "ABC Water Supply" , "Construction Service" , 400 , "ABC" ); dt.Rows.Add( 2 , "ABC Pump Services" , "Type 24 Engine Pump" , 150 , "ABC" ); dt.Rows.Add( 3 , "ABC Water Supply" , "12 Ft Wa

Hide ASP.NET Web Forms GridView BoundField Column With Value Accessible Through JavaScript

To hide a BoundField column but make it's value still accessible through JavaScript just set column's ItemStyle-CssClass and HeaderStyle-CssClass properties using CSS class with value display:none . CSS .hiddenColumn { display : none ; } ASPX <asp:BoundField DataField= "GroupCode" HeaderText= "Group Code" ItemStyle-CssClass= "hiddenColumn" HeaderStyle-CssClass= "hiddenColumn" />

Export ASP.NET GridView To Excel And Preserve Leading Zeros

Image
Hi, There was a question raised on how to export data from ASP.NET Gridview to Microsoft Excel and preserve leading zeros of numeric values. A workaround that we have is to insert an   character before the cell value if that value starts with zero (0). So if the value starts with zero such as 0001, the result would be " 0001". Thus when exported to Excel, the leading zero is kept. cell.Text = string .Format( "&nbsp;{0}" , cell.Text); A suggested solution is to insert a Tab character ( ) but this fails on some occasions. After doing some research, replacing the tab character with &ensp; or &emsp; would also fix the issue. cell.Text = string .Format( "&ensp;{0}" , cell.Text); //or cell.Text = string .Format( "&emsp;{0}" , cell.Text); ASP.NET GridView Export Excel Report Cheers!

How To Handle ASP.NET GridView TemplateFields Null Values In Aspx Markup

Hello, To handle null values in GridView TemplateFields through aspx/html markup rather than code-behind, you can simply use the language operators to those fields. One approach is to use the conditional ternary operator in C# and VB.NET. The sample codes below illustrates how to do in C# and VB.NET. For C#, use the (?) operator. While VB.NET uses If() operator. C#.NET Code <asp:TemplateField HeaderText= "Name" SortExpression= "EmpName" > <ItemTemplate> <asp:Label ID= "lbl" runat= "server" Text= '<%# Eval("EmpName") %>' ></asp:Label> </ItemTemplate> <EditItemTemplate> <asp:TextBox ID= "txtEmployee" runat= "server" Text= '<%# Eval("EmpName") == System.DBNull.Value ? string.Empty : Eval("EmpName").ToString() %>' ></asp:TextBox> </EditItemTemplate> </asp:TemplateField> VB.NET Code <as

Invalid postback or callback argument in ASP.NET (_doPostBack in jQuery UI Confirmation Dialog)

Hello, I'm currently working with ASP.NET GridView control that shows a confirmation dialog using jQuery UI instead of the classic JavaScript confirm dialog that prompts a user to delete a certain record. However, integrating that with the GridView control was slightly tricky in the sense that I was stuck with Invalid postback or callback argument error. Since this is ASP.NET Webforms, you have to deal with Postback hell issues. :) jQuery UI Dialog that trigger's postback buttons: { "Yes" : function () { __doPostBack(btnUniqueID, '' ); $( this ).dialog( "close" ); }, "No" : function () { $( this ).dialog( "close" ); return false ; } } After doing some research, I came up with two solutions. The first one is to set EnableEventValidation of Page directive to false for page level effect. Or you can set it in web.config for project scope. Page Directive Solution <%@ Page Language= "C#" AutoEventWire

Retrieve Current Row Index Of ASP.NET Web Forms GridView Control On RowCommand

Hi, To retrieve the current row index of a GridView control on RowCommand event, you have to access the NamingContainer property of a control which belongs to that GridViewRow. In the example below, I have a LinkButton control declared inside a TemplateField. ASPX Code <asp:TemplateField> <ItemTemplate> <asp:LinkButton ID= "lbtnDelete" CSSClass= "btn" CommandName= "Delete" Text= "Delete" runat= "server" /> </ItemTemplate> </asp:TemplateField> Code Behind protected void gvCustomers_RowCommand( object sender, GridViewCommandEventArgs e) { if (e.CommandName == "Delete" ) { GridViewRow gvr = (GridViewRow)(((LinkButton)e.CommandSource).NamingContainer); int RowIndex = gvr.RowIndex; //TODO: other codes here... } }

Removing Hyperlink Or LinkButton In A GridViewColumn Based From A Condition Or Value

Image
There was a question raised from the forum on how to remove a hyperlink control in a GridViewColumn if a given condition is met. In the example below, the hyperlink(LinkButton) is disabled if Units In Stock is zero (0). A solution is to disable the LinkButton in the RowDataBoundEvent . 1 2 3 4 5 6 7 8 9 10 11 protected void gvUnitSummary_RowDataBound( object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { if (Convert.ToInt32(e.Row.Cells[3].Text) == 0) { LinkButton lnkUnitID = (LinkButton)e.Row.FindControl( "lnkProducts" ); lnkUnitID.Enabled = false ; } } } Another solution is to change the column from BoundField to TemplateField. The TemplateField contains a LinkButton and a Label control. Set the Visibility property of the controls accordingly such as LinkButton will be shown if Units In Stock is greater than 0. Otherwise, show the Label control instead. 1 2

Append QueryString To PostBackUrl Attribute In ASP.NET Web Forms LinkButton Control Inside GridView Control

There was a question raised in the forum on how to append query string to a PostbackUrl attribute in an ASP.NET LinkButton inside the template field of a GridView control. To answer that, one possible solution is to set the PostBackUrl with String.Format() method where you can include the desired query string of that url. 1 2 3 4 <asp:LinkButton ID= "lnkProductPage" runat= "server" PostBackUrl= '<%# String.Format("ProductPage.aspx?Id={0}", Eval("ID"))%>' CausesValidation= "false" Text= '<%# Eval("ID")%>' > </asp:LinkButton>

ASP.NET Trigger Onchange Event Of DropDownList Inside GridView Using jQuery

Image
There was a question in a forum if how can we trigger an onchange event of a DropDownList control inside a GridView template field. This time using unobtrusive approach. So in order to understand a bit further, the GridView control when rendered to the browser becomes a table element while DropDownList becomes a Select control. So, to trigger the event we need to traverse the GridView control then find the Select control and attach a change event. Here's a solution using jQuery. HTML Markup: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <asp:GridView ID= "gvItem" runat= "server" AutoGenerateColumns= "False" > <Columns> <asp:BoundField DataField= "ID" HeaderText= "ID" /> <asp:BoundField DataField= "ProductName" HeaderText= "ProductName" /> <asp:TemplateField HeaderText= "Time Slot" > <

ASP.NET WebForms Change GridView Sort Link Color

Image
Here's how to change the color of GridView SortLink using CSS. ASPX Markup 1 2 3 4 5 6 7 8 9 10 11 12 <asp:GridView ID= "GridVwPagingSorting" runat= "server" AutoGenerateColumns= "False" Font-Names= "Verdana" AllowPaging= "True" AllowSorting= "True" PageSize= "5" Width= "75%" OnPageIndexChanging= "PageIndexChanging" BorderColor= "#CCCCCC" BorderStyle= "Solid" BorderWidth= "1px" OnSorting= "Sorting" > <AlternatingRowStyle BackColor= "#BFE4FF" /> <PagerStyle BorderColor= "#CCCCCC" BorderStyle= "Solid" BorderWidth= "1px" /> <HeaderStyle CssClass= "gridViewHeader" /> <RowStyle Height= "20px" Font-Size= "13px" BorderColor= "#CCCCCC" BorderStyle= "Solid" BorderWidth= "1px" /> <

ASP.NET Web Forms Show Tooltip In Gridview Column

Here's how to show tooltip in an asp.net gridview column/cell on mouse hover. This option will set the Tooltip property of a particular gridview cell on RowDataBound event. C# Code: 1 2 3 4 5 6 7 8 protected void grdCustomers_RowDataBound( object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { string str = e.Row.Cells[1].Text; e.Row.Cells[1].ToolTip = str; } }

ASP.NET GridView Control CRUD With Bootstrap

Image
Here's a simple CRUD application using ASP.NET GridView control with Twitter Bootstrap as it's css class reference. The code sample used is in VB.NET. Create: Update: Delete: ASPX markup: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 <div id= "Container" > <div id= "GridContainer" > <div id= "LabelContainer" > <asp:Label ID= "lblHeading" runat= "server" Text= "ASP.NET GridView CRUD with Bootstrap (VB.NET)" > </asp:Label>

ASP.NET GridView RowCommand Event Firing Twice

This issue happened when I migrated an asp.net 3.5 website to an asp.net 4.5 website. Upon clicking Add or Delete linkbuttons in the GridView, the RowCommand event fires twice. After googling for hours, I found a solution that is to remove the Handles GridView1.RowCommand in the event declaration. The code below does not work (event fires twice) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Protected Sub GridView1_RowCommand ( ByVal sender As Object , ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) _ Handles GridView1.RowCommand If e.CommandName.Equals( "AddNew" ) Then Dim txtNewName As TextBox txtNewName = CType (GridView1.FooterRow.FindControl( "txtNewName" ), TextBox) Dim cmbNewGender As DropDownList cmbNewGender = CType (GridView1.FooterRow.FindControl( "cmbNewGender" ), DropDownList) Dim txtNewCity As TextBox txtNewCit

Databinding ASP.NET 4.5 GridView With jQuery And Ajax

Image
Hi, Here's a simple asp.net program that performs adding of data to GridView control through jQuery and ajax. On page load, perform databinding on dropdown list and gridview using server side and code behind. And on client side, that is a selection change occurs in dropdown list, perform binding by adding table rows and columns to GridView. Page Load (Load All Products): Selection Change (Load Specific Products): The sample code is available for download here: Databinding ASP.NET 4.5 GridView with jQuery and Ajax Code Cheers!

Bind XML Node Value To GridView Column In ASP.NET Using XPath

Image
Given in a datasource object where in you have a column which contains an XML string and you want to bind a certain node value instead of the entire XML string to GridView column, here's a solution using XPath. ASPX: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <asp:GridView ID= "gvPersons" runat= "server" AutoGenerateColumns= "False" BackColor= "White" Width= "400px" BorderColor= "#E7E7FF" BorderStyle= "None" BorderWidth= "1px" CellPadding= "3" > <AlternatingRowStyle BackColor= "#F7F7F7" /> <Columns> <asp:BoundField DataField= "ID" HeaderText= "ID" > <ItemStyle Width= "50px" /> </asp:BoundField> <asp:BoundField DataField= "XMLData" HeaderText= "Name" > <ItemStyle Width= &quo

Donate