How to add combo box in grid's inline row editing ?

[Steve]

Hello..
I need a grid that can contains combo box in its inline editing. It's because some column need to choose a data from other table (foreign key relationship). I think it will be great if user can edit it through combo box in grid's inline editing.

If anyone has a solution for my problem, please let me know. Thanks a lot..

[John DeVight]

Hi Steve,

I've talked with a Kendo UI Evangelist and he told me that a solution for this will be available in the next release, currently scheduled in March.

If it would help in the mean time, I have come up with the ability to use an HTML select element when editing a field.

I've defined a grid to display a list of people.  In the grid declaration, I define the function "grid_edit" to be called when a field is to be edited.

$(document).ready(function () {

    // Define an array as the data.

    var peopleData =

        [

            { Id: 1, Name: "John Doe", HairColor: 'Black' },

            { Id: 2, Name: "Jayne Smith", HairColor: 'Brown' }

        ];

  

    // Define the data source for the grid.

    peopleDS = new kendo.data.DataSource({

        data: peopleData,

        schema: {

            model: {

                id: "Id",

                fields: {

                    Name: { validation: { required: true} },

                    HairColor: { validation: { required: true} }

                }

            }

        }

    });

  

    // Define the grid.

    $('#grid').kendoGrid({

        dataSource: peopleDS,

        height: 250,

        editable: true,

        edit: grid_edit,

        columns:

        [{

            field: 'Name',

            title: 'Name'

        }, {

            field: 'HairColor',

            title: 'Hair Color',

        }]

    });

});

In the grid_edit function, I hide the input element and create a select element with a list of options.  I select the option that is in the input element.  When the user selects an option, I set the input with the selected option text.

grid_edit = function (e) {

    // Get the input field.

    var $input = e.container.find('input.k-input');

  

    // If the input field is for HairColor...

    if ($input.attr('name') == 'HairColor') {

        // Hide the input field.

        $input.css({ visibility: 'hidden', position: 'absolute', width: '0px' });

  

        // Define an array of colors to be displayed in the select element.

        var hairColors = ['Black','Brown','Blonde','Red'];

  

        // Create the select element.  When the onchange event occurs, get

        // the selected option and put it in the input field.

        var $select = $('<select/>').css('width', '100%')

            .attr('id','selectHairColor')

            .attr('onchange',"$('input.k-input').val($('#selectHairColor option:selected').text());");

  

        // Populate the select element with the options.

        $.each(hairColors, function (idx, color) {

            var $option = $('<option value="' + color + '">' + color + '</option>');

                  

            // If the color is the hair color in the input field

            // then set the color as the selected hair color.

            if (color == $input.val()) {

                $option.attr('selected', 'selected');

            }

  

            // Add the option to the select element.

            $select.append($option);

        });

  

        // Append the select element to the table cell.

        $('td.k-edit-cell').append($select);

    }

}

Hope this helps....

Regards,

John DeVight