How to populate dropdownlist in column after selected option from another dropdown?

mariooo

Hi,

I have problem with populating dropdownlist in column x, after selected option from another dropdown in column y.

I was trying to use mydatatable.columns.render() but it's not working.

kthorngren

Maybe you can post an example of what you are trying to do so we can help.

Kevin

mariooo

I have 2 dropdownlists and I need to populate with values the second after select value from first dropdown.

`
$('#structure-table').on('change', 'select.team_ddl', function () {
structureTable.columns.render();
});

        {
            data: "subteam", width: "110px", className: "team_ddl",
            render: function (data, type, row) {
                var $select = $("<select></select>",
                    {
                        id: row.subteam,
                        value: data
                    });
                $.each(subteams, function (k, v) {
                    if (v.teamId == row.team) {
                        var $option = $("<option></option>",
                        {
                            text: v.name,
                            value: v.id
                        });
                        if (row.subteam === v.id) {
                            $option.attr("selected", "selected")
                        }
                        $select.append($option);
                    }
                });
                return $select.prop("outerHTML");
            }
        },
        {
            data: "owner", width: "110px",
            render: function (data, type, row) {
                var $select = $("<select></select>",
                    {
                        id: row.owner,
                        value: data
                    });
                $.each(owners, function (k, v) {
                    var $option = $("<option></option>",
                        {
                            text: v.name,
                            value: v.id
                        });
                    if (row.owner === v.id) {
                        $option.attr("selected", "selected")
                    }
                    $select.append($option);
                });
                return $select.prop("outerHTML");
            }
        }

`

Rusty Ballinger

I would like to see the answer to this too.

kthorngren

The problem with doing this is columns.render doesn't have a global view of the Datatables data in order to build the options. With that in mind I put together an example:
http://live.datatables.net/yogayixa/1/edit

I performs the ajax request outside of Datatables and builds a couple objects (subteams and owners) that can be used by columns.render to build the options. Also the row data includes a property (selected_id) which keeps track of the selected option for the row. The value is updated in the select change event.

You will notice that the initial display of the table is slow. Its due to the rendering of the options in columns.render. There is a slight delay when the selection is changed. This definitely needs optimization if there is much data. I based my render code on your above snippet but wasn't sure of your data structure so used something simple.

I hope you or someone else can improve my example and post one that works well.

Kevin

mariooo

@kthorngren Thank you very much, I fixed your example and it works like I want!

` //updated the row's sleected value
data.team = parseInt(changed); <----- changed was as string

//invalidate the data
row.invalidate(); <------ i just need to invalidate because when redraw then it back to values at begin`

However I don't know why table isnt catch my on change event. So I added onchange='changeDDL(this);' to select in render function.

I also have this delay (freeze) of page while table is loading data... It's because of the rendering function for select options and I don't know how to optimize it. Any ideas? This is annoying and I need to find a solution for this.

Regards,
Mariusz

kthorngren

data.team = parseInt(changed); <----- changed was as string

Thats why I changed from === to ==. Either way works.
if (row.selected_id == v.id) { //use == instead of ===

row.invalidate(); <------ i just need to invalidate because when redraw then it back to values at begin

Not sure without seeing your code. As I understand it, If you don't use draw() the render function only runs for the display operation. If you want to do updates for filtering and sorting operations then you need to use .draw().

However I don't know why table isnt catch my on change event.

I put it in initComplete to make sure Datatables was ready before defining the event.
$('#example tbody').on('change', 'select.team_ddl', function ()

delay (freeze) of page while table is loading data.

The problem with the code is it builds the options list every time it renders the cell which can be up to 4 times for each cell. See the orthogonal data doc for more info.

If the options list doesn't change then I would suggest building it once before initializing Datatables then just update the selected option. This example shows a way to update the filter and sorting operations to allow them to work. The change event updates the selected HTML and all the render function does is update the filter and sort text or returns the HTML for display. You will need to update the code to affect the other column. This will be much faster than iterating through the options list each time render runs.

Kevin

mariooo

So i supposed to create an select on server side and return it just as string, right?

kthorngren

You could do that or build it in the dataFilter function of your ajax request.

Kevin

gowthamram

   var Options = [];
    $.getJSON('your URL' , function (data) {
        var opt = {};
        $.each(data, function(keys, values) {   
            opt.label = values;
            opt.value = keys;
            Options.push(opt.label);
            opt = {};
        });
    }).done(function(){
        editor.field('Your Field name').update(Options);
    });

Pushing the Data to the var Options.
you just have to give the #update# function to populate the values in the respective drop down.Try it out. It works for me. I hope works for you too.
Thank you.