January 25th, 2013

Responsive ASP.NET GridView With Twitter Bootstrap

In my recent post, Responsive ASP.NET GridView is implemented using jQuery FooTable plugin. If you are using Twitter Bootstrap framework, you can easily show hide elements based on characteristics of the device the site is being displayed on, most commonly the width of the browser using the inbuilt CSS classes.

January 5th, 2013

Making ASP.NET GridView Responsive With jQuery FooTable

As the current trend is to make website compatible with all platforms like desktop, tablet and mobile..etc, Responsive Design technique comes into the picture. Using it, the website adapts the layout to the environment that it is being viewed in. In this post, we will make ASP.NET gridview responsive using jQuery FooTable plugin. It hides certain columns of data at different resolutions based on data-* attributes and converts hidden data to expandable rows.

July 15th, 2012

Styling Table Or Gridview with CSS3 Bar and Pie Chart

Suppose you’ve to display survey result in grid having different columns with percentage data. It would be more effective and attractive if you use chart to show percentage data. This post explains how to display Bar or Pie chart in HTML table or ASP.NET gridview column with CSS3 and jQuery.

June 3rd, 2012

ASP.NET GridView And RepeatColumns(Rows in Multiple Columns) With jQuery

By Default, There is no RepeatColumns property in ASP.NET Gridview to display rows in multiple columns as in DataList control. When Gridview has few columns, It doesn’t take full space of browser. To make good UI, You might need RepeatColumns property. This post explains how to display asp.net GridView rows in multiple columns using jQuery WITHOUT modifying any existing code.

February 17th, 2012

Anonymous Type LINQ Result and GridView Sorting in ASP.NET

It explains how to implement asp.net gridview sorting functionality when gridview datasource is Anonymous Type. Suppose you are using Entity Framework OR LINQ to sql, getting data with a particular structure having different columns from different tables (Anonymous Type) using LINQ and you have defined it as a datasource of gridview. It’s okay to display data. Now, you have to implement sorting feature. One way is to convert Anonymous Type to Datatable and sort it defaultview, but it’s too complex. You might have tasted dynamic sorting with extension method as mentioned here and here but not useful for Anonymous type. Another way is to use switch case for sortexpression and use OrderBy and OrderByDescending for each column. It’s not a generalize solution. then what….???

February 15th, 2012

Insert, Update, Delete in ASP.NET Gridview With Entity Framework

This article explains how to perform insert, update and delete operations in ASP.NET GridView with Entity Framework. Let us take an example to perform CRUD operations using Entity Framework Database First approach. Suppose we’ve to work on Customer table having CategoryID as foreign key.

January 28th, 2012

Grouping Data in ASP.NET Gridview Control

In my previous post, I explained how to group HTML table rows with jQuery. This post explains How to do same thing using ASP.NET Gridview control on server side. The logic is same to check row by row. If data is same in next row’s cell, hide next row’s cell and increase rowspan of current row’s cell.

December 24th, 2011

Displaying Total in ASP.NET Gridview Footer Row Without using Template Field

There are tons of articles to display total in asp.net gridview footer row. The common approach to implement this is:
1. Create template field of the column which is to be totalled.
2. Define FooterTemplate and add Label control.
3. Take a variable and add value of each row in GridView1_RowDataBound event.
4. Find label control in footer and assign the variable.
It’s too complex. Let’s see how to take advantage of LINQ or Lambda expression and skip these steps.

January 22nd, 2011

Bind array to specific column of asp.net gridview

The object is to bind an array to particular column of asp.net gridview. Suppose we have a grid having 3 columns and an array say “data“. Now we have to bind data array to grid’s second column (binded by mycolumn). See following html code: