CODEWITHSUNDEEP
c#htmlcssasp.netgridview
Rachel Morris
Rachel Morris

Reputation: 127

Displaying a gridview with scrollbar in c#?

I am trying to build a gridview with horizontal scrollbar and vertical scrollbar e.g sql table. Currently, the table I have is very basic, it doesnt look really neat and I am worried that as the number of columns increases, the gridview will look even messier. I am attaching two screenshots of how my current gridview is and the other how I want to build my gridview.Any suggestions or advise is really appreciated.

c#

using System;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable tblcsv = new DataTable();
        //creating columns  
        tblcsv.Columns.Add("Transaction_date");
        tblcsv.Columns.Add("Product");
        tblcsv.Columns.Add("Price");
        tblcsv.Columns.Add("Payment_Type");
        tblcsv.Columns.Add("Name");
        tblcsv.Columns.Add("City");
        tblcsv.Columns.Add("State");
        tblcsv.Columns.Add("Country");
        tblcsv.Columns.Add("Account_Created");
        tblcsv.Columns.Add("Last_Login");
        tblcsv.Columns.Add("Latitude");
        tblcsv.Columns.Add("Longitude");
        tblcsv.Columns.Add("Data");
        tblcsv.Columns.Add("a");
        tblcsv.Columns.Add("b");
        tblcsv.Columns.Add("c");
        tblcsv.Columns.Add("d");
        tblcsv.Columns.Add("e");
        tblcsv.Columns.Add("f");
        tblcsv.Columns.Add("g");
        tblcsv.Columns.Add("h");
        tblcsv.Columns.Add("i");
        tblcsv.Columns.Add("j");
        tblcsv.Columns.Add("k");





        //getting full file path of Uploaded file  
        //Reading All text  
        string ReadCSV = File.ReadAllText(Server.MapPath("~/c.csv"));
        //spliting row after new line  
        foreach (string csvRow in ReadCSV.Split('\n'))
        {
            if (!string.IsNullOrEmpty(csvRow))
            {
                //Adding each row into datatable  
                tblcsv.Rows.Add();
                int count = 0;
                foreach (string FileRec in csvRow.Split(','))
                {
                    tblcsv.Rows[tblcsv.Rows.Count - 1][count] = FileRec;
                    count++;
                }
            }
            //Calling Bind Grid Functions  
            Bindgrid(tblcsv);

        }  
    }

    private void Bindgrid(DataTable csvdt)
    {
        GridView1.DataSource = csvdt;
        GridView1.DataBind();
    }  
}

aspx - 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True"  width="300px" AllowSorting="True"> 
</asp:GridView>
    </div>
    </form>
</body>
</html>

This is how I want my grid to look like - 1. I want my gridview to be of fixed width with fixed column width with horizontal scrollbar for columns and vertical for rows. enter image description here

Upvotes: 1

Views: 3747

Answers (2)

Ramesh Kumar
Ramesh Kumar

Reputation: 86

try this one:

 <div style="width: 100%; height: 400px; overflow: scroll" >your GridView</div>

Upvotes: 2

Ammar Ahmed
Ammar Ahmed

Reputation: 126

You can do it with using css like by "overflow" property as used below.

table{
  height:500px;
  width:1000px;
  overflow-x:scroll;
  overflow-y:scroll;
}
    <table>
    <thead>
      <th>ID</th>
      <th>FirstName</th>
      <th>LastName</th>
    </thead>
        <tbody>
          <tr>
             <td>1</td>
             <td>joe</td>
             <td>Lobo</td>

          </tr>
          <tr>
             <td>1</td>
             <td>joe</td>
             <td>Lobo</td>

          </tr>
                    <tr>
             <td>1</td>
             <td>joe</td>
             <td>Lobo</td>

          </tr>
                    <tr>
             <td>1</td>
             <td>joe</td>
             <td>Lobo</td>

          </tr>
                    <tr>
             <td>1</td>
             <td>joe</td>
             <td>Lobo</td>

          </tr>
</tbody>
    </table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
following links may help

https://www.w3schools.com/cssref/pr_pos_overflow.asp
https://www.w3schools.com/cssref/css3_pr_overflow-x.asp
https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

Upvotes: 0

Related Questions