.NET Development Examined

MVC and DataTables Part III Page 2

Monday, December 19, 2011

We will be using several jQuery libraries, all of which need to be added in our @section top area:

<script src="../../Scripts/jquery.form.js" type="text/javascript"></script> <script src="../../Scripts/jquery.blockUI.js" type="text/javascript"></script> <script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script> <script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

The first line for jQuery Form will work the magic of hiding/showing our editing forms. The next line is for blockUI. This library will allow us to put up a “wait” cursor when the client is waiting on the server for updates. The next two lines allow us to do some client side validation.

With our jQuery Form library reference we can now use it to hide the edit/delete forms by placing the following in the $(document).ready portion of our JavaScript:

$("#dialog-edit").dialog({ height: 250, width: 400, modal: true, autoOpen: false, resizable: false }); $("#dialog-delete").dialog({ height: 250, width: 400, modal: true, autoOpen: false, resizable: false, buttons: { Cancel: function () { $(this).dialog("close"); } } });

The $(“#dialog- portion is using the jQuery selector to find our forms by their ID, then the .dialog is transforming the div to a hidden form. The options being passed are pretty self-descriptive: height, width, etc. The major difference on the delete form is that we are defining a cancel button. While not completely necessary (the user can always click the ‘x’ to close the form) it does illustrate some of jQuery Form’s capabilities.

Running the project now should show a clean page, with the forms hidden and only the table showing. However we don’t yet have a way to trigger the forms. The work follow will follow this process:

  1. First we need to select a row (for update/delete) 
  2. Populate the form with the selected information 
  3. Open the form, tell the form what to do 
  4. Finally handle the results of the form’s action.

Row selection – row selection in DataTables is pretty easy. Simple add the following code to the $(document).ready script section:

$("#employees tbody").click(function (event) { $(oTable.fnSettings().aoData).each(function () { $(this.nTr).removeClass('row_selected'); }); $(event.target.parentNode).addClass('row_selected'); });

This looks for the tbody of employees div and adds a click event. When a cell is clicked it cycles through the entire table collection removing any existing occurrences of ‘row_selected’ class. It then adds the ‘row_selected’ class to the parent of the cell.

Note: If you wanted to support multi-select you could easily modify this by removing the .each loop and changing the .addClass to add/remove the ‘row_selected’ based on the current class.

To populate and open the form we need to have something to trigger the action. In this example we will add simple links at the top of the grid for Create, Edit, and Delete.

Each of these actions get their own click handler added in the $(document).ready JavaScript.

//--------------------------------------------------------------------------- // Add a click handler for the create row //--------------------------------------------------------------------------- $('#create').click(function () { //Initialize the form $('#edit-EmployeeID').val(''); $('#Name').val(''); $('#Email').val(''); $('#Phone').val(''); //Open the dialog $('#dialog-edit').dialog({ title: 'Create' }); $('#dialog-edit').dialog('open'); }); //---------------------------------------------------------------------------

The create event is the simplest of the three. We use jQuery to find the ID of each input tag and ensure it is blank by setting it to an empty string. Once the values are blanked out it calles the jQuery Form option to set the form title to ‘Create’, then opens the form. Note that it is necessary to blank out the values because the form could have been previously populated with the edit click event, which we will look at next.

//--------------------------------------------------------------------------- // Add a click handler for the edit row //--------------------------------------------------------------------------- $('#edit').click(function () { //Get the existing values for the selected row var anSelected = fnGetSelected(oTable); var rowdata = $('#' + anSelected[0].id).closest('tr').children('td'); //Initialize the form $('#edit-EmployeeID').val(anSelected[0].id.replace('row-', '')); $('#Name').val($.trim(rowdata.eq(1).text())); $('#Email').val($.trim(rowdata.eq(2).text())); $('#Phone').val($.trim(rowdata.eq(3).text())); //Open the dialog $('#dialog-edit').dialog({ title: 'Edit' }); $('#dialog-edit').dialog('open'); }); //---------------------------------------------------------------------------

The edit event is a little more complex. First we need to get the values of the selected row. To accomplish this we call a function fnGetSelected(), which we will show later. For now just know that this function returns the node representing the currently selected row in the table. The next line assigns the cell contents of that row to the ‘rowdata’ array variable by using the jQuery .closest(‘tr’) to grab the row, then .children(‘td’) to get the collection of the children.

Now that we have all the row data we fill in the form. For the EmpllyeeID we are removing the ‘row-‘ portion of the row id, leaving us with the integer ID in the database. The next three values come straight from the rowdata array, giving us the Name, Email, and Phone values.

Once the values are filled in we set the title of the form to ‘Edit’, then open the form.

//--------------------------------------------------------------------------- // Add a click handler for the delete row //--------------------------------------------------------------------------- $('#delete').click(function () { var anSelected = fnGetSelected(oTable); var rowdata = $('#' + anSelected[0].id).closest('tr').children('td'); //alert("Delete " + anSelected[0].innerHTML); //alert("Name=" + rowdata.eq(0).text()); $('#delete-EmployeeID').val(anSelected[0].id.replace('row-', '')); $('#delete-name').html($.trim(rowdata.eq(1).text())); //Open the dialog $('#dialog-delete').dialog('open'); }); //---------------------------------------------------------------------------

The delete uses the same process as the edit form, except we only display the Name value.

Next Page


Add Comment