Data Binding in DropDownList Using Jquery

Introduction:-

                     Here I have explained how to bind data in dropdownlist using jQuery.

Description:-

                  In my previous article I have explained How to calculate difference between two dates using JQuery? , How to get Checkboxlist valuewith comma Separator by jquery.

Here I will explain how to bind dropdownlist using jQuery.As you wnow it will be light weight than other processes.

 Here I am doing one simple web application for binding data to dropdownlist  through JQuery.

 For this first you have to add one web page name it as your choice,here I have named it as JqueryDropDownList.aspx

How to Show a pop up with Grid View row data using String Builder ? and How to change Gridview Row Color Dynamically ?

Introduction:-

                     Here I have explained how to show gridview row data in pop up  using string builder as well as I have explained how to change gridview row color dynamically.

Description:-

                  In this article I will explain how to show a pop up view like modal pop up using string builder. For this I have taken one gridview control and checkbox inside that gridview. Here I have also explained how to select all checkboxes at a time and also uncheck.

I will explain it more briefly with my source code and table design structure.

Most of the developer uses modal popup control to show records,but I am providing one new procedures to show record in the same manner.

As I have discussed, here I am going to explain, how to show gridview row data in pop up using String Builder.

I have used here one aspx page with a gridview control. Also I have used two images as CloseTab2.jpg and SearchButton.gif in my images folder and .js script in Scripts folder and one sql server database ShibashishDatabase.mdf in App_Data folder as shown Below.

How to Create a Pie Chart in asp.net?

Here, i am discussing about , how to create a pie chart in asp.net

Step-1: My database Overview.

Step-2: Insert your values into your table.

Step-3: Then add a chart control to your page.

<asp:Chart ID="Chart1" runat="server">

<Series>

<asp:Series Name="Series1" ChartType="Pie">

</asp:Series>

</Series>

<ChartAreas>

<asp:ChartArea Name="ChartArea1">

</asp:ChartArea>

</ChartAreas>

</asp:Chart>

Step-4: Then add this code behind method to your page and call this method whenever you want to load your chart.

protected void Load_Chart()

{

SqlConnection con = new SqlConnection("------- Your connection string--------“);

SqlCommand com;

com = new SqlCommand("select ProjectTitle,ProgressPercentage from Project", con);

DataTable dt = new DataTable();

SqlDataAdapter da = new SqlDataAdapter(com);

da.Fill(dt);

Chart1.DataSource = dt;

Chart1.DataBind();

Chart1.Series[0].XValueMember = "ProjectTitle";

Chart1.Series[0].YValueMembers = "ProgressPercentage";

Chart1.Series[0].ToolTip = "Completed : " + "#PERCENT";//--Used to show tooltip

Chart1.ChartAreas[0].Area3DStyle.Enable3D = true;

}

Step-5: The final output:

Here is My Output with ToolTips:

Thanks Shibashish Mohanty

Dynamically Create a Column Chart in Asp.Net

Step-1: Create a table in your database.

Step-2: Insert your values into your table.

Step-3: Then add a chart control to your page.

<asp:Chart ID="Chart1" runat="server">

<Series>

<asp:Series Name="Series1">

</asp:Series>

</Series>

<ChartAreas>

<asp:ChartArea Name="ChartArea1" Area3DStyle-Enable3D="true" >

</asp:ChartArea>

</ChartAreas>

</asp:Chart>

Step-4: Then add this code behind method to your page and call this method whenever you want to load your chart.

protected void Load_Chart()

{

SqlConnection con = new SqlConnection("---Your Connection string---“);

SqlCommand com;

com = new SqlCommand("select ProjectTitle,ProgressPercentage from Project", con);

DataTable dt = new DataTable();

SqlDataAdapter da = new SqlDataAdapter(com);

da.Fill(dt);

Chart1.DataSource = dt;

Chart1.DataBind();

Chart1.Series[0].XValueMember = "ProjectTitle";

Chart1.Series[0].YValueMembers = "ProgressPercentage";

Chart1.Series[0].ToolTip = "#VAL";

Chart1.ChartAreas[0].AxisX.Interval = 1;

}

Step-5: The final output:

Output with showing tool tip:

Thanks Shibashish Mohanty

Data Binding in a TreeView in Asp.Net?

In this example, I am showing you how to bind a treeview. Here, I am having a table in database where we store Modules and their sub-modules having parent-child like relationship.
Step-1: Add a TreeView to your .aspx Page.

<asp:TreeView ID="ModuleTreeView" runat="server" ShowLines="true"

PopulateNodesFromClient="false" BackColor="#99CCFF" style="width:100%"

ShowExpandCollapse="false">

</asp:TreeView>

Step-2: Add a table named "Module" to your database which will store all modules and sub-modules.

Step-3: Insert some values into your table.

All those modules which do not have any parent modules, their ParentModuleID is set to '0(Zero)'.

Step-4: Add these following code behind methods to the page.

SqlConnection con = new SqlConnection("----Your Connection String----");

SqlCommand com;

protected void Page_Load(object sender, EventArgs e)

{

ModuleTreeView.ExpandAll();

FillTreeView();

}

//----- Get all the module details from database -----//

public DataTable GetModuleDetails()

{

com = new SqlCommand("select ModuleID,ModuleName,ParentModuleID from Module", con);

SqlDataAdapter da = new SqlDataAdapter(com);

DataTable dt = new DataTable();

da.Fill(dt);

return dt;

}

//----Method to fill the treeview-----//

public void FillTreeView()

{

DataTable Modules = new DataTable();

Modules = GetModuleDetails();

ModuleTreeView.Nodes.Clear();

PopulateTreeNode(Modules, null, 0);

}

//----- Method to bind the treeview nodes as per the moduleID and ParentModuleID-----//

private void PopulateTreeNode(DataTable ModuleList, TreeNode parent, int parentID)

{

TreeNodeCollection baseNodes;

TreeNode node;

if (parent == null)

{

baseNodes = ModuleTreeView.Nodes;

}

else

{

baseNodes = parent.ChildNodes;

}

foreach (DataRow dtRow in ModuleList.Rows)

{

if (int.Parse(dtRow["ParentModuleID"].ToString()) == parentID)

{

node = new TreeNode();

node.Text = dtRow["ModuleName"].ToString();

node.Value = dtRow["ModuleID"].ToString();

node.SelectAction = TreeNodeSelectAction.Select;

baseNodes.Add(node);

PopulateTreeNode(ModuleList, node, int.Parse(dtRow["ModuleID"].ToString()));

}

}

ModuleTreeView.ExpandAll();

}

Now we are done and we can find the result by debugging the page.

The Final Output:

Thanks shibashish mohanty

Creating organograms in Asp.net

• Download ShibashishOrganoGraph.zip - 648.1 KB

Introduction

I am going to show how to design your Organograms with a organograms control using database.

Background

i am shibashish mohanty using my little effort to show you a basic diagram .if you have any better solution please call me in this no 09853205712?

Using the code

Here is my source code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SwashOrganoGraph.aspx.cs" Inherits="SwashOrganoGraph" %>
<%@ Register Assembly="UnifoChart.Hierarchy.Web.Free" Namespace="UnifoChart.Hierarchy" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"  style="width:100%">
<head id="Head1" runat="server">
  
   
   <style id="Style1" runat="server">
    p:first-letter 
    {
        color: #ff0000;
        font-size:xx-large
    }
    ul li{
        color:orange;
    }
    dl dt{
        color:orange;
        font-weight:bold;
        text-indent:40px;
    }
    
    .toppic {
        border:0;
    }
    
   </style>

    
</head>

<body>
    <div style="background: #FFFFFF url(/image/header_bg_line.gif) repeat-x 0pt; padding:0px">
        
        &nbsp;<br /><h2>Om Namah shivaya</h2>
    </div>

     
    <form id="form1" runat="server">
        <div class="container">
     
        <a id="idChart"></a>
        <cc1:HierarchyWeb ID="HierarchyWeb1" runat="server" Height="445px" 
            Style="z-index: 101; position: relative;" Text="MK" Width="606px" OnInit="HierarchyWeb1_Init" OnheHierarchyDraw="HierarchyWeb1_heHierarchyDraw" OnheHierarchyData="HierarchyWeb1_heHierarchyData"/>
        </div>
        <br />
        <br />
        <br />
        <br />
     <br />
        Change Your Graph Shapes:-<asp:DropDownList ID="ddlChartStyle" runat="server">
            <asp:ListItem>Normal</asp:ListItem>
            <asp:ListItem>ThreeD</asp:ListItem>
            <asp:ListItem>Shaded</asp:ListItem>
        </asp:DropDownList>
     
        <br />
        <br />
        Change Your Graph Direction:-<asp:DropDownList ID="ddlChartOrientation" 
            runat="server">
            <asp:ListItem>TopToBottom</asp:ListItem>
            <asp:ListItem>LeftToRight</asp:ListItem>
            <asp:ListItem>BottomToTop</asp:ListItem>
            <asp:ListItem>RightToLeft</asp:ListItem>
        </asp:DropDownList>
     
        <br />
        <br />
        ChartLayout:-<asp:DropDownList ID="ddlChartLayout" runat="server">
            <asp:ListItem>FlexiDraw</asp:ListItem>
            <asp:ListItem>DirectDraw</asp:ListItem>
            <asp:ListItem>FlexiExtended</asp:ListItem>
        </asp:DropDownList>
     
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
            Text="Apply Settings" />
     
    </form>
   
</body>
</html>

my code behind is here:- 

 using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using UnifoChart.Hierarchy;


public partial class SwashOrganoGraph : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
   
    }

    protected void HierarchyWeb1_Init(object sender, EventArgs e)
    {
        HierarchyWeb1.hpShowTitleBar = true;
        HierarchyWeb1.hpLoadingHtml = "<img src='http://www.codeproject.com/image/hierarchy-chart/loading.gif'/>";
        HierarchyWeb1.hpShowContextMenu = true;
        HierarchyWeb1.hpcSettings.Chart_Layout = UnifoChart.Hierarchy.ChartLayoutType.FlexiExtended;
        HierarchyWeb1.hpShowToolTip = true;
        HierarchyWeb1.hpShowToolTipNode = true;
        HierarchyWeb1.hpcSettings.ShowFocus = false;

    }

    protected void HierarchyWeb1_heHierarchyData(object sender, EventArgs e)
    {
        HierarchyWeb1.hpcData.PhotoSpecification = PhotoSpecificationType.ByFileName;
        HierarchyWeb1.hpcData.PhotoPath = "/photo/";
        HierarchyWeb1.hpcSettings.Photo_ImageList4Nodes.ImageSize = new System.Drawing.Size(64, 64);

        HierarchyWeb1.hpcSettings.Node_IsSpaceNewLine = false;
        HierarchyWeb1.hpcSettings.Node_IsDataHasText = true;

        string connection = ConfigurationManager.ConnectionStrings["TestConnectionString"].ConnectionString;
        SqlConnection con = new SqlConnection(connection);
        SqlDataAdapter da = new SqlDataAdapter("select id,pid,txt,duty,value,tooltip,imagefile,category from OrganoGraph", con);

        DataSet ds = new DataSet();
        DataTable dt1 = new DataTable();
        da.Fill(dt1);

        string sResult = HierarchyWeb1.hpcData.LoadFromDataTable(ref dt1);
        if (sResult != "")
        {
            Response.Write(sResult);
            return;
        }

        HierarchyWeb1.hpcData.ExpandAll();

    }

   //Testing some code below


    protected void HierarchyWeb1_heHierarchyDraw(object sender, EventArgs e)
    {
        //Apply Effects/Settings
        this.ApplySettings();

        //node-click behavior (default is inactive)
        HierarchyWeb1.hpDrillDownMode = DrillDownModeType.NavigateNode;//navigate to a parametrized page
        HierarchyWeb1.hpDrillDownTarget = "_blank";//in new window
        HierarchyWeb1.hpDrillDownURL = "/details.aspx";//the parametrized page
        HierarchyWeb1.hpTitleText = "Organization Chart";

        //custom settings for 'Executive' nodes
        HierarchyNode hnd1 = HierarchyWeb1.hpcData.Tags["Executive"];//get reference
        hnd1.BackgroundType = BackgroundType.Stock;
        hnd1.BackgroundStock = BackgroundTemplate.GreenWall;
        hnd1.BackgroundBrush4Tag.BrushType = BrushType.HatchStyleBrush;
        hnd1.BackgroundBrush4Tag.HatchStyle = HatchStyleType.NarrowVertical;
        hnd1.BackgroundBrush4Tag.Color2 = System.Drawing.Color.ForestGreen;

        //custom settings for 'Manager' nodes
        hnd1 = HierarchyWeb1.hpcData.Tags["Manager"];//get reference
        hnd1.BackgroundType = BackgroundType.Stock;
        hnd1.BackgroundStock = BackgroundTemplate.BlueFlowers;
        hnd1.BackgroundBrush4Tag.BrushType = BrushType.LinearGradientBrush;
        hnd1.BackgroundBrush4Tag.Color1 = System.Drawing.Color.Brown;
        hnd1.BackgroundBrush4Tag.Color2 = System.Drawing.Color.CadetBlue;
    }


    //Apply settings selected in page's dropdown boxes.
    private void ApplySettings()
    {
        //ddlChartStyle
        switch (ddlChartStyle.SelectedIndex)
        {
            case 0://Normal
                HierarchyWeb1.hpcSettings.Chart_Style = ChartStyleType.Normal;
                break;
            case 1://ThreeD
                HierarchyWeb1.hpcSettings.Chart_Style = ChartStyleType.ThreeD;
                break;
            case 2://Shaded
                HierarchyWeb1.hpcSettings.Chart_Style = ChartStyleType.Shaded;
                break;
        }


        //ddlChartOrientation
        switch (ddlChartOrientation.SelectedIndex)
        {
            case 0://TopToBottom
                HierarchyWeb1.hpcSettings.Chart_Orientation = OrientationType.TopToBottom;
                break;
            case 1://LeftToRight
                HierarchyWeb1.hpcSettings.Chart_Orientation = OrientationType.LeftToRight;
                break;
            case 2://BottomToTop
                HierarchyWeb1.hpcSettings.Chart_Orientation = OrientationType.BottomToTop;
                break;
            case 3://RightToLeft
                HierarchyWeb1.hpcSettings.Chart_Orientation = OrientationType.RightToLeft;
                break;
        }


        //ddlChartLayout
        switch (ddlChartLayout.SelectedIndex)
        {
            case 0://FlexiDraw
                HierarchyWeb1.hpcSettings.Chart_Layout = ChartLayoutType.FlexiDraw;
                break;
            case 1://DirectDraw
                HierarchyWeb1.hpcSettings.Chart_Layout = ChartLayoutType.DirectDraw;
                break;
            case 2://FlexiExtended
                HierarchyWeb1.hpcSettings.Chart_Layout = ChartLayoutType.FlexiExtended;
                break;
        }
    }

    
    protected void Button1_Click(object sender, EventArgs e)
    {
        this.ApplySettings();
    }
} 

<div>My data base design like this:- 
Table Name:OrganoGraph
id int Checked
pid int Checked
txt varchar(50) Checked
duty varchar(50) Checked
value varchar(50) Checked
tooltip varchar(50) Checked
imagefile varchar(50) Checked
category varchar(50) Checked 

Value:- 

1	0	Pritam Pal\nCEO	NULL	NULL	joyce.png	NULL	CEO
2	1	Jyoti Prakash Mahapatra\nProject Manager	NULL	NULL	shibashish.jpg	NULL	Project Manager
3	2	Prajanuranjan Moharana\nTeam Lead	NULL	NULL	palm.png	NULL	Team Lead
4	2	Shibasish Mohanty\nTeam Lead	NULL	NULL	shibashish.jpg	NULL	Team Lead
5	3	Priti Ranjan Dash\nDeveloper	NULL	NULL	kendra.png	NULL	Developer
6	3	Shivsankar Mohapatra\nDeveloper	NULL	NULL	shibashish.jpg	NULL	Developer
7	4	Manoj Sethi\nDeveloper	NULL	NULL	mike1.png	NULL	Jr. Developer
8	9	Subhadip Sarangi\nDeveloper	NULL	NULL	meg.png	NULL	Jr. Developer
9	2	Biswa\nTeam Leader	NULL	NULL	shibashish.jpg	NULL	Team Leader

    

If you are feeling that i am able to solve your problem then contact me any time.I am happy to solve your problem.

After running it will looks like 

 Thanks shibashish mohanty  

You can download this from My Code project article also

Click here to DOWNLOAD