DataRepeater Control from Visual Basic Power Packs 3.0

 

Visual Basic Power Packs 3.0 have very cool same as we web application, named DataRepeater.

lets do some cool stuff with DataRepeater control.

  • Add Data source.
  • Add Combobox in datarepeater control
  • Hide show controls runtime in datarepeater control

 

DataRepeater

See the above image, We have a button, a DataRepeater control and in data  repeater control we have a textbox, a combo box and a label which will hide and show runtime by selecting value of combobox.

So lets start, how to do this.

 

Create a class to save data, I am not using any DataTable for this example.

public class data1 : List<data1>
    {
        private string mName;
        private string mDdlValue;

        public data1()
        {
        }

       public string Name
        {
            get { return mName; }
            set { mName = value; }
        }

        public string DdlValue
        {
            get { return mDdlValue; }
            set { mDdlValue = value; }
        }
    }
}

In above code we have two property “Name” and “DdlValue” and it is inherited with “List” to bind data.

Now lets bind that controls with data1 class

I will use Form_Load  event to do this.

/// <summary>
/// data1 variable declaration in Form Class
/// </summary>
private data1 objData = new data1();

 

private void Form1_Load(object sender, EventArgs e)
{
    ///Bind Textbox with Name property
    tbName.DataBindings.Add(new System.Windows.Forms.Binding("Text", objData, "Name"));

    ///Bind Combo box with DdlValue property
    comboBox1.DataBindings.Add(new System.Windows.Forms.Binding("Text", objData, "DdlValue"));
}

 

And databind “objData” to DataRepeater1 control, I will use button click event to do this.

private void button2_Click(object sender, EventArgs e)
{
    objData.Add(new data1());
    dataRepeater1.DataSource = null;
    dataRepeater1.DataSource = objData;
}

 

Ok to now when  you will click on button2, it will add new item in “objData” and then, bind it to dataRepeater1 control.

But still we have to add item in combobox, So we need to use “ItemCloned” event to do this.

private void dataRepeater1_ItemCloned(object sender, Microsoft.VisualBasic.PowerPacks.DataRepeaterItemEventArgs e)
{
    ComboBox c1 = (ComboBox)e.DataRepeaterItem.Controls.Find("comboBox1", true)[0];

    c1.Items.Add("sa1");
    c1.Items.Add("sa2");
    c1.Items.Add("sa3");
    c1.Items.Add("sa4");
    c1.Items.Add("sa5");
}

you can see that now there are 5 item in combo box.

and finally let hide and show a label control dynamically, Here in example the logic is, when use select “sa2” from combo box it will show the label else it will be hide.

We have to use DrowItem event to do this.

private void dataRepeater1_DrawItem(object sender, DataRepeaterItemEventArgs e)
{
    if (objData[e.DataRepeaterItem.ItemIndex].DdlValue == "sa2")
    {
        ((Label)e.DataRepeaterItem.Controls.Find("label2", true)[0]).Text = "this is second option";
    }
    else
    {
        ((Label)e.DataRepeaterItem.Controls.Find("label2", true)[0]).Visible = false;
    }
}

So this is good to run our program, but one more thing, If you want to hide show label directly when use change value from dropdown list, you have to add SelectedIndexChanged to combobox1.

private void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
{
    ComboBox cbo = ((ComboBox)(sender));

    DataRepeaterItem prnt = (DataRepeaterItem)(cbo.Parent);

    Label objLavel = ((Label)(prnt.Controls.Find("Label2", true)[0]));
    if (cbo.SelectedIndex == -1)
    {
        return;
    }
    if (cbo.Text == "sa2")
    {
        objLavel.Visible = true;
        objLavel.Text = cbo.Text;
    }
    else
    {
        objLavel.Visible = false;
    }
}

So just press F5 to run this program.

So this is a very simple example to work with dataRepeater control, you can utilize your requirement in it and have some cool looking information in your window application!

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
Reactions:

Google Map Advance Search by Radius

Google map allows us to create radius in its map, user will drag and drop that radius in different location and he will able to show only those pointers which are search result in his selected criteria.

Visit this example : http://maps.forum.nu/gm_sensitive_circle2.html to create radius in Google map.

Google saAction

Now we can get new updated radius value from JavaScript function.

We have to pass that amount to SQL Server stored procedure Below is that sql :

 

CREATE PROCEDURE uspAddress_GetByRadius
    @Latitude        decimal(10,8)
    ,@Longitude        decimal(10,8)   
    ,@Radius        decimal(5,3)
AS
BEGIN

    DECLARE @R decimal(18,10)
    SET @R = PI()/180

    SELECT
          ACOS((SIN(@Latitude*@R)* SIN(Latitude*@R)) + (COS(@Latitude*@R)* COS(Latitude*@R) * COS(Longitude*@R - @Longitude*@R))) * 6378.137 AS Distance
          ,A.*
    FROM
          (SELECT
                 CONVERT(decimal(10,8), SUBSTRING(LMapCoordonates, 0, CHARINDEX(',',LMapCoordonates))) as Latitude
                ,CONVERT(decimal(10,8), SUBSTRING(LMapCoordonates, CHARINDEX(',',LMapCoordonates) + 1, 100)) as Longitude
                ,tblAddress.*
          FROM tblAddress) AS A
    WHERE      
        ACOS((SIN(@Latitude*@R)* SIN(Latitude*@R)) + (COS(@Latitude*@R)* COS(Latitude*@R) * COS(Longitude*@R - @Longitude*@R))) * 6378.137 <= @Radius
END

 

We will apply Google map’s new Latitude and Longitude value and radius area to the sql server’s stored procedure and it will return only those records which are satisfy that criteria.

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
Reactions:

Online Photo Frame Creator Tool

PicJoke is online photo editor tool, which allows to embed funny frame to our uploaded image.

There are so many frame Effects.

Have some quick fun.

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
Reactions:

jQuery 1.3 Cheat Sheet

Download jQuery 1.3 Cheat Sheet from http://oscarotero.com/jquery/

jQuery

it is also link to its example.

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
Reactions:

CK Editor

I few months a go have posted about some WYSIWYG editor, I have come to know that there is one more tool next generation solution of FCK Editor.

Almost all developers knows about FCK Editor, Now there is a new version, CK Editor.

ckEditor

There is all features of FCK editor and dozens of new functionality. CK Editor is faster is fast to load and fast to use.Its current version is 3.0

See demo here.

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
Reactions:

Open ThickBox dialogbox without “HREF”

I have seen many times that Thickbox normal works with <a href=””></a> syntax,

Ex :

Inner Page Content Syntex :

<a href="#TB_inline?height=200&width=200&inlineId=hiddenModalContentID&modal=true"
class="thickbox">Click here to show hidden modal content.</a>

IFrame Syntex :


<a href="testPage.aspx?keepThis=false&TB_iframe=true&height=200&width=200"
title="saActionPage" class="thickbox">Click here</a>  

But what happen when you need to open ThickBox by click event? Here is its solution.


You can to use same syntax of HREF  with “tb_show” function.


Ex :


<script language="javascript" type="text/javascript">

    function showTB()  {

       var newURL = "#TB_inline?height=200&width=300&inlineId=hiddenModalContentID";

        tb_show("ThickBox Title Here", newURL);

    }

</script>


It means you can also open thick box by any other event also.

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
Reactions:

Export GridView To Excel : Column Format

Last Month I posted that How to export to excel from web page with data formatting.

But when you are trying to export entire grid specially with Boolean datatype column,

 

               string attachment = "attachment; filename=Registration.xls";
               Response.ClearContent();
               Response.AddHeader("content-disposition", attachment);
               Response.Charset = "";
               //set the Response mime type for excel
               Response.ContentType = "application/vnd.ms-excel";
               //create a string writer
               System.IO.StringWriter stringWrite = new System.IO.StringWriter();
               //create an htmltextwriter which uses the stringwriter
               System.Web.UI.HtmlTextWriter htmlWrite = new System.Web.UI.HtmlTextWriter(stringWrite);
               //instantiate a datagrid
               GridView dg = new GridView();
               dg.RowDataBound += new GridViewRowEventHandler(GridView1_RowDataBound);
               //set the datagrid datasource to the dataset passed in
               dg.DataSource = dt;
               //bind the datagrid
               dg.DataBind();
               //dg.Columns[1].ItemStyle.
               //tell the datagrid to render itself to our htmltextwriter
               dg.RenderControl(htmlWrite);
               //all that's left is to output the html
               Response.Write(stringWrite.ToString());
               Response.End();

 

its result:

export check box

You can see that checkbox is there, But this is not user friendly. because in excel operator are not familiar with check box in excel data.

It means there should be 1/0  or True/False in place of checkbox. lets see.

Add RowDataBound event to the grid…

 

               GridView dg = new GridView();
               dg.RowDataBound += new GridViewRowEventHandler(GridView1_RowDataBound);

 

Now create an event…

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        CheckBox chk = (CheckBox)e.Row.Cells[1].Controls[0];
        chk.Visible = false;
        if (chk.Checked)
        {
            e.Row.Cells[1].Text = "1";
        }
        else
        {
            e.Row.Cells[1].Text = "0";
        }

    }
}

You can see that now checkbox is invisible and we are writing 1 or 0 in the same cell, Cells[1] is static value for second column.

and now see the result…

export 01

You can see that value is now changed in to 1 inplace of checkbox.

We can change any kind of data by using RowDataBound event.

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
Reactions:

Search Google Map Location by Address

Normally we have to pass Latitude and Longitude to get location, but Using Google API “geocoder.getLatLng()” we can get location by passing address. thanks to one of my friend Dhiren Javia to find this solution for me.

saAction Location

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps API Example: Simple Geocoding</title>

    <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>

    <script type="text/javascript">

        var map = null;
        var geocoder = null;

        function initialize() {
            if (GBrowserIsCompatible()) {
                map = new GMap2(document.getElementById("map_canvas"));
                map.setCenter(new GLatLng(22.18, 70.56), 4);
                geocoder = new GClientGeocoder();
            }
        }

        function showAddress(address) {
            if (geocoder) {
                geocoder.getLatLng(
                address,
                function(point) {
                    if (!point) {
                        alert("Location not found : " + address);
                    } else {
                        map.setCenter(point, 13);
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        marker.openInfoWindowHtml(address);
                    }
                }
                );
            }
        }

        showAddress(this.address.value);
    </script>

</head>
<body onload="initialize();" onunload="GUnload()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">
    <p>
        <input type="text" size="60" name="address" value="Rajkot" />
        <input type="submit" value="Go!" />
    </p>
    <div id="map_canvas" style="width: 500px; height: 300px">
    </div>
    </form>
</body>
</html>

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
Reactions:

Image Reflection/Shadow

Apply image reflection effect using jQuery visit here

saaction image refelction

Reflection.js for jQuery is very cool plug-in to apply reflection in image dynamically without uploading two images. It is also allows you to add instantaneous reflection effects to your images in modern browsers, in less than 2 KB.

It will create a “Canvas” tag programmatically to show reflection and working will almost all browsers. See demo here.

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
Reactions:

Compresses and Decompresses CSS

This is very good idea to compresses CSS file before uploading it on web server, It compress the file size and improve performance of web site. But some time we need to edit the same compresses file it is very big headache, There is a small online tool to compress and decompress CSS.

Visit here

saAction csCSSc  Client-side CSS Compressor & Decompressor

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
Reactions: