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.
Code:
function GridViewRepeatColumns(gridviewid, repeatColumns) {
//Created By: Brij Mohan(https://techbrij.com)
if (repeatColumns < 2) {
alert('Invalid repeatColumns value');
return;
}
var $gridview = $('#' + gridviewid);
var $newTable = $('<table></table>');
//Append first row in table
var $firstRow = $gridview.find('tr:eq(0)'),
firstRowHTML = $firstRow.html(),
colLength = $firstRow.children().length;
$newTable.append($firstRow);
//Append first row cells n times
for (var i = 0; i < repeatColumns - 1; i++) {
$newTable.find('tr:eq(0)').append(firstRowHTML);
}
while ($gridview.find('tr').length > 0) {
var $gridRow = $gridview.find('tr:eq(0)');
$newTable.append($gridRow);
for (var i = 0; i < repeatColumns - 1; i++) {
if ($gridview.find('tr').length > 0) {
$gridRow.append($gridview.find('tr:eq(0)').html());
$gridview.find('tr:eq(0)').remove();
}
else {
for (var j = 0; j < colLength; j++) {
$gridRow.append('<td></td>');
}
}
}
}
//update existing GridView
$gridview.html($newTable.html());
}
You have to use above method and pass gridviewid and number of repeated columns. suppose your gridview ID is gridSample and have following structure:
To create two columns layout, call following in javascript:
GridViewRepeatColumns("<%=gridSample.ClientID %>",2);
For Three columns layout:
GridViewRepeatColumns("<%=gridSample.ClientID %>",3);
For Four columns layout:
GridViewRepeatColumns("<%=gridSample.ClientID %>",4);
Now You see edit and delete functionality is as it is, No need to modify any other server side code.
Demo:
Here is the HTML rendered demo of 3 columns layout:
Hope, It saves your time.
That’s So Fxxking HELPFUL!!!
Thanks a lot!!
Hey all – I did not see a version that supports vertically run columns so I modified the existing version to allow an additional variable to be passed in, “orientation” – “V” for vertical, anything else for horizontal. Here’s the revised function:
function GridViewRepeatColumns(gridviewid, repeatColumns, orientation) {
if (repeatColumns < 2) {
alert('Invalid repeatColumns value = ');
return;
}
var xrt = 0, xr = 0, currcol = 0;
var $gridview = $('#' + gridviewid);
var $newTable = $('’);
//Append first row in table
var $firstRow = $gridview.find(‘tr:eq(0)’),
firstRowHTML = $firstRow.html(),
colLength = $firstRow.children().length;
$newTable.append($firstRow);
xr = $gridview.find(‘tr’).length;
xr = xr / repeatColumns;
xrt = Math.floor(xr);
if (xr > xrt) xrt++;
// alert(‘New Grid rows need to be added (float) = ‘ + xr);
// alert(‘New Grid rows need to be added (int) = ‘ + xrt);
//Append first row cells n times
for (var i = 0; i 0) {
var $gridRow = $gridview.find(‘tr:eq(0)’);
r++;
$newTable.append($gridRow);
for (var c = 1; c 0) {
// alert(‘Adding cell ‘ + ((c * xrt) – (r * c)));
$gridRow.append($gridview.find(‘tr:eq(‘ + ((c * xrt) – (r * c)) + ‘)’).html());
$gridview.find(‘tr:eq(‘ + ((c * xrt) – (r * c)) + ‘)’).remove();
}
else {
for (var j = 0; j < colLength; j++) {
$gridRow.append('’);
}
}
}
}
}
else
{
while ($gridview.find(‘tr’).length > 0) {
var $gridRow = $gridview.find(‘tr:eq(0)’);
$newTable.append($gridRow);
for (var i = 0; i 0) {
$gridRow.append($gridview.find(‘tr:eq(0)’).html());
$gridview.find(‘tr:eq(0)’).remove();
}
else {
for (var j = 0; j < colLength; j++) {
$gridRow.append('’);
}
}
}
}
}
//update existing GridView
$gridview.html($newTable.html());
}
This code not working for me, where should i call the GridViewRepeatColumns function.. pls help…
how to show data for a range like 1-10 in one column and 11-20 second column and so on………
please help me
Dear I used the method but it shows me error: Reference Error: GridiView1 is not define. Please help me how to implement it correctly. Thanks.
thanx You …my grid working good but first record of grid display duplicate record
hi.. brij ,
i am finding it difficult to implement. kindly help out.
This code is good for what I m looking for but I m not getting how to include this in our aspx page , so pls will u give some what brief explaination for this.
Hi Brij, very good one!
I am finding it hard to make it work on my code.
Can you brief me how to use this in aspx page or how to call this from code behind?
I am new to Jquery, sorry!
How to add space between two columns ?
After grid declaration aspx side, You can declare script tag and define the method and call it.
how to call this script. Can you give sample? Thanks.
After grid declaration in aspx side, you can call the method OR you can use RegisterStartupScript method.
Hi, this is very helpful but I cannot seem to get my script to run past the first few lines. I think it has something to do with where/how I am declaring the script type. Could you give me an example of how this would look inside an asp.net page? (i.e what the tag would look like and if I need anything else to run it successfully.
Thank you very much!
At what point do i call this function?
thanku very much.. from Niki, Gaurang and Prabhat
What if gridview does not have header? In this project always header repeats on each column.
Comment line 10 to 20, if gridview doesn’t have header.