DropdownList in a Grid?

[jose IvanMember]

hi , i read in other post that dropdownlist no support something like {id:’id’,display:’text’} this is the link http://www.jqwidgets.com/community/topic/datagrid-with-combobox/ and all you say that  This feature is expected in the release scheduled for March, 2012.

And other post http://www.jqwidgets.com/community/topic/grid-editable-jqxdropdownlist/ say something like i need….

this is my scenary and i can image the many people have similar case… where exists a foreign so i need the text to display.. also the grid is editable.

var row =
	[
	    { "ready": "0", "id": "1", "Account": "1 Activos", "Debe": "0.00", "Haber": "300.00", "nota": "", "jobID": "1", "classID": "4" },
		{ "ready": "0", "id": "2", "Account": "11 Activo Circulante", "Debe": "210.00", "Haber": "0.00", "nota": "Esta es una nota", "jobID": "2", "classID": "3" }
	];
var jobsList = [
                { "jobID": "1", "text": "Proyecto 1" },
                { "jobID": "2", "text": "Proyecto 2" },
                { "jobID": "3", "text": "Proyecto 3" },
                { "jobID": "4", "text": "Proyecto 4" }
              ];
var classList = [
                { "classID": "1", "text": "Rubro 1" },
                { "classID": "2", "text": "Rubro 2" },
                { "classID": "3", "text": "Rubro 3" },
                { "classID": "4", "text": "Rubro 4" }
              ];
    var Jobenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '">' + verify(jobsList, columnfield, value)[0]["text"] + '</span>';
    }
    var classrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '">' + verify(classList, columnfield, value)[0]["text"] + '</span>';
    }
the function 	verify returns the text for every row but value is "" so always return the first.. but no render until i move the scroll in the bottom can i do { text: 'Rubro', columntype: 'dropdownlist', datafield: 'classID',datasource:'mydatasource' width: 250}.
there's a example something like this... 
$(grid).jqxGrid(
            {
                width: 1000,
                source: dataAdapter,
                editable: true, altrows: true, enablehover: true, enabletooltips: true,
                enableanimations: true, keyboardnavigation: true, autoheight: true, pageable: false, columnsresize: true,
                columnsresize: true, theme: theme,
                editmode: 'selectedcell',
                selectionmode: 'singlecell',
                columns: [
                  { text: 'fila', columntype: 'checkbox', width: 50, datafield: 'ready' },
                  { text: 'id', columntype: 'textbox', datafield: 'id', width: 50 },
                  { text: 'Numero de Cuenta', columntype: 'textbox', datafield: 'Account', width: 450,}, //fin de Numero de cuenta
                  {text: 'Debe', datafield: 'Debe', width: 120, cellsalign: 'center', cellsformat: 'c8', columntype: 'textbox'},
                  { text: 'Haber', datafield: 'Haber', width: 120, cellsalign: 'center', cellsformat: 'c8', columntype: 'numberinput'},
                  { text: 'notas', datafield: 'nota', columntype: 'textbox', width: 250 },
                  { text: 'Proyecto', columntype: 'dropdownlist', datafield: 'jobID', width: 250, cellsrenderer: Jobenderer },
                  { text: 'Rubro', columntype: 'dropdownlist', datafield: 'classID', width: 250, cellsrenderer: classrenderer }
                ]
            }); //fin del Grid

			
			
			Thanks for you help ....

 

[Peter StoevKeymaster]

Hi Jose,

The getrowdata method returns the data record at a specific index. When you edit a cell with the DropDownList, the cell’s value is set to the display value of the DropDownList as in the built-in logic there’s only a display value and the list of items that the editor displays depends only on the Column’s datafield setting. If you need to get a value associated to a given displayed value, you need to keep a map between the value and the display value or use the DataAdapter’s records collection to get the record at a specific index.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jose IvanMember]

yeah but how in the dropdownlist not exists something like {id:’idfield’,display:’mifield’ , datasource:’my datasource’} ? how can i map the id with the text ? in the example above the field jobID and classID are foreign so use the render cellsrenderer to display the text foreach id but when in var Jobenderer the value is equals “” so my function just return the first for each row ,i need to display the text but in my dataAdapter these columns are number ?

if you see the variable row ={……..,”jobID”: “1”, “classID”: “4”}

so i want to display the text for each column
var jobsList = [
{ “jobID”: “1”, “text”: “Proyecto 1” }
]
var classList = [
{ “classID”: “4”, “text”: “Rubro 4” }
]

so in my Grid
………
Column: [
{ text: ‘Proyecto’, columntype: ‘dropdownlist’, datafield: ‘jobID’, width: 250, cellsrenderer: Jobenderer },
{ text: ‘Rubro’, columntype: ‘dropdownlist’, datafield: ‘classID’, width: 250, cellsrenderer: classrenderer }
]
so i mapped these fields in rendecell and when finish these don’t show until a move the scroollbar…. i have a idea and i’m gonna try maybe in gridcomplete maybe i can do this… it’s results i’m gonna publish for all the people that have the same problem .

Thanks for reply.

[jose IvanMember]

Hi Again!! so this is the solution but i got a other trouble..

var jobsList = [
{ "jobID": "1", "text": "Proyecto 1" },
{ "jobID": "2", "text": "Proyecto 2" },
{ "jobID": "3", "text": "Proyecto 3" },
{ "jobID": "4", "text": "Proyecto 4" }
];
var dropDownListSource =
{
localdata: jobsList, datatype: "json",
datafields: [
{ name: 'jobID' },
{ name: 'text' }
],
id: 'jobID'
//url: url
};
var dropdownListAdapter = new $.jqx.dataAdapter(dropDownListSource, { autoBind: true, async: false });
$(grid).jqxGrid(
{
width: 1000,
source: dataAdapter,
editable: true, altrows: true, enablehover: true, enabletooltips: true,
enableanimations: true, keyboardnavigation: true, autoheight: true, pageable: false, columnsresize: true,
columnsresize: true, theme: theme,
editmode: /*'programatic', //*/'selectedcell',
selectionmode: 'singlecell',
columnsFilter: ['Account'],
DataSources: [CuentasDisponibles],
columns: [
{ text: 'fila', columntype: 'checkbox', width: 50, datafield: 'ready' },
{ text: 'id', columntype: 'textbox', datafield: 'id', width: 50 },
{ text: 'notas', datafield: 'nota', columntype: 'textbox', width: 250 },
{ text: 'Proyecto', columntype: 'dropdownlist', datafield: 'jobID', width: 250,
validation: function (cell, value) {
var validation = GetFieldInList(jobsList, 'text', value.toString());
if (validation.length != 1) {
return { result: false, message: "Seleccione un registro..." };
}
return true;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ displayMember: 'text', valueMember: 'jobID', source: dropdownListAdapter });
}
},
{ text: 'Rubro', columntype: 'dropdownlist', datafield: 'classID', width: 250,
initeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({ displayMember: 'text', valueMember: 'classID', source: dropDownListClassSource });
}
}
]
}); //fin del Grid

the columns rendered but when i wanna edit i have to press any key and i see the example that u have jus 2 clicks edit the first to select the cell and the second to edit… and dropdown the list but i doesn’t work.

[Author]

Posts