Have generated dropdown with original value as default, and update on change.

crash85

My code is iterating along with all of the help I have gotten here so far! Thank you for that.

Below is my non-ajax version. (The ajax version requires placing the follow on actions in a function that isn't called until the ajax is complete.)

Problem 1:
I have a dropdown that appears in one column when a row is selected. The dropdown displays all of the unique options for that column. The problem is, it's defaulting to the first option alphabetically when it is created. I want it to default to the orignal value in that cell.

Problem 2:
If you select a row, and then change the dropdown value to something else, it isn't captured anywhere. I need the selected value to be the new value for that cell.

The desired functionality would be that a user could select a series of rows, change the dropdown to what they wanted for each row, and then download that using the download selected button.

Fiddle: https://jsfiddle.net/crashvector/f1q8w2d5/17/

rf1234

I see the issue. You don't seem to use Datatables Editor though and do it all manually. If you chose Editor with inline editing this would work fine ... Maybe you want to consider buying a license?! (I am not associated with Spry Media. But I am very much convinced of the benefits of using Editor. Licenses are cheap, too.)

crash85

I actually have no idea what the editor is! I was pointed to datatbles as a possible solution to what I am doing. I am building a prototype interface in order to get my management to pay someone who actually knows what they are doing. I might be able to get approval to purchase a license, I'll have to look into it!

rf1234

I was in a similar situation and thought I would need to hire a front end developer because I had no clue. But then I discovered Editor and Data Tables - and did it all by myself ...

This has lots of examples on inline editing with Editor:
https://editor.datatables.net/examples/inline-editing/index.html

kthorngren

There are a couple things:

1. When building the options you had ${ item == row.data().category ? 'selected' : ''} but your data object is Category. Change the code to ${ item == row.data().Category ? 'selected' : ''}.
2. You need to an event to update Datatables each time the select is changed. My suggestion is to use cell().data() to update Datatables.

I updated your example to show these changes:
https://jsfiddle.net/7a8L92fn/

Note that I added an id to your select for the change event. I didn't look but my code assumes you are removing the select from the HTML as you can only have one id. To show that Datatables recognizes the change you can search for the value you changed to to verify the row is in the search results.

Kevin

crash85

I finally had a free moment to look at this for a moment. Thank you for the responses. I am looking at the editor examples, but not entirely sure what to do with it.

As for the fiddle, changing the category names to match definitely did the ticket for the default value! Thank you.

Does my download button need to be "moved" somewhere else in the script, or is there something I need to make it so that the values that are in the drop downs are the ones that are downloaded? (Currently if I change a value in the dropdown, the download contains the original value.)

kthorngren

The example seems to work. I changed the select option to fresh then clicked download and this is the result:

Category,Name
fresh,01_p11017

If the problem is in your code, not the example, then you need to implement number 2 above. I added this event to take care of updating the Datatables data cache:

('#test').on('change', function () {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    var row = $(this).closest('tr');

        var cell = dataTable.cell(row, 6);
        cell.data(valueSelected)

})

Kevin

crash85

Hmm, maybe I looked at the wrong file when I used the download from the fiddle. I'll hop in my computer in a bit and check again.

Thanks for all the help again, you've been a lifesaver.

crash85

Using the fiddle, when I select multiple rows and begin changing them, only some of the changes make it into the download. Hmm, is the multiple selection/change/download working for you?

crash85

As I'm playing with this on the fiddle, and my code, I'm seeing odd and inconsistent behavior. Sometimes when you alter the data with the dropdown, it causes the dropdown to dissapear and the new value becomes the stored value. Other times, selecting a different option causes the dropdown to stay visible without storing the new value.

kthorngren

I haven't looked but I would guess it has to do with the input ID. I mentioned this above that it assumes only one input is open at a time. If you want multiple you will need to find a way to generate unique input IDs. That's just a guess for the problem.

Kevin

crash85

Hmm, I wonder if this question will also solve the problem here then?

https://datatables.net/forums/discussion/55825

I have a hidden column that has unique IDs for each row.

crash85

I started butchering this and have gotten lost. From what I have come across, my rowId can't be a number. So I can use a function to fix it like so:

rowId: function(a) {
    return 'id_' + a.ID;
  },

Reference: https://stackoverflow.com/questions/36663037/datatables-rowid-starting-with-a-number-issue/36663176#36663176

But I'm not sure how to incorporate that into the way you added id="test"

http://jsfiddle.net/crashvector/q6af23y9/31/

allan

DataTables itself doesn't mind about rows having an number as an id. It only becomes tricky when you have multiple tables, because the risk of a clash of id becomes really high and all bets are off at that point.

In your code you are using <select id="ID"> and then selecting based on #ID. But you might have multiple elements with that id on the page - who knows which it will select (usually the first, but perhaps not always).

I would suggest adding your change event directly onto the <select> element - e.g.:

.html(
  $('<select/')
    .on('change', function () { ... } )
    .append( ... options ... )
);

That way you don't need to mess around with trying to keep id's unique.

Allan

crash85

I was hoping to knock out two birds with one stone when it comes to the ID's. I'm not entirely sure how to do it, but I was hoping to designate the hidden ID column as the column that is used for id's. I would append some text in front of the number (since I have some samples that are two digit number.)

The idea being that the new id would serve to track the changes, as well as allow me to select a group of rows by designating the id's in the row-select function.

crash85

I am trying to do some work here on the rowid and selecting via a button: http://live.datatables.net/rixufida/1/edit?js,console,output

(I am cross posting this comment to this thread as well since the original question has been answered here.) https://datatables.net/forums/discussion/55825

The console log changes dramatically when changing from "dataTable.row(rowSelector)" to "dataTable.rows(rowSelector)" Is that expected?

 {
      text: 'Select Default Library 1',
      action: function (e, dt, node, conf) {
     var rowSelector = [ '#sampleid_10', '#sampleid_2', '#sampleid_401'  ];
     var row1 = dataTable.rows(rowSelector);
     var data1 = row1.data();
     console.log(data1);
     alert('This button will automatically check all rows that match predefined list 1 using the hidden ID column.'+ rowtest);
      }
    },

The goal here is to trigger the row select function for the rowSelector array.

allan

The console log changes dramatically when changing from "dataTable.row(rowSelector)" to "dataTable.rows(rowSelector)" Is that expected?

Yes, the two methods return different things - see rows() and row().

but I was hoping to designate the hidden ID column as the column that is used for id's. I would append some text in front of the number (since I have some samples that are two digit number.)

Looks like you've got that working. You don't technically need the prefix in html5 since a single number is a valid id, but its good to prevent a possible class if you have another table that also has numeric ids.

The goal here is to trigger the row select function for the rowSelector array.

You are using:

    {
      text: 'Select Default Library 1',
      action: function defaultselect1 () {
     }
    },

That isn't calling your defaultselect1 function at the bottom of the page. Its just creating a new function called defaultselect1.

Use:

action: function () {
  defaultselect1();
}

Allan