Dot.Net Seva: August 2015

Sunday 30 August 2015

Square

Hide Copy Code

.shape {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 5px;
    float: left;
}

Hide Copy Code

<div class="shape"></div>

Circle

Hide Copy Code

.circle {
    border-radius: 50%;
}

Hide Copy Code

<div class="shape circle"></div>

Oval

Hide Copy Code

.oval {
    border-radius: 50%;
    height:100px;
}

Hide Copy Code

<div class="shape oval"></div>

Target (multi-circles)

Hide Copy Code

.circle.outer {
    position: relative;
}

.circle.inner {
    position: absolute;
    top: 24%;
    left: 24%;
    display: block;
    border: 3px solid #fff;
}

#circle2 {
    width: 100px;
    height: 100px;
}

#circle3 {
    width: 50px;
    height: 50px;
    left: 20%;
}

#circle4 {
    width: 25px;
    height: 25px;
    left: 16%;
}

Hide Copy Code

<div class="shape circle outer">
        <div class="shape circle inner" id="circle2">
            <div class="shape circle  inner" id="circle3">
                <div class="shape circle  inner" id="circle4">
                </div>
            </div>
        </div>
    </div>

Quarter (A Circle With 4 Quarter Pieces)

Hide Shrink

Copy Code

.quarter-tile {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 5px;
}

.tile {
    position: absolute;
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

.tile.green {
    background: green;
    clip: rect(0px, 200px, 100px, 100px);
    width: 200px;
}

.tile.blue {
    background: dodgerblue;
    clip: rect(0px, 100px, 100px, 0px);
    width: 200px;
}

.tile.orange {
    background: orange;
    clip: rect(100px, 100px, 200px, 0px);
    width: 200px;
}

.tile.yellow {
    background: yellow;
    clip: rect(100px,200px, 200px, 100px);
    width: 200px;
}

Hide Copy Code

<div class="shape circle outer">
        <div class="shape circle inner" id="circle2">
            <div class="shape circle  inner" id="circle3">
                <div class="shape circle  inner" id="circle4">
                </div>
            </div>
        </div>
    </div>

Donut Ring (A Multi-Colored Circle with its Center Hollowed Out)

Hide Shrink

Copy Code

/**********************donut ring*/
.donut-ring {
    position: relative;
    width: 200px;
    height: 200px;
}

.ring {
    position: absolute;
    width: 50%;
    height: 50%;
}

.ring.red {
    top: 0;
    left: 0;
    background-color: red;
    border-radius: 100% 0 0 0;
}

.ring.blue {
    top: 0;
    right: 0;
    background-color: blue;
    border-radius: 0 100% 0 0;
}

.ring.orange {
    bottom: 0;
    left: 0;
    background-color: orange;
    border-radius: 0 0 0 100%;
}

.ring.green {
    bottom: 0;
    right: 0;
    background-color: green;
    border-radius: 0 0 100% 0;
}

.cutout {
    width: 50%;
    height: 50%;
    background-color: white;
    position: absolute;
    top: 25%;
    left: 25%;
    border-radius: 50%;
    pointer-events: none;
}

Hide Copy Code

<div class="donut-ring">
    <div class="ring red"></div>
    <div class="ring blue"></div>
    <div class="ring orange"></div>
    <div class="ring green"></div>
    <div class="cutout"></div>
</div>

Hide Copy Code

/* Move in a circle without wrapper elements
  * Idea by Aryeh Gregor, simplified by Lea Verou
 */

 @keyframes rot {
     from {
         transform: rotate(0deg)
                    translate(-100px)
                    rotate(0deg);
     }
     to {
         transform: rotate(360deg)
                    translate(-100px)
                    rotate(-360deg);
     }
 }

 .smile {
     width: 40px;
     height: 40px;
     position: absolute;
     color:yellow;
     top: 300px;
     left: 50%;
     margin: -20px;
     font-size: 100px;
     animation: rot 5s infinite linear;
 }

Hide Copy Code

<div class="smile">?</div>

Reff--

http://www.codeproject.com/Tips/1022374/Square-Circle-Ring-Oh-and-That-Smiley

Export Gridview Data with Images to Word, Excel in Asp.net using C#

// HTML

<title>Export Gridview with Images in Asp.net</title>

.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial,Helevetica, sans-serif; color: #303933;}

.headerstyle

{

color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;background-color:#df5015;padding:0.5em 0.5em 0.5em 0.5em;text-align:center;

}

</style>

</head>

<body>

<asp:GridView ID="gvDetails" CssClass="Gridview" runat="server" AutoGenerateColumns="False">

<asp:BoundField HeaderText="User Id" DataField="UserId" />

<asp:BoundField HeaderText="User Name" DataField="UserName" />

<asp:BoundField HeaderText="Education" DataField="Education" />

<asp:ImageField DataImageUrlField="Imagepath" HeaderText="Image" ItemStyle-Height="25px"ItemStyle-Width="25px" />

</Columns>

</asp:GridView>

<br />

<asp:Button ID="btnExport" runat="server" Text="Export Data"

onclick="btnExport_Click" />

</div>

</form>

</body>

</html>

// CS Page

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

gvDetails.DataSource = BindGridviewData();

gvDetails.DataBind();

}

public override void VerifyRenderingInServerForm(Control control)

{

}

/// <summary>

/// Dynamically create & bind data to gridview

/// </summary>

protected DataTable BindGridviewData()

{

DataTable dt = new DataTable();

dt.Columns.Add("UserId", typeof(Int32));

dt.Columns.Add("UserName", typeof(string));

dt.Columns.Add("Education", typeof(string));

dt.Columns.Add("Imagepath", typeof(string));

dt.Rows.Add(1, "Raja", "MCA", "http://localhost:50157/Blog Samples/uploads/Sign1.jpg");

dt.Rows.Add(2, "Krishna", "Msc", "http://localhost:50157/Blog Samples/uploads/Signature.jpg");

dt.Rows.Add(3, "Mohit", "MS","");

dt.Rows.Add(4, "Arun", "B.Tech","");

dt.Rows.Add(6, "Ajay", "MD","");

dt.Rows.Add(7, "Rohit", "B.Tech","http://localhost:50157/Blog Samples/uploads/Rohit.jpg");

dt.Rows.Add(8, "Anuraj", "CA","");

return dt;

}

protected void btnExport_Click(object sender, EventArgs e)

{

Response.ClearContent();

Response.Buffer = true;

Response.AddHeader("content-disposition", string.Format("attachment; filename={0}","EmpDetails.xls"));

Response.ContentType = "application/ms-excel";

StringWriter sw = new StringWriter();

HtmlTextWriter htw = new HtmlTextWriter(sw);

gvDetails.AllowPaging = false;

gvDetails.DataSource = BindGridviewData();

gvDetails.DataBind();

//Change the Header Row back to white color

gvDetails.HeaderRow.Style.Add("background-color", "#FFFFFF");

//Applying stlye to gridview header cells

for (int i = 0; i < gvDetails.HeaderRow.Cells.Count; i++)

{

gvDetails.HeaderRow.Cells[i].Style.Add("background-color", "#df5015");

}

gvDetails.RenderControl(htw);

Response.Write(sw.ToString());

Response.End();

}

Sunday 30 August 2015

Square

Circle

Oval

Target (multi-circles)

Quarter (A Circle With 4 Quarter Pieces)

Donut Ring (A Multi-Colored Circle with its Center Hollowed Out)

Export Gridview Data with Images to Word, Excel in Asp.net using C#

Excel Sort values in ascending order using function TEXTJOIN