MVC5 - Jquery datatables - inline crud operations

I am looking to implement a jquery datatable within an mVC 5 application.

Here is my issue...

I neeed the grid to do the following.


1)  I need to use the jquery auto complete plugin to be what generates the insert record..and have that  insert in edit mode at the top of grid.

2)  I need to have the edit and delete buttoms in each row of the jquery table.
3)  When a user clicks these buttons the cells are moved into edit mode..
I cannot find an example that does this ....It cannot be popup.  
The jquery editor does not seem to support this out of the box.


Please help get me something started


Thanks,
LVL 11
Robb HillSenior .Net DeveloperAsked:
Who is Participating?
 
zephyr_hex (Megan)DeveloperCommented:
Autocomplete:  This is no different than a regular autocomplete textbox, except perhaps the way in which you bind / trigger the autocomplete because the textbox is dynamically added.  So, associate your autocomplete with a class that's on the input, and then add your event binding when you add the input to the DOM.  For an example of the syntax for binding, look at how I bound the click event to the save button.

You'll likely want to remove the binding when you remove the input from the DOM.

The references to DataTables are in the left panel of the JS Fiddle, under External Resources.
1
 
zephyr_hex (Megan)DeveloperCommented:
This really doesn't have anything to do with MVC, as most of the work is in the view.  There is good chance you'll want to implement an AJAX call to the controller to save the updated values to the database.

You can add your CRUD controls to the DataTable at initialization using columnDefs.  You can then use jQuery to bind click events to the buttons.  When a button is clicked, use DOM traversal to find each cell.  In the case of an Edit action, you would want to replace the content of the cell with an editable HTML element, like an input.  Then, revert the cell back to an un-editable state by removing the input when the user clicks Save.

Here's a basic example:   https://jsfiddle.net/zephyr_hex/g8rb6rtp/

HTML
<table>
  <thead>
    <tr>
      <th>Rendering engine</th>
      <th>Browser</th>
      <th>Platform(s)</th>
      <th>Engine version</th>
      <th>CSS grade</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 4.0</td>
      <td>Win 95+</td>
      <td> 4</td>
      <td>X</td>
      <td></td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 5.0</td>
      <td>Win 95+</td>
      <td>5</td>
      <td>C</td>
      <td></td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 5.5</td>
      <td>Win 95+</td>
      <td>5.5</td>
      <td>A</td>
      <td></td>
    </tr>

  </tbody>
</table>

Open in new window


jQuery

$('table').DataTable({
  "columnDefs": [{
    "targets": [5],
    "data": "DocNum",
    "searchable": false,
    "orderable": false,
    "render": function(data, type, full) {
      return '<input type="button" value="Edit" class="action pointer edit">';
    }
  }]
});

$('.edit').on('click', function() {
	var row = $(this).closest('tr');
  $(row).find('td:lt(5)').each(function() {
  	var val = $(this).text();
    var input = $('<input/>', {type : "text", value : val});
    $(this).html(input);
  });
    var save = $('<button/>', {type : "button", text: "Save", class : "action pointer save"});
    $(this).parent('td').html(save);
});
$('table').on('click','.save', function() {
	var row = $(this).closest('tr');
	//consider an AJAX call to save the row values to the database.
  //this just updates the client side.
  $(row).find('td:lt(5)').each(function() {
  	var val = $(this).find('input').val();
    $(this).html(val);
  });
  var edit = $('<button/>', {type : "button", text: "Edit", class : "action pointer edit"});
    $(this).parent('td').html(edit);
});

Open in new window

0
 
Robb HillSenior .Net DeveloperAuthor Commented:
yes this is along the lines of what I am trying.  I would imagine on the edit to have a cancel...and the delete to have a confirmation.

More importantly..

How might I had an auto complete search box ...so that upon looking up some value in a list ..it would make an insert row on the top of grid...in edit mode as well.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Robb HillSenior .Net DeveloperAuthor Commented:
yes..this would need to be async as im using entity framework...but at this point was just trying to flesh out these UI issues ..and fake out the data so I can show the functionality of these buttons are working ....
0
 
Robb HillSenior .Net DeveloperAuthor Commented:
Also am I missing something in the fiddle ..i dont see where you reference the jquery datatables..

  <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
0
 
Robb HillSenior .Net DeveloperAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.