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

2 posts, 0 answers
  1. Steve
    Steve avatar
    6 posts
    Member since:
    Aug 2012

    Posted 28 Jan 2012 Link to this post

    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..
  2. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 29 Jan 2012 Link to this post

    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{
            data: peopleData,
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Name: { validation: { required: true} },
                        HairColor: { validation: { required: true} }
        // Define the grid.
            dataSource: peopleDS,
            height: 250,
            editable: true,
            edit: grid_edit,
                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('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.
            // Append the select element to the table cell.

    Hope this helps....


    John DeVight
Back to Top