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

    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..
  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 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
  3. Kendo UI is VS 2017 Ready
Back to Top