Thursday, March 28, 2013

jQuery Fixed Header Scrollable GridView

Posted by Manoj Ram on 2:34 AM with No comments so far
In this example i'm explaining how to create Fixed Header Scrollable Gridview Using jQuery in ASP.NET. add JQuery library and fixed header scrollable gridview plugin in solution and add reference to it between <head></head> section of HTML source of aspx page.

Jquery fixed header scrollable gridview in asp.net
I have used northwind database to populate gridview.

you can also create Scrollable GridView With Fixed Headers Using CSS if you don't want to use jQuery or JavaScript. 

<head runat="server">
<title>jQuery Fixed Header Scrollable GridView</title>
<script src="jquery-1.4.1.min.js" type="text/javascript">
</script>
<script src="ScrollableGrid.js" type="text/javascript">
</script>
</head>

Add this JQuery function call between <head></head> section

<script type="text/javascript" language="javascript">
$(document).ready(function() 
{
$('#<%=fixedHeaderScrollableGridView.ClientID %>').Scrollable();
}
)
</script>

Add gridview on aspx page and populate it.

<asp:GridView ID="fixedHeaderScrollableGridView" runat="server" 
              DataSourceID="SqlDataSource1" 
              AutoGenerateColumns="False" 
              DataKeyNames="ProductID" 
              AllowPaging="True" 
              PageSize="30">
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ProductID"/>
<asp:BoundField DataField="ProductName" HeaderText="ProductName" /> 
<asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" /> 
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" /> 
<asp:BoundField DataField="CategoryName" HeaderText="CategoryName" /> 
</Columns>
</asp:GridView>
        
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], 
[UnitPrice], [CategoryName] FROM [Alphabetical list of products]">
</asp:SqlDataSource>

Build and Run the application.

If your application uses Master Page then add reference to library and plugin in head ContentPlaceHolder of master page
<head runat="server">
<title>Fixed Header Scrollable GridView With Master Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
 
<script src="jquery-1.4.1.min.js" type="text/javascript"/>
<script src="ScrollableGrid.js" type="text/javascript"/>
 
</asp:ContentPlaceHolder>
  
</head>
<body>
<form id="form1" runat="server">
  
Add Master Page Content And Design Here 
 
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
</asp:ContentPlaceHolder>
</form>
</body>
</html>


Call Scrollable() function of jquery plugin in Head ContentPlaceHolderID of content page.
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 
<script type="text/javascript" language="javascript">
$(document).ready(function() 
{
  $('#<%=fixedHeaderScrollableGridView.ClientID %>').Scrollable();
}
)
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
Put Gridview Source Here 
</div>
</asp:Content>

Add Controls Dynamically WinForms WindowsFroms C# VB.NET

Posted by Manoj Ram on 2:33 AM with No comments so far
In this post i'm explaining how to Add Controls Dynamically In Winforms Windows Forms Application Using C# And VB.NET

I have used northwind database and Employees table to populate combobox and dataGridView.

Place two buttons on the form to add combobox and datagridview on button click and write below mentioned code in click event of each button respectively.

Add Controls Dynamically in Winforms Windows Forms


C#
01private void btnDropDown_Click(object sender, EventArgs e)
02        {
03            int x = 13, y = 70;
04            ComboBox cmbDynamic = new ComboBox();
05            cmbDynamic.Location = new System.Drawing.Point(x, y);
06            cmbDynamic.Name = "cmbDyn";
07            cmbDynamic.DisplayMember = "FirstName";
08            cmbDynamic.ValueMember = "EmployeeID";
09            cmbDynamic.DataSource = employeesBindingSource;
10            Controls.Add(cmbDynamic);
11 
12 
13        }

Here X and Y co-ordinates are used to define at which location the control needs to be placed.

01private void btnDataGrid_Click(object sender, EventArgs e)
02        {
03            int x = 13, y = 100;
04            DataGridView gvDynamic = new DataGridView();
05            gvDynamic.Location = new System.Drawing.Point(x, y);
06            gvDynamic.Name = "gvDyn";
07            gvDynamic.Width = 250;
08            gvDynamic.Height = 260;
09            gvDynamic.DataSource = employeesBindingSource;
10            Controls.Add(gvDynamic);
11        }

VB.NET
01Private Sub btnDropDown_Click(sender As Object, e As EventArgs)
02 Dim x As Integer = 13, y As Integer = 70
03 Dim cmbDynamic As New ComboBox()
04 cmbDynamic.Location = New System.Drawing.Point(x, y)
05 cmbDynamic.Name = "cmbDyn"
06 cmbDynamic.DisplayMember = "FirstName"
07 cmbDynamic.ValueMember = "EmployeeID"
08 cmbDynamic.DataSource = employeesBindingSource
09 Controls.Add(cmbDynamic)
10 
11 
12End Sub

01Private Sub btnDataGrid_Click(sender As Object, e As EventArgs)
02 Dim x As Integer = 13, y As Integer = 100
03 Dim gvDynamic As New DataGridView()
04 gvDynamic.Location = New System.Drawing.Point(x, y)
05 gvDynamic.Name = "gvDyn"
06 gvDynamic.Width = 250
07 gvDynamic.Height = 260
08 gvDynamic.DataSource = employeesBindingSource
09 Controls.Add(gvDynamic)
10End Sub

Subscribe to: Posts (Atom)