Datatable Editor form - select - ipOpts - Dynamic values

Datatable Editor form - select - ipOpts - Dynamic values

ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
edited May 2012 in Plug-ins
Hello Allan,

In the Editor form, when I set up the editor with a field of "type": "select" is it possible to generate a DropDownList dynamically from local database. I mean the "ipOpts" values will be dynamic?

Instead of doing it in this static form
[code]
"fields":
[
{
"label": "Main Type:",
"name": "type_main",
"dataProp": "4"
"type": "select",
"ipOpts": [{ "label": "Type1", "value": "1" },
{ "label": "Type2", "value": "2"}]
}
]
[/code]

Thanks in advance,
«1

Replies

  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    edited May 2012
    Hi,

    Absolutely yes. Its just a Javascript array of objects, so as long as you construct that array format, you can pass absolutely any values you want. For example it could be created dynamically by PHP, or even from an Ajax request (I'd suggest the former since it will be _much_ faster).

    Allan
  • ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
    Hi Allan,

    Thanks a lot, you are awesome. One more request :)
    so can we then do something like this
    [code]
    "ipOpts": function () {
    -- Do Something --
    return aOptions;
    }
    [/code]

    I am not really sure where to start, can you please show me an example of how to do that with AJAX?

    Thanks again,
    GH
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    No you would do something like this:

    [code]
    "ipOpts": myFunction()
    [/code]

    where myFunction would return the array - if you want it like this with Ajax would you need to use synchronous XHR. If you want async XHR when you'd need to build the Editor instance in the callback, or add/remove the field using the API.

    Allan
  • ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
    Great, that sounds like a good starting point for me.
    Thanks a lot,
    GH
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    There is one other option - a field type plug-in could be created which allows the list presented to by dynamically updated. This is something that I'll consider for future revisions of Editor.

    Allan
  • szrenweiszrenwei Posts: 3Questions: 0Answers: 0
    Hi, GH, have you solve this problem ? Hi, Allan, can I ask you a question, how can I access the json object from server-side ? I store the data in aaData .
  • kokotkokot Posts: 7Questions: 0Answers: 0
    edited May 2012
    hey there,
    did you managed some solution ?
  • ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
    edited May 2012
    Hey Guys,

    Per Allan's comment, I did the following and it works. but you need to generate your array the way you want inside the function

    [code]
    {
    "label": "State:",
    "name": "sState",
    "dataProp": "1",
    "type": "select",
    "ipOpts": getStateList()
    }
    [/code]

    [code]
    function getStateList() {
    var aStateList = new Array();

    aStateList[0] = { "label": "Type1", "value": "1" };
    aStateList[1] = { "label": "Type2", "value": "2" };
    aStateList[2] = { "label": "Type3", "value": "3" };
    aStateList[3] = { "label": "Type4", "value": "4" };

    return aStateList;
    }
    [/code]

    Hope that helps.
    GH
  • ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
    edited May 2012
    Allan,

    How can I pass the current value in the row that is being edited as a parameter to "ipOpts": myFunction(), I would like to do something like this:

    [code]
    "ipOpts": myFunction( myCurrentValue )
    [/code]

    Thanks,
    GH
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    Hi GH,

    ipOpts is just a list of the values/labels that should be shown in the select list - it doesn't contain any other information. So I guess the question is, what is it that you are wanting to do? If you want to set a default you can use the 'default' field property: http://editor.datatables.net/fields/#default or if you want to set the value of the field at any point, you can use the 'set' API method http://editor.datatables.net/api/#set .

    Regards,
    Allan
  • kokotkokot Posts: 7Questions: 0Answers: 0
    edited May 2012
    I've managed it, i have now dynamic loaded select in datatable editor (so here is a code):
    1/ section with JS
    [code]
    var test= new Array({"label" : "a", "value" : "a"});

    function loader(){
    test.splice(0,1);
    $.ajax({
    url: 'get_fields.php',
    async: false,
    dataType: 'json',
    success: function (json) {
    for(var a=0;a
    [/code]

    so it works like :
    get_fields.php returns two-dimensional array with json_encode to JS function loader that will return Array of Objects , this objects have 2 parms - value and label ..

    Enjoy!
  • ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
    Hi Allan,

    Hi Allan,

    This is a brief of the issue I hope you can give me an advise of how to get around it

    ** What I am trying to do?
    I have two drop down lists on the editor form generated dynamically, categories and sub categories. when I select "change" the main category I want to reload the subcategory with new values that correspond to the selected option in the main category list

    ** What I thought I can do :D?
    use jQuery to set the on "Change" event pass the value to the subcategory generator to populate the new list but did not work :(

    [code]
    function CreateEditorForm() {
    var aMainTypeList = generateListFromDB("getMainTypeList", "{}", "main", "main"); // initialize my main List
    var aSubTypeList = generateListFromDB("getSubTypeList", "{}", "sub", "sub"); // initialize my sub List

    $(document).ready(function () {
    $('#DTE_Field_type_main').live('change', function () {
    sCurrMainType = $(this).val();
    aSubTypeList = generateListFromDB("getSubTypeList", "{'CurrMainType': '" + sCurrMainType + "'}", "sub", "sub"); // update current sub list in the edit form
    });
    });

    // Create the form
    oEditorForm = new $.fn.dataTable.Editor({
    "ajaxUrl": "CustomWebService.asmx/myActionControl",
    "domTable": "#myUserTable",
    "fields": [
    {
    "label": "Main Type:",
    "name": "type_main",
    "dataProp": "4",
    "type": "select",
    "ipOpts": aMainTypeList
    },
    {
    "label": "Sub Type:",
    "name": "type_sub",
    "dataProp": "5",
    "type": "select",
    "ipOpts": aSubTypeList
    }
    ]
    });
    }

    function generateListFromDB(sSource, aData, sLable, sValue) {
    var aList = new Array();

    $.ajax({
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    url: 'CustomWebService.asmx/' + sSource,
    data: aData,
    async: false, // forces synchronous call
    success: function (data) {
    jsonObjArray = data.d;

    for (var i = 0; i < jsonObjArray.length; i++) {
    aList[i] = { "label": jsonObjArray[i][sLable], "value": jsonObjArray[i][sValue] };
    }
    },
    error: function (data) { }
    });

    return aList;
    }
    [/code]

    Where I am getting stuck :S ?
    Here I am, I cant figure out a way to update the values in the sub category list simultaneously as I select new main category

    Thanks,
    GH
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    I see - thanks for the explanation. In that case, yes you would either need to create a form control which provides an API method that would allow it to be updated dynamically (see this tutorial for creating field type plug-ins: http://editor.datatables.net/tutorials/field_types ), or modify the built in Editor select field type to provide this option. There currently isn't a way of changing the options presented in the select list, hence the need for the change.

    I've made a note to look at including this in the changes for Editor 1.0.1.

    Regards,
    Allan
  • ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
    Thanks a lot Allan for all your help, I really appreciate it.
    Good to know :D. I will look into the tutorial of how to create field type plug-ins and see where it will go ;)

    cheers,
    GH
  • webositywebosity Posts: 4Questions: 0Answers: 0
    Anyone get the select and sub select working?
  • ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
    I used jQuery UI and that was it, good luck with that :)
  • webositywebosity Posts: 4Questions: 0Answers: 0
    Anyone know how to send back select values instead of the label?
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    @webosity - I don't really understand I'm afraid. The label should never be sent back. Perhaps you can show us a test case with the issue please?

    Allan
  • webositywebosity Posts: 4Questions: 0Answers: 0
    No worries, i posted my solution.

    http://www.datatables.net/forums/discussion/10411/how-to-create-dependent-selects#Item_1
  • sluggosluggo Posts: 3Questions: 0Answers: 0
    Hello,

    While I'm sure my question is answered above, I'm not quite clear on exactly what I need to do. Here is my goal:
    I want to replace the ipOpts data for "select" options in the below example with the results of a DB query using a php script similar to the get_fields.php script described above. Is there an easy way to just replace the select options in this example with the results from a get_fields script, and what would be the the syntax?
    [code]
    (function($){

    $(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
    "ajaxUrl": "php/table.logged_data.php",
    "domTable": "#logged_data",
    "fields": [
    {
    "label": "Stock_number",
    "name": "stock_number",
    "type": "text"
    },
    {
    "label": "Service",
    "name": "service",
    "type": "select",
    "ipOpts": [
    {
    "label": "one",
    "value": "one"
    },
    {
    "label": "two",
    "value": "two"
    },
    {
    "label": "three",
    "value": "three"
    }
    ]
    },
    {
    "label": "flag_hours",
    "name": "flag_hours",
    "type": "text"
    }
    ]
    } );

    $('#logged_data').dataTable( {
    "sDom": "Tfrtip",
    "sAjaxSource": "php/table.logged_data.php",
    "aoColumns": [
    {
    "mDataProp": "stock_number"
    },
    {
    "mDataProp": "service"
    },
    {
    "mDataProp": "flag_hours"
    }
    ],
    "oTableTools": {
    "sRowSelect": "multi",
    "aButtons": [
    { "sExtends": "editor_create", "editor": editor },
    { "sExtends": "editor_edit", "editor": editor },
    { "sExtends": "editor_remove", "editor": editor }
    ]
    }
    } );
    } );

    }(jQuery));

    [/code]
    Thanks for the help!

    Mike
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    Hi Mike,

    In Editor 1.1 what you would do is:

    [code]
    editor.field('service').update( ... new data ... );
    [/code]

    Editor 1.2 will expand this ability to allow radio and checkbox options to also be dynamically updated.

    Allan
  • sluggosluggo Posts: 3Questions: 0Answers: 0
    Thanks for the solution, just what was needed.

    The last issue I have is that the example I'm using displays the entire contents of the target table. I need to filter this data so that it only displays rows which meet certain criteria such as a certain ID in a field in the DB table and a date field. Also, I'd like to have a date filter control so users can filter by the date of their choice.

    Any suggestions?
  • gregmaertensgregmaertens Posts: 5Questions: 0Answers: 0
    Hello,

    I'm using Editor 1.1.0 and I'm having issue with .update().
    Here is a code snippet showing the problem:
    [code]
    event_editor.add( [
    {
    "label": "User:",
    "name": "user"
    },
    {
    "type": "select",
    "label": "Event:",
    "name": "event_name",
    "ipOpts": [{"label":"need to load data from server", "value":"a value"}]
    }
    ]);
    var f = event_editor.field('event_name');

    f.update([{"label":"another label", "value":"hello"}]);
    [/code]

    At this point, I would have thought seeing "another label" instead of the "need to load...". But it's not the case.
    Am I doing something wrong?
    I'm using Safari on a Mac.

    Thanks,
    Greg
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    Hi Greg,

    I'm afraid that I think there is actually a bug in Editor 1.1.0 release whereby this doesn't actually work quite as expected :-(. You are quite correct in saying that your code above should work.

    I'm currently wrapping up the documentation for Editor 1.2.0 which addresses this issue (and also introduces 'update' for the radio and select field types). Editor 1.2.0 should be out at the end of this week.

    Allan
  • gregmaertensgregmaertens Posts: 5Questions: 0Answers: 0
    Hi Allan,

    thanks. Looking for the new release then!

    Greg
  • vinod_ccvvinod_ccv Posts: 75Questions: 0Answers: 0
    Hi
    I am using Datatable Editor1.2.1. Let me know how to get dynamic values for drop down list for select values. I mean dependent select boxes which should appear or show options according to the first selection.
    I think we can do it with onPreSubmit function, but I could n't redraw the form with new form with new options. Any suggestions?
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    edited October 2012
    I doubt you want onPreSubmit if you want the user to be able to modify the updated list. What would you would do is bind a change event to the menu you want, and then call the `update` method on the dependent files - as described above.

    Allan
  • whitbaconwhitbacon Posts: 40Questions: 2Answers: 0
    Any chance you coul give more details on the select and sub select as it stands today. It would make a great example. Whit
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    For anyone else interested, this discussion covered this topic: http://datatables.net/forums/discussion/15375

    Allan
  • aldodelgadoaldodelgado Posts: 1Questions: 0Answers: 0
    Hi Allen, I have my dynamic select options working via ajax using kokot's method. However on updated its not returning the selected value from the table. Any suggestions on how I could fix this?
This discussion has been closed.