Using Drop down list in table

rauer

Hello,
I want to use a drop down list as a value in a data table. I think I have to write my own table column renderer to get this feature, is it right, or is there an easier way or an example I haven't found?

Greetings from Germany,
Matthias

rynosthe1

Matthias,

Are you trying to redner a drop down box in every line of your datatable in its own column?

Ryne

rauer

Yes, now I am using special column renderer...
If there is an easier way, please tell me.

I need drop down boxes and links.

[code]
...
"aoColumns": [
null,
{ "fnRender": function ( oObj ) {
return ""+oObj.aData[1]+"";
} },
{ "fnRender": function ( oObj ) {
return ""
+ ""
+ ""
+ ""+oObj.aData[2]+""
+ "";
} },
{ "fnRender": function ( oObj ) {
var kategorie=oObj.aData[0];
var value=oObj.aData[3];
if (value==="inklusiv" || value==="") {
return value;
}
var values = value.split("|");
var returnValue="";
for (var i=0; i

rynosthe1

If you moved to server side processing then you can do it like this:

Instead of using fnrender() i've populated the datatable via an ajax source.
(http://datatables.net/examples/data_sources/ajax.html)

I end up with records that looks like this (aaData[0]):
[ "00026" ,"Product Name" , "None1STSTESTTEST" ]

You can put other html elements in your aaData array-like the hyperlinks

I use serialize to build a 'nice' string to post back to the server to track changes made to the drop down boxes (http://datatables.net/examples/api/form.html)

Ryne

medSwa

hello, how to find out other table values when a dropdown value is changed. i need to send the changed drop down value along with other specific value from the table to the server to identify the row. is sending the whole table the only way?

-medswa

fbas

fnGetData and fnGetNodes can get DOM elements or cell values for you; you can determine your cell's current position with fnGetPosition. see the API pagehttp://www.datatables.net/api

medSwa

thankyou fbas. But its not helping me, i have something like below fnCreateSelect() has an onchange event to fnChange() where i am trying to use the fnGetPosition and fnGetData
please correct me.



function fnCreateSelect( obj )
{
var r='';
var opt = '';
var i, iLen=list.length;
var j;
var it = Iterator(list);


var count =0;
for (var key in list) {

var obj1 = it.next();
console.log("the id is "+ obj1[0]);
j += ''+obj1[1]+'';
count++;

}
console.log("the count is "+ count);
return r+opt+j+'';

}


function fnChange() {

$("select option:selected").each(function () {
str += $(this).attr("value") + " ";
var aPos = queueTable.fnGetPosition( this );
console.log("the position is "+ aPos);
var sel_row = queueTable.fnGetData( aPos[0] );
console.log("sel row is "+ sel_row);
});
console.log("the str is " + str);

}

medSwa

my code returns a null for aPos

-medswa

fbas

fnGetPosition requires the TD cell, you are passing the OPTION element. use some jquery to get the TD parent of your option > select

or it might be easier to put your index into the onChange=fnChange function. if you're running this in fnRender, you can get the row from the oObj object

[code]
var iRow = oObj.iDataRow;
var r='';
// ...

[/code]

[code]
function fnChange(sel_row_num) {
var sel_row= queueTable.fnGetData(queueTable.fnGetNodes(sel_row_num));
console.log("sel row is ", sel_row_num, sel_row);
});
[/code]

medSwa

thanks a lot fbas.

medSwa

Hello , sorry to come back again.
i used the above code and added something to it like below because i want the changed value in the select box.


function fnChange(sel_row_num) {

var sel_row= queueTable.fnGetData(queueTable.fnGetNodes(sel_row_num));
console.log("sel row is ", sel_row_num, sel_row[0]);

$("select option:selected").click(function () {

str += $(this).attr("id") + "|" + sel_row[0] + ",";
console.log("sel row is "+ str);
});

queueTable.fnDraw();

}
i am forced to do .click because otherwise $("select option:selected").attr("id") gives null, but if directly use .text() like this - it works fine...but i want the id atrribute of the selected index

function fnChange(sel_row_num) {

var sel_row= queueTable.fnGetData(queueTable.fnGetNodes(sel_row_num));
console.log("sel row is ", sel_row_num, sel_row[0]);

str += $("select option:selected").text() + "|" + sel_row[0] + ",";
console.log("sel row is "+ str);
}

Because of this issue, when i push the extra data "str" through fnServerData to the server it doesnt get to the server. i seems like its lost between the fnserverdata and fnDraw. looks like the root cause is the way i get the changed select id. please help

medSwa

i am able to print the str value inside the fnserverdata and console.log shows it fine

"fnServerData": function ( sSource, aoData, fnCallback ) {

aoData.push( { "name": "my_field", "value": str } );

$.getJSON( sSource, aoData, function (json) {

console.log("the str final is "+ str);

fnCallback(json)
} );


it doesnt get to the server side. but if i send just this


str += $("select option:selected").text() + "|" + sel_row[0] + ",";

it can get to the server..so i tend to think that its the way i use the click
$("select option:selected").click(function () {

is there a way other than this to get changed id value in my case.

fbas

option doesn't have an id, which is why you're getting null

try getting the id of the select element (parent of the option element)

str += $(this).parent().attr("id") + "|" + sel_row[0] + ",";

------

if you're trying to get the index/value of the list, get the value attribute

str += $(this).attr("value") + "|" + sel_row[0] + ","; // or use .val()

make sure to assign a value to your tags to make this work
[code]

Option 0
Option 1
Option Elephant

[/code]

----------------------

how do you know the value is not making it to the server?

renegade1111

my problem in this case ist that all options will be choosen by the search, how i can only search the "selected" entrys of the dropdown box?
to trick the desc filter i use a display:hidden box with the selected entry in front of the