Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Grid > Grid with ComboBox in custom toolbar

Not answered Grid with ComboBox in custom toolbar

Feed from this thread
  • Christian avatar

    Posted on Apr 10, 2012 (permalink)

    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();
        }

    Reply

  • Richard avatar

    Posted on Apr 30, 2012 (permalink)

    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 });
        }

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Grid > Grid with ComboBox in custom toolbar
Related resources for "Grid with ComboBox in custom toolbar"

ASP.NET MVC Grid Features  |  Documentation  |  Demos  |  Telerik TV ]