Answers

• kthorngren Posts: 21,231Questions: 26Answers: 4,929

  January 2018

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

  Kevin
• mariooo Posts: 15Questions: 4Answers: 0

  January 2018

  

  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");
              }
          }
  

  `

  zumxvi7osv0b.png 1.7K
• Rusty Ballinger Posts: 21Questions: 7Answers: 0

  February 2018

  I would like to see the answer to this too.
• kthorngren Posts: 21,231Questions: 26Answers: 4,929

  February 2018 Answer ✓

  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 Posts: 15Questions: 4Answers: 0

  February 2018

  @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 Posts: 21,231Questions: 26Answers: 4,929

  February 2018 edited February 2018

  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 Posts: 15Questions: 4Answers: 0

  February 2018

  So i supposed to create an select on server side and return it just as string, right?
• kthorngren Posts: 21,231Questions: 26Answers: 4,929

  February 2018

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

  Kevin
• gowthamram Posts: 1Questions: 0Answers: 0

  May 2019 edited May 2019

     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.