In session 9 we added paging and the selection events.  If you selected one or more rows from the top grid it would populate the bottom grid.  What if you want to remove everything from the selection grid

• Open up jQueryUILocal.htm
• Below our customers-selected table add a new div, we will give it a class name of tools.  This will hold our button controls.
• Add a buttons for our clear selection

<div class="tools">
     <button id="clearSelection">Clear selection</button>
</div>

• Next open up jQueryUIExampleLocal.js
• Add a new function to bind it to the click event of the clear selection button

jQueryExample.ClearButton = function () {
    $("#clearSelection").click(function () {
        $.observable(selected).remove(0, selected.length);
        customers.refresh();
    });
};

• What this function does it selects the selected object in the observable section of the dataviewer, removes all the rows in and then refreshes the customer dataviewer.
• The jQueryWireUp should not look like this.

jQueryExample.jQueryWireUp = function () {
    jQueryExample.GetAllCustomer();
    jQueryExample.LoadDataView();
    jQueryExample.LoadDataGrid();
    jQueryExample.PageSizeOptions();
    jQueryExample.SelectedGridOptions();
    
    customers.refresh();

    jQueryExample.ClearButton();
};

• Add some fields to the Customer selection and click the button ‘Clear selection’