Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  April 2019

  Hi @agarn ,

  I don't quite follow, but this example may help. Here, the dropdowns are being adjusted to reflect the current available options based on the other choices. Is this what you mean? If not, would you be able to give more details, please.

  Cheers,

  Colin
• agarn Posts: 25Questions: 4Answers: 1

  April 2019

  Thanks colin for trying!

  Actually I found the below article useful and perfect to what I desire to do:
  https://datatables.net/blog/2017-09-01

  But it seems like that this uses MVC API and I am using Asp.NET MVC4 so I am not able to understand how to convert methods he has described.
• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  April 2019

  The code you show above is effectively static (it gets rendered by the server-side, into static Javascript the browser will execute). So it won't work quote that way for a dependent list.

  What you need to do is have the client-side make an Ajax call to the server when the top level list value is updated (can be done with dependent()) and then have the server return the corresponding data for the child list. That's different from what you have above where all of the options are populated up front.

  The key thing is to be able to make an Ajax call to the server and get JSON back. The Editor manual has some basic information about that - use that kind of controller (assuming you are using MVC in that way) and use return Json(...) with the options needed.

  Allan
• agarn Posts: 25Questions: 4Answers: 1

  April 2019

  Thanks Allan. Let me try converting my code.
• agarn Posts: 25Questions: 4Answers: 1

  April 2019 edited April 2019

  Hi allan,

  Do you have nay clue as to how can I return Json in the following format at server side:

  {
      "options": {
          "country" [
              ...
          ]
      }
  }
  

  The code that I am using for binding dropdwon is as follows

  public ActionResult ProductOptions()
          {
              var request = System.Web.HttpContext.Current.Request;
              string subcategoryName = request.Params["values[subCategoryName]"];
  
              using (EApplication db = new EApplication ())
              {
                  var sc = db.SubCategories.FirstOrDefault(c =>c.SubCategory == subcategoryName);
                  int subCatgeoryId = sc.Id;
                  var query = db.ProductCategories.Where(c => c.SubCategoryId == subCatgeoryId).Select(c => c.Product).ToList();
  
                  return Json(query);
              }
          }
  

  I can see that query gets populated successfully with correct product options to be shown based on categories but unfortunately I don;t see output on screen. I believe its because the data returned is not in format mentioned above.

  Thanks

  Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  April 2019

  have a look here to see how I've done it before.

  There are loads of other ways to do it I believe, like creating a class which has that required structure and then passing it through Newtonsoft JSON.NET, but I found that to be on of the easiest options! I should note that I'm a JS dev far more than a .NET one!

  Allan
• agarn Posts: 25Questions: 4Answers: 1

  April 2019 edited April 2019

  Oh, I got it. Thanks Allan. Let me try using other means somehow.
• agarn Posts: 25Questions: 4Answers: 1

  May 2019 edited May 2019

  Hi,

  I am doing the following to fill my dynamic select product based on subcategory:

  oEditor.dependent('subCategoryName', function (val) {
              $.ajax({
                  type: 'GET',
                  url: '//SPOptions?subcategoryName=' + val,
                  dataType: 'json',
                  data: { securityProduct: $("#securityProduct").val() },
                  error: function ( textStatus, errorThrown) {
                      alert("Status: " + textStatus + "\n\nError: " + errorThrown);
                  },
                  success: function (data) {
                      $("#securityProduct").html("");
                      $("#securityProduct").append('<option value="-Select one (optional--">-- Select one (optional) --</option>');
                          $.each(data, function (i, itemData) {
                              $("#securityProduct").append('<option value="' + itemData + '">' + itemData + '</option>');
                          });
                  }
              });
  

  Select is filled and options are changing dynamically BUT the issue is that on Add/Edit button of datatable, product is returned as null always.

  JSON returned on click of Add/Edit button is as follows:
  {"action":"create","data":{"0":{"id":"","subCatgeoryName":"Audio","securityProduct":null}}}

  Can anybody help as to why data is returned as null?
• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  May 2019

  Is #securityProduct an Editor select input? If so, you need to use its field().update() method to update it, not direct HTML modification.

  Allan
• agarn Posts: 25Questions: 4Answers: 1

  May 2019 edited May 2019 Answer ✓

  Thanks a lot Allan for all the help.
  What worked for me is:

  1)
  In cshtml page when we declare datatable I used following for the column to be dynamically populated:

  {
                  label: "Security Product:",
                  name: "securityProduct",//used in field as a parameter
                  id: "securityProduct",
                  type: "select",
                  theme: "bootstrap",
                  options: [],
                  opts: {
                      placeholder: "Select a security product",
                      allowClear: false,
                      multiple: false,
                  }
  }
  

  2)
  After completion of editor declarations and definitions, i.e,
  oEditor = new $.fn.dataTable.Editor ({ /all code here/ });
  use editor.dependent as follows:

  Note: subCategoryName is the field based on whose Id, name you want the other to get populated. I want security product to be populated based on sub category

  oEditor.dependent('subCategoryName', function (val) {
              var optionsSP = [];
              $.ajax({
                  type: 'GET',
                  url: '@Url.Action("SecurityProductOptions", "Item")?subcategoryName=' + val,
                  dataType: 'json',
                  data: { subcategoryName: $("#subcategoryName").val() },
                  error: function (textStatus, errorThrown) {
                      alert("Status: " + textStatus + "\n\nError: " + errorThrown);
                  },
                  success: function (data) {
                      var option = {};
                      option.label = "-- Select one (optional) --";
                      option.value = "-- Select one (optional) --";
                      optionsSP.push(option);
                      option = {};
                      $.each(data, function (i, itemData) {
                          option.label = itemData;
                          option.value = itemData;
                          optionsSP.push(option);
                          option = {};
                      });
                  }
              }).done(function () {
                  oEditor.field('securityProduct').update(optionsSP);
              });
          });
  

  3) At server side

  public ActionResult SecurityProductOptions(string subcategoryName)
          {
                  var securityProducts = db.tablename.Where(/* condition here */).Select(/* column here */).ToList(); //new { label = c.SecurityProduct, value = c.SecurityProduct });
                  return Json(securityProducts, JsonRequestBehavior.AllowGet);
              }
          }
  

  Everything worked - new, edit, update, delete, etc. Infact in bubble editing too the selected value appeared.
• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  May 2019

  Nice one - thanks for posting back!

  Allan