Creating sortable, jQueryUI-based admin tables

Topics: Customizing Orchard
Oct 16, 2012 at 9:15 PM
Edited Oct 16, 2012 at 9:18 PM

Having worked with the admin interface to manage a newly 'live' site I'm finding it impossible to handle multi-paged data without the ability to sort the table via the conventional, 'click column header' pattern. Also in desperate need of a 'select all' checkbox.

Is there a technical reason these are _not_ part of the core behavior of all Orchard tables? Shouldn't it be a reasonably simple matter of baking in the jQueryUI Grid to all tables?

Coordinator
Oct 16, 2012 at 9:31 PM

Not technical, it's just that nobody's contributed it.

But no, it's not a simple matter of baking jQueryUI grid, as the lists are server-paginated.

Oct 17, 2012 at 8:03 PM

I've worked with a couple jQuery-based grids where ajax interactions with the server drive the grid just fine. So the question turns to how complex is constructing ajax calls from with the View (compared to non-Orchard MVC apps).

I'll be happy to turn back whatever sort of grids I come across. Spent a little bit of time with the Select All issue last night and found the following...

Users/Views/Admin/Index

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

            $("#selectAll").toggle(
            function() {
                $('input[type=checkbox]').attr('checked', 'true');
                $("#selectAll").text("Unselect All")
            },
            function() {
                $('input[type=checkbox]').removeAttr('checked');
                $("#selectAll").text("Select All")
            });
        });
    })(jQuery);
</script>

then in the table:
 <th scope="col"><a href="#" id="selectAll">Select All</a></th>

Except that I had to add a Require(jQuery) within this view. Is there a better way to inject jquery code at this point?

Oct 17, 2012 at 8:14 PM

I don't think there's anything wrong with including jquery from the template. I do it all the time, either at the beginning or the end of the .cshtml like this: 

@{
    Script.Require("jQuery");
}

Coordinator
Oct 17, 2012 at 9:46 PM

Cool, please make a pull request when you are ready. I would add a preventDefault in that event handler, so the page doesn't navigate to #.