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

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

User.Identity.Name is null

At this time I am set claims like following line.

identity.AddClaim(new Claim("UserName", context.UserName));

I changed this to


using (AuthRepository _repo = new AuthRepository())
{
  IdentityUser user = await _repo.FindUser(context.UserName, context.Password);

  if (user == null)
  {
     context.SetError("invalid_grant", "The user name or password is incorrect.");
     return;
  }
  ClaimsIdentity identity = new ClaimsIdentity(OAuthDefaults.AuthenticationType);
  identity.AddClaim(new Claim(ClaimTypes.Name, user.UserName));
  identity.AddClaim(new Claim(ClaimTypes.NameIdentifier, user.Id));
  context.Validated(identity);

}

IAppBuilder does not contain definition for UseWebApi

When I try to implement WebApi with owin, i got an error

IAppBuilder’ does not contain a definition for ‘UseWebApi’ and no extension method ‘UseWebApi’ accepting a first argument of type ‘IAppBuilder’ could be found (are you missing a using directive or an assembly reference?)

Solution is you need to install Microsoft ASP.NET Web API2 OWIN Self Host which will resolve the issue.

You can use the NuGet command Install-Package Microsoft.AspNet.WebApi.OwinSelfHost.
nuget_webapi_selfhost

DataTable to Dynamic List

format strings

Last day I got a requirement, it need a pivot table. I generated this table in SQL and read it to a datatable. No issues. Then I want convert this datatable to a list. I can’t create a entity because columns are dynamic. I stuck here some time and got a solution .

 

 

public static class HelperExtensions
{
  public static List<dynamic> ToDynamic(this DataTable dt)
  {
    var dynamicDt = new List<dynamic>();
    foreach (DataRow row in dt.Rows)
    {
      dynamic dyn = new ExpandoObject();
      dynamicDt.Add(dyn);
      foreach (DataColumn column in dt.Columns)
      {
         var dic = (IDictionary<string, object>)dyn;
         dic[column.ColumnName] = row[column];
      }
    }
    return dynamicDt;
  }
}

Custom Messsage Handler in SelfHost WebApi Application

To write a custom message handler, derive from System.Net.Http.DelegatingHandler and override the SendAsyncmethod. This method has the following signature:

Task<HttpResponseMessage> SendAsync(
    HttpRequestMessage request, CancellationToken cancellationToken);

The method takes an HttpRequestMessage as input and asynchronously returns an HttpResponseMessage. A typical implementation does the following:

  1. Process the request message.
  2. Call base.SendAsync to send the request to the inner handler.
  3. The inner handler returns a response message. (This step is asynchronous.)
  4. Process the response and return it to the caller.

Source Code

class Program
    {
        static void Main(string[] args)
        {
            var config = new HttpSelfHostConfiguration("http://localhost:5004");
            config.Routes.MapHttpRoute("API Default",
                "api/{controller}/{id}",
                new { id = RouteParameter.Optional }
                );
            config.MessageHandlers.Add(new CustomMessageHandler());
            using (HttpSelfHostServer server = new HttpSelfHostServer(config))
            {
                server.OpenAsync().Wait();
                Console.WriteLine("Please Enter to Quit");
                Console.ReadKey();

            }
        }
    }
 public class CustomMessageHandler : DelegatingHandler
    {
        protected async override Task<HttpResponseMessage> SendAsync(
            HttpRequestMessage request, CancellationToken cancellationToken)
        {
            var response = await base.SendAsync(request, cancellationToken);
            Console.WriteLine("-------Request URL ----------- "); 
            Console.WriteLine(request.RequestUri);
            Console.WriteLine("-------Response------");
            Console.WriteLine(response);
            
            return response;
        }
    }

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>

HTML <base> Tag

The <base> tag specifies the base URL/target for all relative URLs in a document.

There can be at maximum one <base> element in a document, and it must be inside the <head> element.

Specific Attributes

The HTML <base> tag also supports following additional attributes:

Attribute Value Description
href URL Specifies the URL of a page or the name of the anchor that the link goes to.
target _blank
_parent
_self
_top
Where to open the target URL.
_blank – the target URL will open in a new window.
_self – the target URL will open in the same frame as it was clicked.
_parent – the target URL will open in the parent frameset
_top – the target URL will open in the full body of the window

Example
1.

</pre> <!DOCTYPE html>
<html>
<head>
<title>HTML base Tag</title>
<base href="http://www.musthaan.com" />
</head>
<body>
HTML: <img src="/images/html.gif" />
</body>
</html></pre>
<pre>

In this case image request to http://www.musthaan.com/images/html.gif

</pre> <!DOCTYPE html>
<html>
<head>
<title>HTML base Tag</title>
<base href="http://www.musthaan.com/external" />
</head>
<body>
HTML: <img src="/images/html.gif" />
</body>
</html></pre>
<pre>

In this case image request to http://www.musthaan.com/external/images/html.gif

2.

</pre> <!DOCTYPE html>
<html>
<head>
<title>HTML base Tag</title>
<base href="http://www.musthaan.com" target="_blank"/>
</head>
<body>
<a href="http://www.musthaan.com">musthaan </a>
<a href="http://www.500px.com">500px</a>
</body>
</html></pre>
<pre>

In this case both http://musthaan.com and http://www.500px.com will come in a new window. but we did’t mention it every time.

Browser Support

Chrome Firefox IE Opera Safari Android
Yes Yes Yes Yes Yes Yes

As to browser compatibility, this causes only problems in IE. The tag is in HTML specified as not having an end tag , so it’s legit to just use without an end tag. However IE6 thinks otherwise and the entire content after the tag is in such case placed as child of the element in the HTML DOM tree. This can cause at first sight unexplainable problems in Javascript/jQuery/CSS, i.e. the elements being completely unreachable in specific selectors like html>body, until you discover in the HTML DOM inspector that there should be a base (and head) in between.

A common IE6 fix is using an IE conditional comment to include the end tag:


If you don’t care about the W3 Validator, or when you’re on HTML5 already, then you can just self-close it, every webbrowser supports it anyway:
Closing the tag also instantly fixes the insanity of IE6 on WinXP SP3 to request// <![CDATA[
resources with an relative URI in src in an infinite loop.

Another potential IE problem will manifest when you use a relative URI in the tag, such as or . This will fail in IE6/7/8. This is however not exactly browser’s fault; using relative URIs in the tag is namely at its own wrong. The HTML4 specification stated that it should be an absolute URI, thus starting with the http:// or https:// scheme. This has been dropped in HTML5 specification. So if you use HTML5 and target HTML5 compatible browsers only, then you should be all fine by using a relative URI in the tag.
// ]]>