Friday, June 24, 2016

Missing close button icon in jQuery UI Dialog

When the jQuery UI dialog is implemented there are few things you need to be aware of.

1. Missing image sprites

Verify jQuery UI base theme is referenced.

2.Using bootstrap along with jQuery

Make sure you reference bootstrap.js before the jquery-ui js as shown below.


Thursday, June 16, 2016

Create responsive table

There are several ways to make a table responsive. Here I am showing some of the ways that can be achieved.

1. Using bootstrap
Bootstrap comes with built-in class .table-responsive that makes the table scroll horizontally on small devices.

<table class="table-responsive " >


2. Using media query
You can use media query to behave table look and feel differently on mobile devices. The following code sample took from a article posted in

 only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px)  {

  /* Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr {
   display: block;

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
   position: absolute;
   top: -9999px;
   left: -9999px;

  tr { border: 1px solid #ccc; }

  td {
   /* Behave  like a "row" */
   border: none;
   border-bottom: 1px solid #eee;
   position: relative;
   padding-left: 50%;

  td:before {
   /* Now like a table header */
   position: absolute;
   /* Top/left values mimic padding */
   top: 6px;
   left: 6px;
   width: 45%;
   padding-right: 10px;
   white-space: nowrap;

  Label the data
  td:nth-of-type(1):before { content: "First Name"; }
  td:nth-of-type(2):before { content: "Last Name"; }
  td:nth-of-type(3):before { content: "Job Title"; }
  td:nth-of-type(4):before { content: "Favorite Color"; }
  td:nth-of-type(5):before { content: "Wars of Trek?"; }
  td:nth-of-type(6):before { content: "Porn Name"; }
  td:nth-of-type(7):before { content: "Date of Birth"; }
  td:nth-of-type(8):before { content: "Dream Vacation City"; }
  td:nth-of-type(9):before { content: "GPA"; }
  td:nth-of-type(10):before { content: "Arbitrary Data"; }

 /* Smartphones (portrait and landscape) ----------- */
 @media only screen
 and (min-device-width : 320px)
 and (max-device-width : 480px) {
  body {
   padding: 0;
   margin: 0;
   width: 320px; }

 /* iPads (portrait and landscape) ----------- */
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body {
   width: 495px;


I personally like the second option as it will make more smoother look in mobile devices.


Thursday, June 9, 2016

LINQ Error "There is already an open DataReader associated with this Connection which must be closed first"

When working with link queries I recently got this error message, which states "There is already an open DataReader associated with this Connection which must be closed first" .

This error is caused by an already open connection to the database that is not closed. Adding a .ToList at the end of the LINQ query will resolve this issue.

 var vacancies = db.Vacancies.Where(v => v.User.Username == userName )



Tuesday, May 31, 2016

Google Autocomplete for Addresses and Search

If your application includes an address text field that user should be specified, Google Autocomplete for Addresses and Search  can help users supply the details. This is very easy to integrate and efficient.

Read here for more information.


Thursday, May 26, 2016

Hide elements when pritning the web page

When it comes to print a given web page, there may be things that we do not wish to appear in the print preview or when the page is actually printed. There are few ways to solve this issue.

1. Write print specific page and redirect to that page on print.
2. Use CSS to hide elements on print.

Here I am going to show how we are going to achieve this using CSS.

1. Write a class for non printing items in your CSS file (such as. .no-print)
2. The class definition would be similar to shown below.

/*use media query to style page when printing*/
@media print
    .no-print, .no-print *{
        display: none !important;
        height: 0;

/*removes href values when printing */
    a[href]:after {
    content: none !important;

3. Refer the class in the elements that needs to be hidden

  • Hyper link and image
<a href="" target="_blank" class="no-print">
                                            <img  class="no-print"     src="~/Content/Styles/_Default/image.png" height="20" width="20">
  • Button 
  •   <input type="button" value=Apply" class=" no-print" />

Monday, April 25, 2016

Bootstrap layout generator

Since twitter introduced BootStrap, there has been plenty of resources that aid in building bootstrap layouts. Now the developers simply can try one of free online layout builders and generate the layout online.
This article discusses some of the available online bootstrap layout generators and I found layoutit to be very use full.


Tuesday, April 12, 2016

ASP.Net keep textbox passoword on postbacks

As a security measure , text inputted to a password textbox is cleared on post backs. If any of you come across a situation where it needs to be keep password visible on post backs, it would be not as straightforward as you might have think.

Achieving this objective involves following steps.

1. Textbox definition (in the .aspx page)

2. PageLoad code behind
 txtAdminPWD.Attributes("type") = "password"

 If ViewState("Password") IsNot Nothing Then
            txtAdminPWD.Attributes.Add("value", ViewState("Password").ToString())
 End If

3.  Password stored to the textbox in the value and in view state (can be inside a method to populate the password )
ViewState("Password") = Decrypt(cUser.AdminPWD).ToString()
                txtAdminPWD.Attributes.Add("value", Decrypt(cUser.AdminPWD).ToString())

4.Use the javascript PageLoad to restore password textbox value
function pageLoad() {
                setTimeout(function () {
                }, 10);

5. Clearing the password
txtAdminPWD.Text = ""
txtAdminPWD.Attributes.Add("value", txtAdminPWD.Text)