Monday, September 28, 2015

Angular Cheat Sheet

                                      

Allow only numeric data

<input id="primaryLocationNumber" ng-model="PrimaryLocationId" type="number" class="form-control" />


Set initial selected value

Thursday, September 24, 2015

CSS Implement Image loading on ajax call

                    Implement Image loading on ajax call

When we have a long awaiting ajax call we would like to disable any click events from the user. We can achieve this as shown below.

  • we need an div tag
  • Gif loading image
  • Css class
  • Javascript to show and hide the div and image
html 

We can have this image on the top of all the html tags

Wednesday, September 23, 2015

CSS cheat sheet

Remove default bullets from unordered list
#notepad li { list-style: none; 
}

Text-Align



.panel{
   text-align: center;
}

Border Radius
border-radius: 14px;


Align table to center within a div (responsive)





table {
   margin:0 auto;
}

Adjust left and right margin



.panel{
   margin-right:auto;
   margin-left:auto;
}










Class with round edges

.mainBody{
 
    margin: 100px 250px;
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 1303px;
    height: 703px;
   
}

Hover effect in table selection
.table>tbody>tr:hover {
        background: #99B2E6 !important;

    }

Specify font-awesome styles for specific div
#notepad li .fa-ban:before {
    color: #FA0A26;
    padding-right: 0px;
    margin-left: -41px;
}
Add vertical line

.vertical-line {
     border-left:1px solid #47473D;

 }








Add shadow box

Edit in plunker

div { width: 300px; height: 100px; 
        background-color: yellow; 
       box-shadow: 10px 10px 5px #888888; }

 Text Transform

.text-change
{
text-transform: none;
}
.text-change
{
text-transform: capitalize;
}
.text-change
{
text-transform: uppercase;
}
.text-change
{
text-transform: lowercase;
}



Pointed Cursur


<span style="cursor:pointer">pointer</span><br>




Specify styles to multiple tag


input[type=text],input[type=password],textarea
{ 
width:150px;
}

Display html as block 
span#mySpan {display:block; }

Borders for div
container{
    background-color:#ccc;
    height: 200px;
    width:200px;
     border-color: #000;
     border-style: solid
    }
Hide text overflow with ellipses

Borders for div

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}


Tuesday, September 22, 2015

CSS Notepad

                              CSS Notepad

Using css class to generate notepad skin

Monday, September 21, 2015

Angular Sorting table

                     
We can easily implement sorting functionality in a table as shown below. 

  • On ng-click we need to perform sort operation on the selected column
  • We need to use ng-show to show the image
  • We need to specify the order by in ng-repeat directive
  • Need a java script function for reverse as shown below
Edit in plunker


Sunday, September 20, 2015

Angular ng-disabled

       
ng-disabled :binds AngularJS application data to the disabled attribute of HTML elements.
Html

Angular ng-hide

                            
ng-hide : Shows or hides the given HTML element based on the expression provided to the ngHide attribute.This helps when creating Angular apps since our single page applications will most likely have many moving parts that come and go as the state of our application changes

The great part about these directives is that we don’t have to do any of the showing or hiding ourselves with CSS or JavaScript.

ex as shown below: If firstname model has values last name is shown.


Edit in plunkr



Thursday, September 17, 2015

Angular ng-options set selected value

        
We can set the default value for ng-options as shown below

Html


Angular UI-Select Clear

                          
When we are using UI-Select  we need to reset the selected Item. 
We can achieve this by using

Html

Wednesday, September 16, 2015

Angular UI-Select custom filters

We can filter the data in UI-Select from remote server. 
Need: We do not want to load all the data locally . Performance would be better


Html

Angular selected event for UI-Select

  This is how we can call a function based on the selected item from the UI-Select directive.

Note : By default if we use the select.css file there is an issue with text overflow when selected.
This can be resolved by adding the following style sheets at the bottom


Monday, September 14, 2015

Entity FrameWork Add Edmx

                            Entity FrameWork Add Edmx

Quick reference for adding edmx file.
Step 1








Step 2


Step 3
 Step 4
 Step 5



Saturday, September 12, 2015

Draggable diablog

                            Draggable dialog using JQuery UI

  • We need to reference Jquery and Jquery UI
  • In the script we need to specify modal as draggable as shown below


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Model Pop up</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/Custom-jquery-ui.min.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet"/>
    <script src="Scripts/bootstrap.min.js"></script>
    </head>
<body>
<div class="side-menu" id="sideMenu">
    <menu>
        <ul class="nav nav-tabs nav-stacked">
            <li>
                <a href="#myModal" data-backdrop="true" data-toggle="modal">Click Me</a>
            </li>
        </ul>
    </menu>
</div>
<div id="myModal" class="modal fade">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                <input type="text" />
                <p>Body</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="save" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
   <!-- /.modal -->
</body>
</html>

script


<script type="text/javascript">
    $(function() {
        $("#myModal").draggable({
            handle: ".modal-header"
        });
        $("#save").click(function () {

        }
        );
 });
</script>

Output








Jquery Validate

                        How to use Jquery Validate

  • we need Jquery and Jquery.validate js files
  • we need specify class as "required" for input control which needs to have value 
  • In the document.ready we need to call validate
Html 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery validate</title>
    <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
</head>
<body>
<form id="form" class="form" name="ContactForm" method="POST">
 <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-3">
                <label for="FirstName">
                    First Name
                </label>
                <input type="text" class="form-control required" id="FirstName">
            </div>
            <div class="col-md-3 ">
                <label for="LastName">
                    Last Name
                </label>
                <input type="text" class="form-control"   id="LastName">
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-md-3 ">
                <label for="Email">
                    Email
                </label>
                <input type="text" class="form-control  required email" id="Email">
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-md-3 ">
                <button type="submit" class="btn btn-primary ">
                    Submit
                </button>
            </div>
        </div>
    </div>
 </div>
</form>
</body>
</html>
Java Script

<script type="text/javascript">
    $(document).ready(function () {
        $('.form').validate({
        });

    });
</script>



Java Script





Ouptput



Friday, September 11, 2015

Font awesome image in a button

                 Font awesome image in a button


we can have font awesome icon in button as shown below

Reference








Note : we need to specify hexadecimal value


output

Button Loading animation

                       Button loading animation

we can use javacript to animate laoding text change for a button



















Html




output

Thursday, September 10, 2015

Kendo Grid Check All

                  Kendo grid check all functionality

if we need a check box to check and uncheck all rows . This is the code snippet
































Output

Kendo bind local data

                                  Kendo bind local data

Binding data using local data or through http get
























Sunday, September 6, 2015

Validate Http:Post

Validate $HTTP Post using Fiddler

Today I would be talking about validating a Restfull http Post using fiddler.we can validate if the post was successful. 
Steps invloved
  • Open fiddler and specify the Post Url in the composer
  • Specify the action method as Post
  • Create a request body (Data which would be sent)
  • Validate the response message as shown in the snapshot




























Output

Thursday, September 3, 2015

Angular http

                     Using angular for http 

  Using angular it is simple to get JSON data and display it in a view.

Edit in plunker

HTML

Wednesday, September 2, 2015

Angular two way data binding

                       Two way binding in Angular

Today i would show you a simple example of two way binding in Angular.
Note:  
  • Like Knockout we do not need any observable. 
  • Less amount of code
  • When view changes model changes. When model changes view changes. This is known as two way binding