Showing angular expression at page load

angularIn my application I want to show a table data. I am showing a loading icon at first. At that time table will hidden. after data load that table will display. its working good. But some times some browsers showing angular expressions in table at page. After a 1/4 sec it will gone. But it shown 1/4 sec!!. I tried ng-show, ng-if, add a class,etc. everything failed. It is not fixed permanently. After that I tried with ng-cloak. It works!

I added the below code in my css file, and add a class to my table element.

CSS

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}

Html

<table  class="ng-cloak">
....</table>

Angular dataTable multicolumn filter

angularIn my project i got a requirement that client need to search column wise with the default common search. I checked it in google, found column filter in footer row. But I need it in header itself. Based on that example created one.

 

HTML

<!DOCTYPE html>
<html>

  <head>
    		<link rel="stylesheet" href="style/jquery.dataTables.css" />
  </head>

  <body ng-app="datatablesSampleApp">
<div ng-controller="simpleCtrl" class="code"  style="width: 500px">
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns">
<thead>
<tr>
<th>ID
                <input type="text" ng-model="search.id" ng-change="searchData(search.id,0)" ng-click="blockSorting($event)" /></th>
<th>FirstName
                <input type="text" ng-model="search.firstName" ng-change="searchData(search.firstName,1)"  ng-click="blockSorting($event)"/></th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in data">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
</tr>
</tbody>
</table>
</div>
<script src="script/jquery-1.10.1.min.js"></script>
    <script src="script/jquery.dataTables.js"></script>
    <script src="http://code.angularjs.org/1.2.15/angular.js"></script>
    <script src="script/angular-resource.js"></script>
    <script  src="angular-datatables.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>

JS

(function (angular) {
    'use strict';
    angular.module('datatablesSampleApp', ['datatables']).
        controller('simpleCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
            $scope.data = [{
                "id": 860,
                "firstName": "Superman",
                "lastName": "Yoda"
            }, {
                "id": 870,
                "firstName": "Foo",
                "lastName": "Whateveryournameis"
            }, {
                "id": 590,
                "firstName": "Toto",
                "lastName": "Titi"
            }];
            $scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
            $scope.searchData = function (searchText, index) {
                $scope.table.column(index).search(searchText).draw();
            };
            $scope.$on('event:dataTableLoaded', function (event, loadedDT) {
                $scope.table = loadedDT.DataTable;
            });
            $scope.blockSorting = function($event){
                $event.preventDefault();
                $event.stopPropagation();
            }
        });
})(angular);

Output
angular multi column filter

Bind angular scope to dynamically added html

angularSome times we need to integrate html contents to our angular application. some times we create contents from jQuery and integrate it to our application. like kendo UI in jQuery style, jQuery dataTables etc.
At that time the following snippet will useful.

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>

<body ng-app="app">
<div ng-controller="ctrl" id="dvController">
        <test-dir></test-dir>
        <button onclick="addTemplate1()">Add template 1</button>
        <button onclick="addTemplate2()">Add template 2</button>
<div id="dvContainer"></div>
</div>
<script>
                         function addTemplate1() {
                             var template = "<test-dir></test-dir>";
                             $("#dvContainer").html(template);
                             bindAngular();
                         }

                         function addTemplate2() {
                             var template = "FirstName : {{FirstName}}
LastName : {{LastName}}";
                             $("#dvContainer").html(template);
                             bindAngular();
                         }
                         function bindAngular() {
                             var $controllerElement = angular.element('#dvController');
                             var $appElement = angular.element('body');

                             // compiling and applying / digesting the scope.
                             $appElement.injector().invoke(function ($compile) {
                                 var scope = $controllerElement.scope();
                                 $compile($controllerElement)(scope);
                                 scope.$apply();
                             });
                         }
                         angular.module('app', []).controller('ctrl', function ($scope) {
                             $scope.FirstName = "Musthaan";
                             $scope.LastName = "Majeed";
                         }).directive('testDir', function () {
                             return {
                                 template: "
<h1>From dir</h1>
"
                             };
                         })
    </script>
</body>

</html>

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite

One day i am just playing with angular with jQuery. At that time I got an error like

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite
My html looks like,



<head>    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

Because while initializing time angular doesn’t knows that there is jQuery.

Just swap the order and fix this issue.



<head>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>

CSV To JSON Conversion


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSV to JSON</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
</head>
<body>
CSV to JSON Converter
<hr />

Paste Your CSV Here:

    <textarea id="csv" class="text" > </textarea>
    
    <button id="convert">Convert to JSON</button>
      
    <button id="download">Download JSON</button>
    <textarea id="json" class="text"></textarea>
    
	

<style>	.text{width: 100%;height: 250px;} button{margin:10px 0}	</style>

	<script>
	
	

function CSVToArray(strData, strDelimiter) {
    // Check to see if the delimiter is defined. If not,
    // then default to comma.
    strDelimiter = (strDelimiter || ",");
    // Create a regular expression to parse the CSV values.
    var objPattern = new RegExp((
    // Delimiters.
    "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +
    // Quoted fields.
    "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
    // Standard fields.
    "([^\"\\" + strDelimiter + "\\r\\n]*))"), "gi");
    // Create an array to hold our data. Give the array
    // a default empty first row.
    var arrData = [[]];
    // Create an array to hold our individual pattern
    // matching groups.
    var arrMatches = null;
    // Keep looping over the regular expression matches
    // until we can no longer find a match.
    while (arrMatches = objPattern.exec(strData)) {
        // Get the delimiter that was found.
        var strMatchedDelimiter = arrMatches[1];
        // Check to see if the given delimiter has a length
        // (is not the start of string) and if it matches
        // field delimiter. If id does not, then we know
        // that this delimiter is a row delimiter.
        if (strMatchedDelimiter.length && (strMatchedDelimiter != strDelimiter)) {
            // Since we have reached a new row of data,
            // add an empty row to our data array.
            arrData.push([]);
        }
        // Now that we have our delimiter out of the way,
        // let's check to see which kind of value we
        // captured (quoted or unquoted).
        if (arrMatches[2]) {
            // We found a quoted value. When we capture
            // this value, unescape any double quotes.
            var strMatchedValue = arrMatches[2].replace(
            new RegExp("\"\"", "g"), "\"");
        } else {
            // We found a non-quoted value.
            var strMatchedValue = arrMatches[3];
        }
        // Now that we have our value string, let's add
        // it to the data array.
        arrData[arrData.length - 1].push(strMatchedValue);
    }
    // Return the parsed data.
    return (arrData);
}

function CSV2JSON(csv) {
    var array = CSVToArray(csv);
    var objArray = [];
    for (var i = 1; i < array.length; i++) {
        objArray[i - 1] = {};
        for (var k = 0; k < array[0].length && k < array[i].length; k++) {
            var key = array[0][k];
            objArray[i - 1][key] = array[i][k]
        }
    }

    var json = JSON.stringify(objArray);
    var str = json.replace(/},/g, "},\r\n");

    return str;
}

$("#convert").click(function() {
    var csv = $("#csv").val();
    var json = CSV2JSON(csv);
    $("#json").val(json);
});

$("#download").click(function() {
    var csv = $("#csv").val();
    var json = CSV2JSON(csv);
    window.open("data:text/json;charset=utf-8," + escape(json))
});

</script>
</body>
</html>

The JSON request was too large to be deserialized.

I am working on a list and it has a bulk update through api. I am tested with upto 30 records and its working fine on my dev system. whilie update to QA they added a lot of records to update at that time I got an error The JSON request was too large to be deserialized

JSON request was too large
Problem is I am sending data as JSON as MVC’s default maximum Json deserializer members count is 1000. So I changed it in web.config.

<appSettings>
    <add key="aspnet:MaxJsonDeserializerMembers" value="150000" />
</appSettings>

Kendo Grid – add custom class to a column

logo kendoui

In many situation I was required a class for some specific columns. This is a simple solution for that.

$("#grid").kendoGrid({
 dataSource: GridSource,
 columns: [{
                title: "",
                template: actionTemplate,
                filterable: false,
                width: 105
            },
            {
                field: "Title",
                title: "Title",
                width: 350,
                attributes: {
                    "class": "table-cell"
                    }
             }]
   });

We can add in-line styles in the same way.

$("#grid").kendoGrid({
 dataSource: GridSource,
 columns: [{
                title: "",
                template: actionTemplate,
                filterable: false,
                width: 105
            },
            {
                field: "Title",
                title: "Title",
                width: 350,
                attributes: {
                    style: "text-align: right"
                    }
             }]
   });

kendoGrid cancel edit event

logo kendoui

My kendo grid need edit functionality for some specific rows. That is requirement. We can set editable column level
or grid level. I did’t find out an option for disable editable for rows.

I found two options for revert back to normal mode from edit mode.

$("#grid").data("kendoGrid").cancelChanges();
$("#grid").data("kendoGrid").closeCell();

I add a field in model for check is this row editable and check it on edit event.

$("#grid").kendoGrid({

			
			dataSource: GridSource,
			height: 450,
			sortable: true,
			resizable: true,			
			editable: true,
			pageable: true,
			dataBound: ongridDataBound,
			edit: function (e) {
				if (e.model.IsEditable == false) {
					e.sender.closeCell();
				}
			},
			columns: [...]

		});

Now disabled edit functionality for some rows is working fine.

Kendo Grid Date Format

 $("#grid").kendoGrid({            
	dataSource: GridSource,
        height: 540,
        editable: true,
        pageable: true,
        columns: [ 
        	{
			field: "Title",
                        title: "Title", 
                        width: 350
                 }, {
                        field: "RepositoryFilename",
                        title: "Repository Filename", 
                        width: 250,
                    }, {
                        field: "CreatedDate",
                        title: "Create Date", 
                        format:"{0:dd MMM, yyyy}" ,
                        filterable: false, width: 100
                    },   {
                        field: "ModifiedDate",
                        title: "Last Modified", 
                        format: "{0:dd MMM, yyyy}",
                        filterable: false, width: 100
                    }
            ]
        });

Lazy Load Images with jQuery

Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.

Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.

Lazy Load Images with jQuery

Here is a basic sample code for lazy load.


<!DOCTYPE html>
<html lang="en">
<head>
	
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script type="text/javascript">
		function elementInViewport(el) {
			var top = el.offsetTop;
			var left = el.offsetLeft;
			var width = el.offsetWidth;
			var height = el.offsetHeight;

			while(el.offsetParent) {
				el = el.offsetParent;
				top += el.offsetTop;
				left += el.offsetLeft;
			}

			return (
				top >= window.pageYOffset &&
				left >= window.pageXOffset &&
				(top + height) <= (window.pageYOffset + window.innerHeight) &&
				(left + width) <= (window.pageXOffset + window.innerWidth)
				);
		}
		 
		function loadimg(){

			$($("img.lazy")).each(function(ind,img){ 
				if (elementInViewport(img)){ 
					var image = new Image();
					image.src = $(img).data("src") ;	
					image.onload=function(){
						$(img).removeClass("lazy")
							.addClass("img")
							.attr("src",image.src);				
					};
				}
			});
		}
		$(document).ready(function(){
			$(document).on( "scroll", function(){
				loadimg();
			} );
		});
	</script>
	<style type="text/css">
		.img{
			 
			border: solid 1px #DDD; 
			width: 150px;
		}
		.lazy{
			display: block;
			float: left;
			border: solid 1px #DDD;
			height: 300px;
			width: 150px;
			background-image: url('spinner.gif');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 36px 36px;
		}
	</style>
</head>
<body>

	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
	<img src="" data-src="http://example.com/images/4c.jpg" class="lazy" />
	<img src="" data-src="http://example.com/images/6.png" class="lazy" />
	<img src="" data-src="http://example.com/images/5.png" class="lazy" />
	<img src="" data-src="http://example.com/images/7.png" class="lazy" />
</body>
</html>