[Solved] combobox.Select causing additional Grid Refresh

[Jared]

*Not sure if I should put this in the Grid Forum or here*

I added a Combobox to a Grid ToolBar which I use to filter the data. If I try to select the first item in the Combobox onLoad it does select the first item and loads the gird data correctly. However the next 'mouse click' anywhere on the page (white-space, button, link, etc) fires the onChange event again, which rebinds the grid. If I don't call the onChange event inside the onLoad event for the Combobox, I have to 'click' to fire the event and load the Grid data. Not sure why the event is getting fired again or not fired?

Here is the Grid's Toolbar:

.ToolBar(toolBar => toolBar.Template(
    @<text>
    <label>
        Select a Type:
    </label>
        @(Html.Telerik().ComboBox()
            .Name("MyTypes")
            .DataBinding(binding => binding.Ajax().Select("_GetTypes", "MyController"))
            .AutoFill(true)
            .Filterable(filtering =>
            {
                filtering.FilterMode(AutoCompleteFilterMode.StartsWith);
            })
            .HtmlAttributes(new { style = "width: 350px" })
            .HighlightFirstMatch(true)
            .ClientEvents(events => events
                .OnLoad("My.Namespace.Type_OnLoad")
                .OnChange("My.Namespace.Type_OnChange")
            )
        )
    </text>
))

Here is the javascript:
My.Namespace = {
    param1: "",
    param2: "",
 
    Type_OnLoad: function (e) {
        var combobox = $("#MyTypes").data("tComboBox");
        combobox.fill(function () { //binds the combobox
            combobox.select(0); //select the first item.
            My.Namespace.Type_OnChange(e); //rebind
        })
    },
 
    Grid_onDataBinding: function (e) {
        var params = $("#MyTypes").data("tComboBox").value().split(',');
        My.Namespace.param1 = params[0];
        My.Namespace.param2 = params[1];
 
        //Only bind data when a Type is selected
        if (My.Namespace.param1 == "" || My.Namespace.param2 == "") {
            return false;
        }

        e.data = $.extend(e.data, {
            Param1: My.Namespace.param1,
            Param2: My.Namespace.param2
        });
    },
 
    Type_OnChange: function (e) {
        $("#Grid").data("tGrid").rebind();
    },
}

[Georgi Krustev]

Hello Jared,

 
Selecting item with select() method will not prevent OnChange event. In other words it will be raised. In order to overcome this behavior I will suggest you use value() method.

Kind regards,
Georgi Krustev
the Telerik team

[Jared]

Sorry for my confusing question...

My Goal:
When the page loads, the Combobox loads with the first item in the SelectList selected. I pass the selected value to the grid to bind the related data.

My Problem:
With my code above, it seems to work except the OnChange event does NOT fire until I physically do a 'mouse click'. The Combobox shows the first item as selected. I don't understand why the OnChange event is not firing without me having to 'click'? 

[Georgi Krustev]

Hello Jared,

 
The Change event is raised only when end-user interacts with the component. That is why the change event is raised when you click with the mouse. If you need to trigger change event initially you can trigger "valueChange" event of the hidden input. Other option is just to call rebind() of the grid in the fill method of the combobox. Let me know if I am missing something. A test project will be really helpfull to understand the end goal.

Regards,
Georgi Krustev
the Telerik team