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>

Entity Framework – AutoDetectChangesEnabled

From MSDN

When using most POCO entities the determination of how an entity has changed (and therefore which updates need to be sent to the database) is handled by the Detect Changes algorithm. Detect Changes works by detecting the differences between the current property values of the entity and the original property values that are stored in a snapshot when the entity was queried or attached. The techniques shown in this topic apply equally to models created with Code First and the EF Designer.

But some times we need to turn off this feature. for example, I need to upload a excel file it contains a bulk data. At this time AutoDetectChangesEnabled is true then it take a lot time for insert all rows. I can do the data validations at db side.

Just check the difference of AutoDetectChangesEnabled ON and OFF while inserting a bulk data.

Normal way:

namespace TestAutoDetectChangesEnabled
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.Title = &amp;quot;Time Test - AutoDetectChangesEnabled&amp;quot;;
            string[] names = { &amp;quot;Arun&amp;quot;, &amp;quot;Raj&amp;quot;, &amp;quot;Musthaan&amp;quot;, &amp;quot;Majeed&amp;quot;, &amp;quot;Muzafir&amp;quot;,
                                 &amp;quot;Hari&amp;quot;, &amp;quot;Dharma&amp;quot;, &amp;quot;Kannan&amp;quot;, &amp;quot;Imran&amp;quot;, &amp;quot;Santo&amp;quot;,
                                 &amp;quot;Rahmath&amp;quot;, &amp;quot;Jayesh&amp;quot; };
            Stopwatch sw = new Stopwatch();
            sw.Start();
            var db = new AppContext();
            foreach (var i in Enumerable.Range(1, 20000))
            {
                var student = new Student()
                {
                    Name = names[(new Random().Next(0, 10))],
                    ContactNo = &amp;quot;9870002735&amp;quot;,
                    RegNo = i.ToString().PadLeft(7, '0')
                };
                db.Students.Add(student);
                Console.Clear();
                Console.WriteLine(&amp;quot;{0} records added&amp;quot;, i);
            }
            db.SaveChanges();
            sw.Stop();
            Console.WriteLine(&amp;quot;Taked time - {0}&amp;quot;, sw.ElapsedMilliseconds);
            Console.ReadKey();
        }
    }

    public class AppContext : DbContext
    {
        public AppContext()
            : base(&amp;quot;AppConnection&amp;quot;)
        {

        }
        public DbSet&amp;lt;Student&amp;gt; Students { get; set; }
    }
    public class Student
    {
        public long Id { get; set; }
        public string Name { get; set; }
        public string RegNo { get; set; }
        public string ContactNo { get; set; }

    }
}

AutoDetectChangesEnabled-before

After disable AutoDetectChanges

 class Program
    {
        static void Main(string[] args)
        {
            Console.Title = &amp;quot;Time Test - AutoDetectChangesEnabled&amp;quot;;
            string[] names = { &amp;quot;Arun&amp;quot;, &amp;quot;Raj&amp;quot;, &amp;quot;Musthaan&amp;quot;, &amp;quot;Majeed&amp;quot;, &amp;quot;Muzafir&amp;quot;,
                                 &amp;quot;Hari&amp;quot;, &amp;quot;Dharma&amp;quot;, &amp;quot;Kannan&amp;quot;, &amp;quot;Imran&amp;quot;, &amp;quot;Santo&amp;quot;,
                                 &amp;quot;Rahmath&amp;quot;, &amp;quot;Jayesh&amp;quot; };
            Stopwatch sw = new Stopwatch();
            sw.Start();
            var db = new AppContext();
            try
            {
                db.Configuration.AutoDetectChangesEnabled = false;

                foreach (var i in Enumerable.Range(1, 20000))
                {
                    var student = new Student()
                    {
                        Name = names[(new Random().Next(0, 10))],
                        ContactNo = &amp;quot;9870002735&amp;quot;,
                        RegNo = i.ToString().PadLeft(7, '0')
                    };
                    db.Students.Add(student);
                    Console.Clear();
                    Console.WriteLine(&amp;quot;{0} records added&amp;quot;, i);
                }
                db.SaveChanges();
            }
            finally
            {
                db.Configuration.AutoDetectChangesEnabled = true;
            }
            sw.Stop();
            Console.WriteLine(&amp;quot;Taked time - {0}&amp;quot;, sw.ElapsedMilliseconds);
            Console.ReadKey();
        }
    }

AutoDetectChangesEnabled-after

See the difference, it almost 10x faster. But use it with care. Don’t forget to re-enable detection of changes after the loop — used a try/finally to ensure it is always re-enabled even if code in the loop throws an exception.

See System.Data.Entity.Validation.DbEntityValidationException Details

Today i got an error on saving data to db using EF.

An exception of type ‘System.Data.Entity.Validation.DbEntityValidationException’ occurred in EntityFramework.dll but was not handled in user code

Additional information: Validation failed for one or more entities. See ‘EntityValidationErrors’ property for more details.

System.Data.Entity.Validation.DbEntityValidationException

but I can’t find out what are the failed validations.

System.Data.Entity.Validation.DbEntityValidationException2

No more details in quick watch. I stucked a little. At this time i find out the use of $exception.That is a special debugger variable. You cannot access it via code.

https://msdn.microsoft.com/en-us/library/ms164891.aspx

https://blogs.msdn.microsoft.com/shaykatc/2004/02/20/vs-2003-tip-3-view-exception-information-with-exception/

look  $exception in quickwatch.

System.Data.Entity.Validation.DbEntityValidationException3

 

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>

List of all default Excel NumberFormatId’s

If you’d like to format your date another way, here is a list of all default Excel NumberFormatId’s

 

ID FORMAT CODE
0 General
1 0
2 0.00
3 #,##0
4 #,##0.00
9 0%
10 0.00%
11 0.00E+00
12 # ?/?
13 # ??/??
14 d/m/yyyy
15 d-mmm-yy
16 d-mmm
17 mmm-yy
18 h:mm tt
19 h:mm:ss tt
20 H:mm
21 H:mm:ss
22 m/d/yyyy H:mm
37 #,##0 ;(#,##0)
38 #,##0 ;[Red](#,##0)
39 #,##0.00;(#,##0.00)
40 #,##0.00;[Red](#,##0.00)
45 mm:ss
46 [h]:mm:ss
47 mmss.0
48 ##0.0E+0
49 @

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"
                    }
             }]
   });