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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Robb HillSenior .Net DeveloperAuthor Commented:
Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.