Chlodny series Day 10: Clear selection

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’
Advertisements
This entry was posted in MVC, Web and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s