Can I create a multiple controls in one cell

[stoodin]

Hi,
I need to create a cell that has a dropdown and label controls in one cell.
Or as alternative can I create different types of editor for rows. For example row 1 has dropdown in column 1, row 2 has text in the same column.
Thank you for your help,

[paramvir]

both should be possible with column.editor.type = callback function.

in first case it's important to assign ui.cls to editable control (dropdown) so that it can participate in keyboard navigation.

in 2nd case different editors can be provided in different rows depending upon rowIndx or rowData.

[stoodin]

Great!!!,
First one almost working, just height of the row is not adjusted. Should I use the css or there is a way to set row autosize somehow?

The second solution: where do I put this logic into?

Thanks again.

[stoodin]

I really need your help to resolve it. It is very complicated.
I've created a custom editor for this column but have 2 issues:
1. The value of the dropdown is not saved when I click enter. (It does when the editor type is just "select" not custom)
2. Doesn't called when the selection changed.
3. I tried to add the same code in the "$grid.on( "change", ".slctTypeClass", function() {" but still not working
Here is the code:
    var approvedByEditor = function (ui) {
        //debugger;
        var $cell = ui.$cell,
            rowData = ui.rowData,
            rowIndx = ui.rowIndx,
            dataIndx = ui.dataIndx,
            width = ui.column.width;
            ui.cls = "slctTypeClass";
            //ui.rowHeight = "100px";
            //var dc = $.trim(rowData[dataIndx]);

        var options = ['-- Select --', 'Training','Vacation','Medical Leave',
                        'Emg OT','Stat Holiday','Sick','Standby','Relief Regular',
                        'Floater Day','Bereavement'];
        var str="";
        for (var i = 0; i < options.length; i++) {
            str += '<option value="' + i + '">' + options + '</option>';
        }
       
        alert("Row Type:" + rowData["type"]);
        if (rowData["type"] === "Relief Regular") {
            $('<span><select class="' + ui.cls + '" id="slctType" name="' +
                dataIndx + '" >'+str+"</select>&nbsp;Approved By: </span>").appendTo($cell).val(rowData[dataIndx]);
        }
        else {
            $('<select class="slctTypeClass" id="slctType" name="' +
                dataIndx + '" >'+str+"</select>").appendTo($cell).val(rowData[dataIndx]);
        }                   
    }

[paramvir]

you should not overwrite ui.cls, rather append your class to it.

var finalCls = ui.cls + "  " +  "slctTypeClass";

'<select class="' + finalCls + '"