More Grid Magic with Wijmo

Last week, I did a webcast on building Grids with Wijmo and ASP.NET MVC. If you didn’t get a chance to see it, the video should be available soon. However, this blog post is designed to tell you everything you need to know about using Wijmo Grids in your applications. If you’re converting existing into Grids, you’ll want to give this post a quick read. Done? Cool, because now we’re going to add a whole bunch of awesome to our new grids. For this example, we’re going to start with a new grid:

<table id="tableDepartmentInformation">  
    <thead>  
        <tr>  
            <th>First Name  
            </th>  
            <th>Last Name</th>  
            <th>Department</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>Kevin</td>  
            <td>Griffin</td>  
            <td>Marketing</td>  
        </tr>  
        <tr>  
            <td>Rich</td>  
            <td>Dudley</td>  
            <td>Marketing</td>  
        </tr>  
        <tr>  
            <td>Chris</td>  
            <td>Bannon</td>  
            <td>Development</td>  
        </tr>  
        <tr>  
            <td>Johnny</td>  
            <td>Doe</td>  
            <td>Management</td>  
        </tr>  
        <tr>  
            <td>Tommy</td>  
            <td>Tutone</td>  
            <td>IT</td>  
        </tr>  
        <tr>  
            <td>Joe</td>  
            <td>Montana</td>  
            <td>IT</td>  
        </tr>  
        <tr>  
            <td>Ingio</td>  
            <td>Montoya</td>  
            <td>Freelance</td>  
        </tr>  
        <tr>  
            <td>Luke</td>  
            <td>Skywalker</td>  
            <td>Jedi</td>  
        </tr>  
    </tbody>  
</table>  

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

Sorting

First thing we want to do is add basic sorting to this application. All we have to do is add the allowSorting property to the wijgrid method.

$("#tableDepartmentInformation").wijgrid(  
                {  
                    allowSorting: true                       
                });  

Wasn’t that easy!

Paging

Now let’s say you get a request from your clients to add paging to the grids. This is a common request since grids can quickly get out of hand when you’re dealing with a lot of data. To quickly enable paging, you’ll want to set the allowPaging property. By default, WijGrid will default to a pageSize of 10, but you can override that by setting pageSize yourself.

$("#tableDepartmentInformation").wijgrid(  
{  
     allowPaging: true,  
     pageSize: 2  
});  

Filtering

A filter is a component of the grid that allows you to filter down results by column values. For example, if you want to return all users in the grid whose Department is equal to Marketing, you can use a filter for that. To add this feature, you’ll want to set the showFilter property.

$("#tableDepartmentInformation").wijgrid(  
{  
     showFilter: true  
});  

Grouping

A group is a logical ordering of rows by the columns that you select. For example, we want to group all the rows in our grid by their Department. A filter won’t work because we still want to see all departments, and sorting kinda works, but it doesn’t allow you to open or collapse the groups. To enable grouping on this grid, we’ll want to set the allowColMoving property to true as well as the showGroupArea property. When this is done, you will be able to move columns to the “group area” and Wijmo will group them logically for you.

$("#tableDepartmentInformation").wijgrid(  
{  
     allowColMoving: true,  
     showGroupArea: true  
});  

Wrapping up

There you have it! In a few lines of code, we took our new WijGrid and added sorting, paging, filtering, and grouping. I hope this aids you in your travels of Wijmo. In an upcoming post, I’m going to talk about moving all this functionality to the server for performance increases galore! Kevin Griffin KevinG@ComponentOne.com Follow me on Twitter