Tuesday 27 November 2012

How to show/hide Grid columns on the fly?

The solution is simple, but quite elaborate to make it work. Here's the complete example using JQuery. You can customize your own way.

First, reference JQuery and create the dynamic list of column names. Then design a checkbox accordingly and hook up onclick event for each:
  
   <script type="text/javascript" src="JS/jquery-1.3.js"></script>  
   <script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("#tblExample th").each(function() {
            var iIndex = $(this).closest("th").prevAll("th").length;
            var colName = $(this).html();
           
            $("#divColumns")
                .append(
                    $(document.createElement("input")).attr({
                         id:    iIndex
                        ,name:    iIndex
                        ,value:    colName
                        ,type:    'checkbox'
                        ,checked:true
                    })
                    .click( function( event )
                    {
                        var cbox = $(this)[0];
                        ShowHideColumn(cbox.id, !cbox.checked);
                    } )
                )
                .append(
                    $(document.createElement('label')).attr({
                        'for':    iIndex
                    })
                    .text( colName )
                ).
                append("&nbsp;&nbsp;&nbsp;");
        });

        $("#tblExample th").click(function() {
           var iIndex = $(this).closest("th").prevAll("th").length;
           ShowHideColumn(iIndex, true);
        });
       
        function ShowHideColumn(iIndex, isHide)
        {
           try{
               var display = "table-cell";
               if(isHide == true) display = "none";
              
               $("#tblExample").find("tr").each(function() {
                  $(this).find("td:eq(" + iIndex + ")").css("display", display);
                  $(this).find("th:eq(" + iIndex + ")").css("display", display);
               });
           }
           catch(e) { alert(e);}
        }
       
        $("#tblExample th").mouseover(function() {
            $(this).css('cursor','pointer');
        });
    });
    </script>

And here is the implementation of HTML markups in body section:
        <div id="divColumns">
        Put a yes/no check on each column name below to show/hide column correspondingly:<br />
        </div>
        <br />
        Or you can click on header to hide the column at once:<br />
        <table id="tblExample" cellpadding="0" cellspacing="0" border="1" style="border:solid 1px gray;">
            <thead>
                <tr style="background-color:Gray;">
                    <th>ID</th>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>0001</td><td>Henry</td><td>35</td></tr>
                <tr><td>0002</td><td>Lucky Luke</td><td>33</td></tr>
                <tr><td>0003</td><td>Winly</td><td>30</td></tr>
            </tbody>
        </table>

RESULTS:

 Try to uncheck the "Age" checkbox and see how it works. Here's the result:









Happy coding,

Wednesday 21 November 2012

6 Key Points for a good IT management job

I've been working with IT management jobs for more than 5 years. I wanna share with you 6 key points which will make your job more fruitful. That is: Job Description, Diversity, Inspiration/Motivation, Rational Schedule, End-to-end Approach and Pecking Order.


1)   Job Description: Clearly-defined Job Description is the key. Develop well-defined standards and clear evaluation criteria in the first place, or as early as possible so employees can gauge their success and we don’t have to remedy the situation at some point in the future.

2)    Diversity: Value diversity in the team. Someone might not smart but work hard, then it has compensations. Think about giving detailed tasks to people who are big-picture oriented or assigned jobs that required toughness to people who are essentially very harmonious in nature. Either way doesn't work. So build on strengths, and to compensate for weaknesses. It’s a trade-off in the team. Remember: “The whole is greater than the sum of its parts”.

3)    Inspiration/Motivation: Inspire team members to grow their skills and develop on the team. Annually, each team member is forced to learn something new and share with others (seminar, forum...). Lack of training kills productivity in the long run.

4)    Rational Schedule: Ensure appropriate schedule for different teams and persons. Tightening schedule kills the creativity and quality in the long run. But loosen schedule causes diminishing focus. Has a balanced development process; are not too gentle or too hasty in software making process. In short, keep in minds 2 important laws:
  • Parkinson's Law: Work expands so as to fill the time available for its completion. (Công việc lúc nào cũng phình ra để lấp đầy thời gian cho phép)
  • Pareto law 80 20 principle.
5)    End-to-end Approach: The work speed, productivity is pretty much same no matter it is just the right begining of project life cycle or going down to the wire (không có giới hạn khoảng cách giữa các điểm khác nhau. Tốc độ làm việc, hiệu quả đều giống nhau cho dù đó là thời điểm bắt đầu hay cuối dự án). The key thing in this approach is "Bring development processes closer to the customers". Have the customer actively participate in the design and offer feedback throughout the development process. This allows both the team and customer to better align their expectations and needs.

6)    Pecking Order: Exercising authority in the team is a indispensable measure to minimize negative conflict and make sure that “running scared” is a good thing to steer the team on the right track.