Show tooltip in your dropkick dropdowns

Dropkick is a good css library that can be used to make all dropdowns look and feel better for end users.

Normally dropkick 1.0 doesn't provide any property / function for adding a tooltip to each option for its select / dropdown menu. When the option gets longer, it is always better to have a title for each item.

To do so, we need to change the a bit of the dropkick js file and also to add a title attribute for the option in the select control.

Add a title to each item of your drop down control.

  dropdownlist.Items[i].Attributes.Add("title", dropdownlist.Items[i].Text);  

And change the dropdown.js file as below; [Search and replace the lines with below codes]

 // HTML template for dropdown options  
   optionTemplate = '<li class="{{ current }}"><a data-dk-dropdown-value="{{ value }}" title="{{ title }}">{{ text }}</a></li>',  

 oTemplate = oTemplate.replace('{{ title }}', view.options[i].title);  

And it will show you the tooltip as below;

The HTML generated for dropkick will have the title as;

 <li class="">  
 <a title="My record about title" data-dk-dropdown-value="26924">My record about title </a>  
 </li>  

If you apply a bootstrap, you will find even more cooler tooltips with dropkick...

Happy Coding...!

11- 02- 2016 - Rally against ETCA - Dr Anuruddha Padeniya

Add a Plus Mark on a HTML table TD

As I am involved with developing a scheduler for a web application, I thought of publishing an interesting part like below;

So here you see a plus mark on each top left corner inside the TD tag.

Let's see how we do this with simple CSS and HTML.

Copy the following css into your file.

 .note {  
   font-size: 10px;  
   left: -8px;  
   position: relative;  
   top: -8px;  
 }  
 .note::after {  
   border-bottom: 20px solid transparent;  
   border-right: 20px solid transparent;  
   border-top: 20px solid #337ab7;  
   content: "";  
   display: block;  
   height: 0;  
   left: 0;  
   position: absolute;  
   top: 0;  
   width: 0;  
 }  

On each TD you can add the following;

 <td>  
   <div class="note"><i data-target="#appModel" data-toggle="modal" class="fa fa-plus fa-margine"></i></div>  
 </td>  

The font awesome is used for the plus mark.

Enjoy coding :)

SQL Server - Add a NOT NULL column to an existing table

Even if the DB is designed at first time, we may need to alter some tables and add new columns or at least to change the length of them.

When a NOT NULL column to be inserted into an existing table, the following error will be thrown,

Msg 4901, Level 16, State 1, Line 1

ALTER TABLE only allows columns to be added that can contain nulls, or have a DEFAULT definition specified, or the column being added is an identity or timestamp column, or alternatively if none of the previous conditions are satisfied the table must be empty to allow addition of this column. Column 'Column1' cannot be added to non-empty table 'Table1' because it does not satisfy these conditions.

But as a short way, a nullable column can be added and then update with a value and then make it not null. See the example below,

 if not exists(select 1 from syscolumns where name='Column1' and object_name(id) = 'Table1')  
      alter table Table1 add Column1 dtDateTime null   
      go  
      update Table1 set Column1 = getdate()  
      go  
      alter table Table1 alter column Column1 dtDateTime not null       
 Go  

This will have the a NOT NULL column but be sure you have no big number of records in the table as it updates all and will take time with the number of rows in table.

Read more on MSDN here.

Happy Coding... :)