How do you initialize the selected index of rad combo boxes in a sitefinity designer?

Question

I made a sitefinity mvc widget with designer, using thunder. The widget has 4 strings: 1 for a checkbox, 2 for a title and content, and 1 for a radcombobox selection. I couldn't get functionality on the radcombobox to work (couldn't set the selectedindex). I am able to change the initial value and title of the radcombobox, as well as get the value properly, by using this code:

SitefinityWebApp.WidgetDesigners.PanelWidget.PanelWidgetDesigner.prototype = {
refreshUI: function () {
    var controlData = this._propertyEditor.get_control().Settings;
    jQuery(this.get_panelStyle())[0].value = controlData.PanelStyle;
    jQuery(this.get_panelStyle())[0].title = controlData.PanelStyle;
}
applyChanges: function () {
    var controlData = this._propertyEditor.get_control().Settings;
    controlData.PanelStyle = jQuery(this.get_panelStyle()).val();
}
get_panelStyle: function () { return this._panelStyle; },
set_panelStyle: function (value) { this._panelStyle = value; }
}

I am thinking that the refreshUI function is where I need to set the radcombobox selectedIndex, but it appears that radcomboboxes don't have selectedIndex attributes! Should I be doing something like this:

refreshUI: function () {
    var controlData = this._propertyEditor.get_control().Settings;
    jQuery(this.get_panelStyle())[0].value = controlData.PanelStyle;
    jQuery(this.get_panelStyle())[0].title = controlData.PanelStyle;
}

Or, in my ascx file, should I be putting in some script tags, with some javascript, like this:

<ol>
<li class="sfFormCtrl">
    <asp:Label runat="server" AssociatedControlID="PanelStyle" CssClass="sfTxtLbl">Panel Style</asp:Label>
    <asp:RadComboBox ID="PanelStyle" runat="server" CssClass="sfTxt"  />
    <div class="sfExample">The panel style to be displayed</div>
</li>
</ol>

<script type="text/javascript">
function pageLoad() {
    var combo = $find(<%= PanelStyle.ClientID%>);
    var item = combo.findItemByValue("3");
    item.SELECT();
}
</script>

By the way, this javascript code doesn't work. It throws the error: Uncaught TypeError: Cannot read property 'findItemByValue' of null. Now I know that means that the $find isn't getting the radcombobox, but every piece of code online says to use that method.

Finally, if this seems like too much, please let me know. I'm not good with stack overflow questions.

Answer 1

So I found the answer. I hope this will help someone in the future. I ended up changing from radcombobox to raddropdownlist. It can probably be done with radcombobox too, but I haven't yet done this.

Note: all of the code for updating the raddropdownlist needs to be in the .ascx file as a script tag, not in the .js file.

For a raddropdownlist, there is a OnClientLoad event. You can put this in the .ascx file, like this:

<li class="sfFormCtrl">
    <asp:Label runat="server" AssociatedControlID="Tag" CssClass="sfTxtLbl">Tag Size</asp:Label>
    <asp:RadDropDownList ID="Tag" runat="server" CssClass="sfTxt" OnClientLoad="timer" />
    <div class="sfExample">H1, H2, H3, H4, H5, or H6</div>
</li>

I then did some javascript in the .ascx file:

<script type="text/javascript">
function timer(sender, tagvar) {
    window.setTimeout(function () { changeUP(sender, tagvar) }, 0000);
}

function changeUP(sender) {
    var combo2 = $telerik.$("#<%= Tag.ClientID%>");
    var value = combo2.val();

    var combo = sender;
    var item = combo.get_selectedItem();
    item.set_selected(false);
    var items = combo.get_items();

    for (var i = 0; i < 6; i++) {
        var index = items.getItem(i);
        if (index.get_text() === value) {
            index.set_selected(true);
        }
    }
}

To briefly explain, I make a timer so that everything gets loaded, but you can set the timer to 0. The onclientload event calls the timer function, which then calls the changeUP function, which gets the value, and loops through the items, and then sets the selected item which equals the value.

I ended up using the documentation for telerik dropdownlists: http://docs.telerik.com/devtools/aspnet-ajax/controls/dropdownlist/client-side-programming/objects/raddropdownlist-object

Edit: The .js file needs some code too:

refreshUI: function () {
    var controlData = this._propertyEditor.get_control().Settings;
    jQuery(this.get_panelStyle()).val(controlData.PanelStyle);
},
applyChanges: function () {
    var controlData = this._propertyEditor.get_control().Settings;
    controlData.PanelStyle = jQuery(this.get_panelStyle()).val();
}

Note: this is only for the raddropdownlist item. I removed code for the other items I have.