Combobox in Grid based off row values?

[Kevin]

I need to have grid with a combobox (in edit mode), that is populated based on criteria in each row.  So when I click edit on one row, the resulting combobox will have items in it that will be different than the same combobox in other rows.  I figured this row should be loaded on demand, but I can't figure out how to create a combobox in a grid without an editor template.  It looks like I can't pass parameters to this editor template.

Here's the use case for this:
Imagine I have a list of languages with translators in a grid.  When editing each row, a translator combobox would be displayed with only translators for that particular language.  So French will have a translator combobox with names like Pierre, Francois, and Jacque, but Spanish will have names like Jose, Mario, and possibly Pierre because he speaks both French and Spanish.

None of the demos address this.  Any ideas?

Steve

[John DeVight]

Hey Steve,

I've recently implemented a showCellAsDropDown function to my telerik.extensions.js library at http://telerikmvcextendedjs.codeplex.com, Change Set 9687.  The function allows any cell in the grid to be converted into a dropdown.  The idea was to be able to use a dropdown in a grid without having to initiate an edit command first.  However, I have a sample that I have attached where I have adapted the showCellAsDropDown function to work when a row is being edited using the edit command.  This doesn't work on grids that are bound server-side.  I've tested it on grids that are bound via AJAX. 

When I define the grid, I implement 2 client events.  The first is the OnEdit event where I define the PersonGrid_OnEdit event handler to display the dropdown in the grid.  The second is the OnSave event where I define the PersonGrid_OnSave event handler to get the text and value from the dropdown and put the text and value in the json object that is submitted to the server to be saved.

Here is the code for the grid:

@{
    Html.Telerik().Grid<TelerikMvcRazorApp.Models.Person>()
        .Name("PersonGrid")
        .Columns(columns =>
            {
                columns.Bound(m => m.Name);
                columns.Bound(m => m.HairColor).ReadOnly(true);
                columns.Bound(m => m.HairColorId).Hidden(true);
                columns.Command(commands =>
                    {
                        commands.Edit();
                    });
            })
        .ClientEvents(events => events.OnEdit("PersonGrid_OnEdit").OnSave("PersonGrid_OnSave"))
        .DataKeys(keys => keys.Add(m => m.Id))
        .DataBinding(dataBinding =>
            {
                dataBinding.Ajax()
                    .Select("SelectPeople", "Home")
                    .Update("UpdatePerson", "Home");
            })
        .Render();

    Html.Telerik().ScriptRegistrar().Scripts(scripts =>
        scripts.AddGroup("ShowCellAsDropDownGroup", group =>
            group.Add("~/Scripts/telerik.extensions.js")
        )
    );
}

Here is the javascript code:

<script type="text/javascript">
    var $dropdown=null;

    PersonGrid_OnEdit=function (e) {
        // Change the cell in the second row, second column into a dropdown.
        $dropdown=$('#PersonGrid').data('tGrid').showCellAsDropDown(
            {
                row: $(e.form).find('tr.t-grid-edit-row').index(),
                column: 1,
                options: {
                    textField: 'Color',
                    valueField: 'Id',
                    data: [
                        { Id: '1',Color: 'Brown' },
                        { Id: '2',Color: 'Black' },
                        { Id: '3',Color: 'Red' },
                        { Id: '4',Color: 'Blond' }
                    ]
                },
                textField: 'HairColor',
                valueField: 'HairColorId',
                onChange: function (o) {
                    o.cancel=(o.newText=='Blond');
                }
            }
        );
        console.log(e);
    }

    PersonGrid_OnSave=function (e) {
        // The dropdown causes a JSON attibute to appear that doesn't have an attribute name.  Get rid of it.
        delete e.values[''];

        // Get the selected option.
        var option=$dropdown.find('option:selected');

        // Set the HairColor and HairColorId in the values JSON object that is submitted in the AJAX Update.
        e.values.HairColor=$(option).text();
        e.values.HairColorId=$(option).val();
    }

</script>

If this doesn't work, let me know and we can continue to investigate a solution for you!

Regards,

John DeVight

[Kevin]

I can now get the combobox based off of row values, but I can seem to get the multi-column feature to work.  The problem appears to be with dynamic tabs.  Attached is the solution.