MVCContrib Grid alternatives for MVC4

Question

I'm working on a greenfield MVC4 project and am in need of a good MVC-grid to support paging and sorting (and i want to handle the paging and sorting myself, not in the grid). I also like the grid to be lightweight (as i want to be in control of html markup and query parameters) and be able to use lambda expressions for columns.

I have previously used MvcContrib Grid in an older MVC2 project and was quite happy with the extensibility. I have experimented a bit with the webhelper grid in this project but it doesn't seem to be nearly as extensible as the MvcContrib Grid. The MvcContrib project however doesn't appear to be as actively maintained anymore. As far as I can see the main version is for MVC2 and I don't really want to have compatibility issued in a brand new greenfield project.

Does anyone know if the MvcContrib project is expected to release a new version for MVC4? Are there any other lightweight and up to date grids for MVC nowadays?

UPDATE I ended up writing my own grid component (and a pager component) with a syntax style loosely based on MvcContrib with the possibility to swap renderers.

Answer 1

Have you looked into jQuery Datatables http://www.datatables.net/

I recently migrated from MVCContrib Grid to jQuery Datatables. They are pretty awesome.

Here is how we initialize the table.

BindTable: function () {
        var that = this;
        this.Table = $('#sorting-advanced');
        var tableStyled = false;

        this.Table.dataTable({
            'aoColumnDefs': [
                { 'aTargets': [1], 'sType': 'num-html' },
                { 'aTargets': [3], 'sType': 'currency' },
                { 'aTargets': [5], 'bSortable': false, }
            ],
            'sPaginationType': 'full_numbers',
            'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
            'fnDrawCallback': function (oSettings) {
                // Only run once
                if (!tableStyled) {
                    that.Table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select').styleSelect();
                    tableStyled = true;
                }
            }
        });
    },

Here is the Razor View

  <table class="table responsive-table" id="sorting-advanced">
            <thead>
                <tr>
                    <th scope="col">Date</th>
                    <th scope="col">Document #</th>
                    <th scope="col">Tenant</th>
                    <th scope="col">Amount</th>
                    <th scope="col" class="align-center">Reconciled</th>
                    <th scope="col" class="align-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Items)
                {
                    <tr>
                        <td>@item.Date.ToShortDateString()</td>
                        <td>
                            <a href="@Url.Action("Edit", new {id = item.Id})">@item.Number</a>
                        </td>
                        <td>@item.Contact.DisplayName</td>
                        <td>@item.Amount.ToString("C2")</td>
                        <td class="align-center">
                          @Html.CheckBoxFor(x => item.Reconciled, new {id = item.Id})
                        </td>
                        <td class="align-center vertical-center">
                            <span class="button-group compact">

                                <a href="@Url.Action("Edit", new {id = item.Id})" 
                                   class="button icon-pencil with-tooltip"
                                   title="Edit Payment"></a>

                                <a href="#" id="@item.Id" 
                                   class="button icon-trash with-tooltip confirm-delete"
                                   title="Delete Payment"></a>
                            </span>
                        </td>
                    </tr>
                }
            </tbody>
        </table>