Getting the selected value of a combobox

[John]

I have cascading combo boxes (which work) but i cant figure out how to pass the selected values of the comboboxes back to my controller. Forgot to mention. I did look at the help section on it. And here is my code.

public ActionResult Index(int cid = 0, int foid = 0)
        {
            var model = (TimeTrackingViewModel)TempData["TimeTrackingViewModel"] ??
                        new TimeTrackingViewModel(_cdp.GetAllCompanies(), _fodp.GetAllFieldOffices());

            
            if(model.FieldOfficeId >= 0)
            {
                model.SearchResults = new List<FieldOffice>();
                model.SearchResults.Add(_fodp.GetFieldOfficeById(model.FieldOfficeId));
            }
            else if(model.CompanyId >= 0)
            {
                model.SearchResults = _fodp.GetFieldOfficesForCompany(model.CompanyId);
            }

            TempData["TimeTrackingViewModel"] = model;
            TempData["TimeTrackingViewModel"] = TempData["TimeTrackingViewModel"];
            return View(model);
        }

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Domain.ViewModels.TimeTrackingViewModel>"%>
<%@ Import Namespace="Web.Extensions" %>

<script type="text/javascript">

    function onChange(e) {
        var ddl = $('#CompanyDDL').data('tComboBox');
        if (ddl.ajax) {
            start = '?';
            if (ddl.backupAjax.selectUrl.indexOf('?') != -1) {
                start = '&';
            }
            ddl.ajax.selectUrl = ddl.backupAjax.selectUrl + start + "itemId=" + e.value;
            ddl.reload();
        }
    }
    function onLoad() {
        var ddl = $('#FieldOfficeDDL').data('tComboBox');
        if (ddl && ddl.ajax) {
            ddl.backupAjax = new Object;
            ddl.backupAjax.selectUrl = ddl.ajax.selectUrl;
        }
    }

</script>

<%
    Html.BeginForm("Index", "TimeTracking");
%>   
    <div id="searchpanel">
       <h2 color="#780000">Find a Company</h2>
       <table>
            <tr>
                <td>
                    <img src="../../Content/images/magnify-large.jpg" class="plusLg" width="111" height="111" align="middle" />
                </td>
                <td>
                    <table>
                        <tr>
                            <td>
                                <%: Html.Label("Company: ") %>
                            </td>
                            <td>
                                <%: Html.Label("Field Office: ") %>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <% Html.Telerik()
                                       .ComboBox()
                                       .Name("cid")
                                       .AutoFill(true)
                                       .BindTo(Model.CompanySelectList)
                                       .SelectedIndex(Model.CompanyId)
                                       .Name("CompanyDDL")
                                       .ClientEvents(ce => ce.OnChange("onChange"))
                                       .Render(); %>
                            </td>
                            <td>
                                <% Html.Telerik()
                                       .ComboBox()
                                       .Name("foid")
                                       .AutoFill(true)
                                       .SelectedIndex(0)
                                       .Name("FieldOfficeDDL")
                                       .DataBinding(d => d.Ajax().Select("_AjaxFilterFieldOfficeList", "TimeTracking"))
                                       .ClientEvents(ce => ce.OnLoad("onLoad"))
                                       .Render(); %>
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td>
                                <button type="submit" class="t-button t-state-default">Search</button>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
       </table>
    </div>

    <div id="resultspanel">

        <%  Html.Telerik().Grid(Model.SearchResults)
            .Name("Grid")
            .Pageable(p => p.PageSize(10))
            .Sortable()
            .Render();
        %>  

    </div>

<%
    Html.EndForm();
%>

As you can see, my comboboxes are in a form, and my controller has an action method. Which does not catch the values.

[Georgi Krustev]

Hello John,

After quick review of the code snippets I notice that you are setting twice the name of the components. First you call .Name("cid"), which will set name of the component to "cid". In the end of the declaration .Name("CompanyDDL"), which will change the name from "cid" to .Name("CompanyDDL"). Hence the value of the ComboBox UI component will be send to the server with "CompanyDDL".

Removing .Name("CompanyDDL") will fix the problem. Notice that all combobox has the same issue.

Regards,
Georgi Krustev
the Telerik team