Wednesday 23 May 2012

How to set alternative row color of Gridview using jQuery in Asp.net


$(document).ready(function(){
$("#<%=GridView1.ClientID%> tr:even").css("background-color","Lightgrey"); 

$("#<%=GridView1.ClientID%> tr:odd").css("background-color","Green");
});

Tuesday 22 May 2012

Changing GridView row Color on mouseover using jQuery

Step 1: Download Jquery file from Here:

Step 2: Add the Jquery file and write Jquery as Given Below:

 
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<head runat="server">
    <title>Grid View</title>
    <script type ="text/javascript">
    $(document).ready(function()
              {
              $("#<%=GridView1.ClientID%> tr").hover(function()
                {
                 $(this).css("background-color", "Lightgrey");
                },
                function()
                {
                $(this).css("background-color", "#ffffff");
                });
              });s
    </script>



Customise AJAX Using JQuery

Step 1: Download Jquery file from Here

Step 2 : Add the Given Below Code in Your Source Page Named Mydata.aspx.


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

<!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">
<head runat="server">
    <title>Untitled Page</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type ="text/javascript">
$(document).ready(function(){
  $("#Button1").click(function(){
    $.ajax({url:"AjaxServer.aspx?id=1",success:function(result){
      $("#GridData").html(result);
    }});
  });
});
</script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick ="FetchDGContents();"/>

    </ContentTemplate>
         </asp:UpdatePanel>
                
<div id = "GridData">
   
    </div>
    </div>
        </form>


</body>
</html>

Step 3: Add a page named AjaxServer.aspx
Step 4: Write Code in AjaxServer.aspx.cs

public partial class AjaxServer : System.Web.UI.Page
{
    SqlConnection cn = new SqlConnection(@"Your Connection String");
   
     
protected void Page_Load(object sender, EventArgs e)
    {
        string id = Request.QueryString["id"];
        //string XmlString;
        SqlDataAdapter da = new SqlDataAdapter("select * from Emp",cn);
        DataSet ds = new DataSet();
        da.Fill(ds, "XmlTable");
        ConvertHTML(ds);
    }



    public void ConvertHTML(DataSet ds)
    {

        using (StringWriter sw = new StringWriter())
        {
            using (HtmlTextWriter htw = new HtmlTextWriter(sw))
            {
                string srtMsg;
                // instantiate a datagrid 
                DataGrid dg = new DataGrid();
                dg.DataSource = ds.Tables[0];
                dg.HeaderStyle.BackColor = System.Drawing.Color.Gray;
                dg.HeaderStyle.Font.Name = "Tahoma";
                dg.HeaderStyle.Font.Size = 12;
                dg.HeaderStyle.ForeColor = System.Drawing.Color.White;
                dg.DataBind();

                dg.RenderControl(htw);
                srtMsg = sw.ToString();

                ds.Clear();
                Response.Clear();
                Response.ContentType = "text/HTML";
                Response.Write(srtMsg);
                Response.End();

            }
        }
    }
   
}









Monday 21 May 2012

How to Show Dataset or DataGrid using Customise AJAX


Javascript:

<script type ="text/javascript">
var AjaxServerPageName = "AjaxServer.aspx?id=1";
function CreateXmlReq()
{
    try
    {
         XmlReq = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
         try
         {
             XmlReq = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch(oc)
         {
             XmlReq = null;
         }
    }
    if(!XmlReq && typeof XMLHttpRequest != "undefined")
    {
         XmlReq = new XMLHttpRequest();
    }
}

function HandleResponse()
{
    if(XmlReq.readyState == 4)
    {
         if(XmlReq.status == 200)
         {      
// This Line is Very important.
            document.getElementById("GridData").innerHTML = XmlReq.responseText;
         }
         else
         {
             alert("There was a problem retrieving data from the server." );
         }
    }
}

function FetchDGContents()
{
    var requestUrl = AjaxServerPageName;
    CreateXmlReq();
    if(XmlReq)
    {
         XmlReq.onreadystatechange = HandleResponse;
         XmlReq.open("GET", requestUrl, true);
         XmlReq.send();      
    }





--------------------------------------------------------------------
Call This Function on AjaxServer.aspx.cs Load Event





public void ConvertHTML(DataSet ds)
    {

        using (StringWriter sw = new StringWriter())
        {
            using (HtmlTextWriter htw = new HtmlTextWriter(sw))
            {
                string srtMsg;
                // instantiate a datagrid 
                DataGrid dg = new DataGrid();
                dg.DataSource = ds.Tables[0];
                dg.HeaderStyle.BackColor = System.Drawing.Color.Gray;
                dg.HeaderStyle.Font.Name = "Tahoma";
                dg.HeaderStyle.Font.Size = 12;
                dg.HeaderStyle.ForeColor = System.Drawing.Color.White;
                dg.DataBind();

                dg.RenderControl(htw);
                srtMsg = sw.ToString();
                ds.Clear();
                Response.Clear();
                Response.ContentType = "text/HTML";
                Response.Write(srtMsg);
                Response.End();

            }
        }
    }

</script>