Datatable Editor form - select - ipOpts - Dynamic values

ghudeihed

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,

allan

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

ghudeihed

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

allan

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

ghudeihed

Great, that sounds like a good starting point for me.
Thanks a lot,
GH

allan

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

szrenwei

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 .

kokot

hey there,
did you managed some solution ?

ghudeihed

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

ghudeihed

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

allan

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

kokot

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!

ghudeihed

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

allan

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

ghudeihed

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

webosity

Anyone get the select and sub select working?

ghudeihed

I used jQuery UI and that was it, good luck with that :)

webosity

Anyone know how to send back select values instead of the label?

allan

@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

webosity

No worries, i posted my solution.

http://www.datatables.net/forums/discussion/10411/how-to-create-dependent-selects#Item_1

sluggo

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

allan

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

sluggo

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?

gregmaertens

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

allan

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

gregmaertens

Hi Allan,

thanks. Looking for the new release then!

Greg

vinod_ccv

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?

allan

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

whitbacon

Any chance you coul give more details on the select and sub select as it stands today. It would make a great example. Whit

allan

For anyone else interested, this discussion covered this topic: http://datatables.net/forums/discussion/15375

Allan

aldodelgado

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?