Syed Md. Kamruzzaman's Blog

Friday, September 9, 2016

AngularJS two way data bindings

You want to do some expression based on some input. and then you want to bind this expression result in a different textbox and later you want to do some expression with this result textbox.

then, here you are.

Here is the code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"> </script>
</head>

<body ng-app="myApp" ng-controller="myController">

<label>Set the first number: <input type="text" ng-model="number1"/></label><br />
<label>Set the last number: <input type="text" ng-model="number2"/></label>
<br />
<br /><br />
<br />

<label>result: <input type="text" ng-model="result" ng-bind="getResult()"/></label>

<br />
<br /><br />
<br />

<strong>result in later use:</strong> {{result}}

</body>

<script type="text/javascript">

var app =angular.module("myApp", [] );

var controller = app.controller("myController",jewel);

function jewel($scope)
{

$scope.number1=5;
$scope.number2 = 4;

$scope.result = $scope.number1 + $scope.number2;

$scope.getResult = function(){
$scope.result = Number($scope.number1) + Number($scope.number2);
};

}

</script>
</html>

working fiddle: JSFiddle

Sunday, January 13, 2013

Grid View Under Grid View in asp.net

GridView:

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" ShowFooter="True" AllowPaging="True" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:expandcollapse('<%# Eval("GridViewField") %>', 'one');">
   <img id="img<%# Eval("GridViewField") %>" alt="Click to show/hide Details f    or this Book No <%# Eval("GridViewField") %>"
   width="9px" border="0" src="../Images/plus.gif" />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="GridViewField" HeaderText="Header Name" />
<asp:TemplateField ItemStyle-Width="1px">
<ItemTemplate>
<tr>
<td colspan="100%" style="height: 0px; padding: 0px">
 <div id="div<%# Eval("GridViewField") %>" style="display: none;                position: relative;left: 5px; overflow: auto; width: 99%; border: 0px">
 <asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="true"         CssClass="gridView"
 AlternatingRowStyle-CssClass="gv_altRow" FooterStyle-CssClass="gv_footer"      PagerStyle-CssClass="gv_pager" OnRowDataBound="gvDetails_RowDataBound">        </asp:GridView>
 </div>
</td>
</tr>
</ItemTemplate>
<ItemStyle Width="1px"></ItemStyle>
</asp:TemplateField>
</Columns>
</asp:GridView>

Javascript:

function expandcollapse(obj, row) {
            var div = document.getElementById('div' + obj);
            //            var tr = document.getElementById('tr' + obj);
            var img = document.getElementById('img' + obj);

            if (div.style.display == "none") {
                //                tr.style.display = "block";
                divName = obj;
                div.style.display = "block";
                if (row == 'alt') {
                    img.src = "../Images/minus.gif";
                }
                else {
                    img.src = "../Images/minus.gif";
                }
                img.alt = "Close to view other Challan";
            }
            else {
                //                tr.style.display = "none";
                div.style.display = "none";
                if (row == 'alt') {
                    img.src = "../Images/plus.gif";
                }
                else {
                    img.src = "../Images/plus.gif";
                }
                img.alt = "Expand to show Challan Products";
            }
        }

In C# or VB:

Bind data on grid view row data bound what you want.

Thursday, January 10, 2013

Simple Drop Down Menu with Jquery and CSS

This post is very basic level Jquery and CSS implementation. I want to explain how to design simple drop down menu with CSS, HTML and Jquery. This system helps you to minimise the menus list. Just take a quick look at this post very few lines of code, use it and enrich your web projects.

Download Script

Live Demo

HTML Code
Simple HTML code

<div class="dropdown">
<a class="account" >My Account</a>

<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li ><a href="#settings">Settings</a></li>
<li ><a href="#feedback">Send Feedback</a></li>
</ul>
</div>

</div>

JavaScript
Contains javascipt code. $(".account").click(function(){}- account is the class name of the My Account anchor tag. Using $(this).attr('id') calling id value of the anchor tag and based on condition showing .submenu div box and the same time$(this).attr('id', '1') adding id value too.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
"></script>;
<script type="text/javascript" >
$(document).ready(function()
{

$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0'); 
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}

});

//Mouse click on sub menu
$(".submenu").mouseup(function()
{
return false
});

//Mouse click on my account link
$(".account").mouseup(function()
{
return false
});


//Document Click
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>

Document click on document $(document).mouseup(function() hiding the.submenu

CSS Code

.dropdown 
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a 
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account 
{
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}

Got From: http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html

If you want to view search result only in pdf format then you can search by blog filetype:pdf
To know definition or meaning of word just type define something
To search about weather related information of a specific area type weather dhaka
To know result of math or any calculation just type 100+200-50+300. you will get the result 550
To search link in google type link: www.syedmdkamruzzaman.blogspot.com

Syed Md. Kamruzzaman's Blog

Friday, September 9, 2016

AngularJS two way data bindings

Sunday, January 13, 2013

Grid View Under Grid View in asp.net

Thursday, January 10, 2013

Simple Drop Down Menu with Jquery and CSS

Shakespeare All Books

Need to Resize Picture??

Need StopWatch????

Some technique to search in google