Wijmo Wednesday: Grid Magic

January 18 2012

Ladies and Gentlemen, sit down and sit back. I’m about to show you something that will astound and amaze you. If you look over here in the center ring, you will see an ordinary table. It has a header, and a body, but nothing else! Just to prove that I have not done anything to the grid, I will show you that there is nothing under my sleeves.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>Wijmo Magic</title>  
    <!--jQuery References-->  
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>  
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>  
    <!--Theme-->  
    <link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet"  
        type="text/css" title="rocket-jqueryui" />  
    <!--Wijmo Widgets CSS-->  
    <link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0b2.min.css" rel="stylesheet"  
        type="text/css" />  
    <!--Wijmo Widgets JavaScript-->  
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.0.0b2.min.js" type="text/javascript"></script>  
    <script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0b2.min.js" type="text/javascript"></script>  
    <style type="text/css">  
        table  
        {  
            width: 100%;  
        }  
        table, th, td  
        {  
            border: 1px solid black;  
        }  
    </style>  
</head>  
<body>  
    <table>  
        <thead>  
            <tr>  
                <th>  
                    First Name  
                </th>  
                <th>  
                    Last Name  
                </th>  
                <th>  
                    Department  
                </th>  
                <th>  
                    Salary  
                </th>  
            </tr>  
        </thead>  
        <tbody>  
            <tr>  
                <td>  
                    Rich  
                </td>  
                <td>  
                    Dudley  
                </td>  
                <td>  
                    Evangelism  
                </td>  
                <td>  
                    $500000  
                </td>  
            </tr>  
            <tr>  
                <td>  
                    Kevin  
                </td>  
                <td>  
                    Griffin  
                </td>  
                <td>  
                    Evangelism  
                </td>  
                <td>  
                    $1000000  
                </td>  
            </tr>  
            <tr>  
                <td>  
                    Chris  
                </td>  
                <td>  
                    Bannon  
                </td>  
                <td>  
                    Product Management  
                </td>  
                <td>  
                    $1500000  
                </td>  
            </tr>  
            <tr>  
                <td>  
                    Johnny  
                </td>  
                <td>  
                    Doe  
                </td>  
                <td>  
                    Developer  
                </td>  
                <td>  
                    $30000  
                </td>  
            </tr>  
        </tbody>  
    </table>  
</body>  
</html>

And now, stand back while I wave my magic wand over the table and recite the magic words.,  **Alakazam**! [![image](//cdn.mescius.io/assets/developer/blogs/legacy/wijmo/2012/01/image_thumb1.png "image")](//cdn.mescius.io/assets/developer/blogs/legacy/wijmo/2012/01/image1.png) Please please!  Hold your applause!  While I can see that your excitement is uncanny, you must know that it’s not magic.  It’s Wijmo!  What’s amazing is that anyone can turn a boring table into an amazing looking grid in one line of code.

<script type="text/javascript">  
    $(document).ready(function () {  
        $("table").wijgrid();  
    });  
</script>

Yup, that’s it. Just call the wijgrid() method on any table and it’ll take care of the rest. And heck, with ThemeRoller support, you can quickly change the theme to look like you want it too! Kevin Griffin KevinG@ComponentOne.com Follow me on Twitter

MESCIUS inc.