Latest

random

.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"

Syntax: 
<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

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>
 <html xmlns="http://www.w3.org/1999/xhtml">
<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!

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.

    ReplyDelete

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.