.Net - How to Bind Datatable to OBOUT Grid
C# - Binding Obout Grid to DataTable
In this post I explained about the .Net - All About OBOUT Grid Control. Here I will show you how to bind OBOUT Grid using datatable and applying paging and sorting in asp.net.
Sorting in OBOUT Grid : Using AllowSorting property we can enable the sorting feature in OBOUT Grid. Eg. AllowSorting="true"
Paging in OBOUT Grid : There are three properties to enable paging feature in Obout Gird control.
- PageSize - the number of records per page. Eg: PageSize="5"
- CurrentPageIndex - the zero-based index of the page that will be loaded. Eg: CurrentPageIndex="2"
- PageSizeOptions - allows you to set what options will be available for the "records per page" dropdown list. Eg: PageSizeOptions="1,2,4,6,8,10"
Syntax:
<obout:Grid id="grid1" PageSize="5" CurrentPageIndex="5" PageSizeOptions="1,5,10,15,20,25" runat="server"></obout:Grid>
Manual Paging : You have to set the AllowManualPaging property to true to enable the manual paging feature in Obout Grid. Eg: AllowManualPaging="true"
Find the source code below:
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@
Register Assembly="obout_Grid_NET" Namespace="Obout.Grid" TagPrefix="obout" %>
<!DOCTYPE html>
<head runat="server">
<title>OBOUT Grid - Binding to DataTable</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<obout:Grid ID="grdview_details" AllowSorting="true" PageSize="5" AllowManualPaging="true" runat="server"></obout:Grid>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Data;
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)
{
if (!IsPostBack)
{
BindOboutTest();
}
}
private void BindOboutTest()
{
DataTable dt = new DataTable();
dt.Columns.Add("EmpId",
typeof(int));
dt.Columns.Add("Name",
typeof(string));
dt.Columns.Add("Address",
typeof(string));
dt.Columns.Add("Date",
typeof(DateTime));
//
// Here we add five
DataRows.
//
dt.Rows.Add(25, "Rk",
"Gurgaon", DateTime.Now);
dt.Rows.Add(50, "Sachin",
"Noida", DateTime.Now);
dt.Rows.Add(10, "Nitin",
"Noida", DateTime.Now);
dt.Rows.Add(21, "Aditya",
"Meerut", DateTime.Now);
dt.Rows.Add(100, "Mohan",
"Banglore", DateTime.Now);
dt.Rows.Add(251, "PK",
"Gurgaon", DateTime.Now);
dt.Rows.Add(501, "Kanti",
"Noida", DateTime.Now);
dt.Rows.Add(101, "Ankit",
"Noida", DateTime.Now);
dt.Rows.Add(211, "Arun",
"Meerut", DateTime.Now);
dt.Rows.Add(101, "Tonu",
"Banglore", DateTime.Now);
grdview_details.DataSource = dt;
grdview_details.DataBind();
}
}
Download the source code click here ..
Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!
.Net - How to Bind Datatable to OBOUT Grid
Reviewed by Ravi Kumar
on
9:19 PM
Rating:
Reviewed by Ravi Kumar
on
9:19 PM
Rating:
Hi Guys,
ReplyDeleteFirst of all, this is a good snip of code. It’s very helpful. I would like to know where it stores the css-style file? if I would like to change some features on it.