.Net - How to Bind Datatable to OBOUT Grid


.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. EgAllowSorting="true"

Paging in OBOUT Grid : There are three properties to enable paging feature in Obout Gird control.

  • PageSize - the number of records per page. EgPageSize="5"
  • CurrentPageIndex - the zero-based index of the page that will be loaded. EgCurrentPageIndex="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"

<obout:Grid id="grid1" PageSize="5" CurrentPageIndex="5" PageSizeOptions="1,5,10,15,20,25" runat="server"></obout:Grid>

Manual PagingYou 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:

OBOUT - ASP.NET Grid - Binding to DataTable,Data Binding Tutorial,C#,GridView, obout, paging,sorting

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

<%@ Register Assembly="obout_Grid_NET" Namespace="Obout.Grid" TagPrefix="obout" %>

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>OBOUT Grid - Binding to DataTable</title>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <obout:Grid ID="grdview_details" AllowSorting="true" PageSize="5" AllowManualPaging="true" runat="server"></obout:Grid>


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)
    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;
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: 5

1 comment:

  1. Hi Guys,
    First 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.


All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form


Email *

Message *

Powered by Blogger.