Question

how to bind Telerik MVC combobox with US States List and pass values from View to controller?

Binding Telerik MVC ComboBox with US State List and passing Selected value back to Controller.

I want to bind Telerik MVC Combobox using Javascript function . I have created US State List in a Javascript Function and I am assigning this US State List to my ComboBox…To send selected US State back to Controller , I have taken a HTML.TextBoxFor and set its visibility to hidden … in my controller I am trying to access value of this perticular TextBox but it is always showing null .. Plz Help

following is my code:-

    <%= Html.Telerik().ComboBox()
    .Name("ComboBox")
    .ClientEvents(events => events
        .OnDataBinding("onDataBinding")
                           .OnChange("getComboBox")
    )
    %>
    <%: Html.TextBoxFor(model => model.EnrolRegAcntDescriptor.state, new { ID = "statetext", style = "visibility:hidden;width:10px" })%>
     <script type="text/javascript">
    function getComboBox() {
        //"ComboBox" is the value specified by the Name() method.
        debugger;
        var combobox = document.getElementById('ComboBox-value').value;
        var combotext = document.getElementById('ComboBox-input').value; //$("#ComboBox").data("tComboBox");
        var index = $("#ComboBox").data("tComboBox").value();
        //  var text = combotext.options[combotext.selectedIndex].value;
      //  var MySelectedvalue = document.getElementByid('tComboBox').options[document.getElementByid('tComboBox').selectedIndex].value
        var states = document.getElementById('statetext').value;
        states = combotext;
                 //   comboBox.select(index);
        //alert(index);
        return states;
    }

    <script type="text/javascript">
function onDataBinding(e) {
        var comboBox = $('#ComboBox').data('tComboBox');
        comboBox.dataBind([
            { Text: "ALABAMA", Value: "ALABAMA" },
            { Text: "ALASKA", Value: "ALASKA", Selected: true },
            { Text: "ARIZONA ", Value: "ARIZONA" },
            { Text: "ARKANSAS", Value: "ARKANSAS" },
            { Text: "CALIFORNIA", Value: "CALIFORNIA" },
            { Text: "COLORADO", Value: "COLORADO" },
            { Text: "CONNECTICUT", Value: "CONNECTICUT" },
            { Text: "DELAWARE ", Value: "DELAWARE" },
            { Text: "FLORIDA", Value: "FLORIDA" },
            { Text: "GEORGIA", Value: "GEORGIA" },
            { Text: "HAWAII", Value: "HAWAII" },
            { Text: "IDAHO", Value: "IDAHO" },
            { Text: "ILLINOIS", Value: "ILLINOIS" },
            { Text: "INDIANA", Value: "INDIANA" },
            { Text: "IOWA", Value: "IOWA" },
            { Text: "KANSAS", Value: "KANSAS" },
            { Text: "KENTUCKY", Value: "KENTUCKY" },
            { Text: "LOUISIANA", Value: "LOUISIANA" },
            { Text: "MAINE", Value: "MAINE" },
            { Text: "MARYLAND", Value: "MARYLAND" },
            { Text: "MASSACHUSETTS", Value: "MASSACHUSETTS" },
            { Text: "MICHIGAN", Value: "MICHIGAN" },
            { Text: "MINNESOTA", Value: "MINNESOTA" },
            { Text: "MISSISSIPPI", Value: "MISSISSIPPI" },
            { Text: "MISSOURI", Value: "MISSOURI" },
            { Text: "MONTANA", Value: "MONTANA" },
            { Text: "NEBRASKA", Value: "NEBRASKA" },
            { Text: "NEVADA", Value: "NEVADA" },
            { Text: "NEW HAMPSHIRE", Value: "NEW HAMPSHIRE" },
            { Text: "NEW JERSEY", Value: "NEW JERSEY" },
            { Text: "NEW MEXICO", Value: "NEW MEXICO" },
            { Text: "NEW YORK", Value: "NEW YORK" },
            { Text: "NORTH CAROLINA", Value: "NORTH CAROLINA" },
            { Text: "NORTH DAKOTA", Value: "NORTH DAKOTA" },
            { Text: "OHIO", Value: "OHIO" },
            { Text: "OKLAHOMA", Value: "OKLAHOMA" },
            { Text: "OREGON", Value: "OREGON" },
            { Text: "PALAU", Value: "PALAU" },
            { Text: "PENNSYLVANIA", Value: "PENNSYLVANIA" },
            { Text: "RHODE ISLAND", Value: "RHODE ISLAND" },
            { Text: "SOUTH CAROLINA", Value: "SOUTH CAROLINA" },
            { Text: "SOUTH DAKOTA", Value: "SOUTH DAKOTA" },
            { Text: "TENNESSEE", Value: "TENNESSEE" },
            { Text: "TEXAS", Value: "TEXAS" },
            { Text: "UTAH", Value: "UTAH" },
            { Text: "VERMONT", Value: "VERMONT" },
            { Text: "VERGINIA", Value: "VERGINIA" },
            { Text: "WASHINGTON", Value: "WASHINGTON" },
            { Text: "WEST VIRGINIA", Value: "WEST VIRGINIA" },
            { Text: "WISCONSIN", Value: "WISCONSIN" },
            { Text: "WYOMING", Value: "WYOMING" }
        ], true /*preserve state*/);
    }

Answer 1

Found the answer on my own .Done few changes in the code as follows ..

      <%: Html.TextBoxFor(model => model.EnrolRegAcntDescriptor.state, new { type="Hidden", ID = "statetext", style = "width:10px" })%> 
      function getComboBox() {


        var combobox = document.getElementById('ComboBox-value').value;
        var combotext = document.getElementById('ComboBox-input').value; 
        var index = $("#ComboBox").data("tComboBox").value();

        var states = document.getElementById('statetext').value;
        document.getElementById('statetext').value = index;                    
      //  alert(index);
        return states;
    }