[Solved] Grid with ComboBox in custom toolbar

[Christian]

Hello

I'm having problems using the Telerik MVC Grid and ComboBox in a Custom Toolbar.
As a base i used this example: http://demos.telerik.com/aspnet-mvc/razor/grid/customtoolbar 

There is a dependency between the Grid and the ComboBox. The value of the ComboBox is needed to databind the Grid. 

My problem is, that the grid is always databound before the combobox is initialized and therefore no value can be obtained from it. Is it possible to change that order?

Thanks
Chris

<script type="text/javascript">
    function languageChange() {
        $("#Grid").data("tGrid").rebind({ lang: selectedLanguage });
    }
// is done first:
    function dataBinding(args) {
        var languageCode = selectedLanguage
        args.data = $.extend(args.data, { lang: languageCode });
    }
    function selectedLanguage() {
        return $("#Languages").data("tComboBox").value();
    }
// should be done first:
    function onComboBoxLoad() {
        $(this).data("tComboBox").fill();
    }

@{Html.Telerik().Splitter()
    .Name("Splitter")
    .HtmlAttributes(new { style = "height: 100%;" })
    .Orientation(SplitterOrientation.Vertical)
    .Panes(vPanes =>
    {
        vPanes.Add()
            .Collapsible(true)
            .Content(() =>
            Html.Telerik().Grid<TextModel>()
                .Name("Grid")
                .DataKeys(keys =>
                {
                    keys.Add(t => t.TextCode);
                })

                .ToolBar(toolBar => toolBar.Template(
                        @<text>
                        <label class="language-label" for="language-input">
                            Sprache
                        </label>
                        @(Html.Telerik().ComboBox()
                                .Name("Languages")
                                .DataBinding(binding => binding.Ajax().Select("_GetLanguages", "Text"))
                                .AutoFill(true)
                                .Filterable(filtering =>
                                {
                                    filtering.FilterMode(AutoCompleteFilterMode.StartsWith);
                                })
                                .HtmlAttributes(new { style = "width: 300px; vertical-align:middle;" })
                                .HighlightFirstMatch(true)
                                .SelectedIndex(0)
                                .ClientEvents(events => events.OnChange("languageChange").OnLoad("onComboBoxLoad"))

                        )
                        </text>
                    )
                )
                .HtmlAttributes(new { style = "height: 400px;" })
                .Columns(columns =>
                {
                    columns.Bound(t => t.TextCode).Width(210).ReadOnly();
                    columns.Bound(t => t.Text).Width(130);
                    columns.Bound(t => t.IsSystem).Width(100);
                })
                .ClientEvents(events => events.OnRowSelected("onRowSelected").OnDataBinding("dataBinding"))
                .DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectAjaxEditing", "Text"))
                .Pageable()
                .Scrollable(s => s.Height(450))
                .Sortable()
                .Selectable()
                .Render()
            );
        vPanes.Add()
            .LoadContentFrom("_TextsEdit", "Text");
    }).Render();
    }

[Richard]

I found this post when I was searching for a solution to a similar problem.  I was able to resolve the issue and thought that if I post my solution here, it might help someone else.  I added the following javascript to the onDataBinding event of my grid:

var comboBox = $('#AcyrSelect').data('tComboBox');
    if (comboBox == undefined) {
        args.preventDefault();
    }
    else {
        var matricYear = comboBox.value();
        args.data = $.extend(args.data, { matricYear: matricYear });
    }