jQuery UI Widgets Forums Grid DropdownList in a Grid?

This topic contains 3 replies, has 2 voices, and was last updated by  jose Ivan 11 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • DropdownList in a Grid? #3692

    jose Ivan
    Member

    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 ....

     

    • This topic was modified 11 years, 12 months ago by  jose Ivan.
    • This topic was modified 11 years, 12 months ago by  Peter Stoev. Reason: code formatting using the Format HTML Code button in the Toolbar
    DropdownList in a Grid? #3695

    Peter Stoev
    Keymaster

    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

    DropdownList in a Grid? #3725

    jose Ivan
    Member

    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.

    DropdownList in a Grid? #3772

    jose Ivan
    Member

    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.

    • This reply was modified 11 years, 11 months ago by  jose Ivan.
    • This reply was modified 11 years, 11 months ago by  jose Ivan.
    • This reply was modified 11 years, 11 months ago by  jose Ivan.
    • This reply was modified 11 years, 11 months ago by  jose Ivan.
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.