[Solved] Trouble Selecting Item via ClientSide Binding

[King Wilder]

I know I'm probably missing something here, but here's what I trying to do...

I have a simple blog application and when I create a new Blog or edit an existing Blog, I need to have a DropDown on the page with a list of BlogCategories that this Blog belongs to.  I can fill and display the drop down with the categories without a problem.  The problem is displaying the selected value for the BlogCategory when editing a blog.  Presently the Drop down is populated, but no item is selected.

I don't think the SelectedIndex method will work because I'll have to do some calculation to figure out what index it is in the list as just opposed to what the "value" of the item is. 

On the Create view, I want to display the list of items in the DropDown via built-in ajax loading for the user to select. 
   This works!

On the Edit view, I want to display the same list but have the selected item selected.
   I can't get the selected item to be displayed.

Here's my Create View:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<nTier.Mvc.ViewData.BlogViewData>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <%= Model.SiteTitle %> - <%= Model.PageTitle %>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2><%= Model.PageTitle %></h2>

    <% Html.RenderPartial("BlogFormControl", Model.Blog); %>

</asp:Content>

Here's the Edit View:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<nTier.Mvc.ViewData.BlogViewData>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <%= Model.SiteTitle %> - <%= Model.PageTitle %>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2><%= Model.PageTitle %></h2>
    <% Html.RenderPartial("BlogFormControl", Model.Blog); %>

</asp:Content>

Here's the "BlogFormControl":

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<PIA40.BusinessObjects.Blog>" %>

    <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary() %>

        <fieldset>
            <%= Html.EditorForModel() %>
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%: Html.ActionLink("Back to List", "Index") %>
    </div>

Here's my BlogCategoryDropDown.ascx control in the /Shared/EditorTemplates folder:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%= Html.Telerik().DropDownList()
    .Name("BlogCategoryID")
    .DataBinding(binding => binding.Ajax()
        .Select("_GetCategories", "Blog"))

    %>

Here's my Blog business object model:

/*
===============================================================
              Condor Code Generator - ver 1.0.2
       Generated using MyGeneration Software - ver 1.3.0.9
       Created By King Wilder - http://www.kingwilder.com
                      9/22/2010 3:27:28 PM
===============================================================
*/

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;

using System.Web.Mvc;

namespace PIA40.BusinessObjects
{
    public class Blog
    {

        #region Properties

        [ScaffoldColumn(false)]
        public int ID { get; set; }

        [Required(ErrorMessage = "Title is required.")]
        [StringLength(50, ErrorMessage="Title must be between 1 and 50 characters.")]
        [DisplayName("Title")]
        public string Title { get; set; }

        [DataType(DataType.MultilineText)]
        [DisplayName("Short Description")]
        public string ShortDescription { get; set; }

        [DisplayName("Date Posted")]
        [HiddenInput(DisplayValue = false)]
        public DateTime DatePosted { get; set; }

        [DisplayName("Posted By")]
        [HiddenInput(DisplayValue = false)]
        public Guid PostedBy { get; set; }

        [UIHint("BlogCategoryDropDown")]  // notice this UIHint
        [DisplayName("Blog Category")]
        public int? BlogCategoryID { get; set; }

        [DisplayName("Publish")]
        public bool Publish { get; set; }

        [HiddenInput(DisplayValue=false)]
        public string rowversion { get; set; }


        #endregion

    }
}

Notice I have the BlogCategoryID property decorated with the UIHint that points to the BlogCategoryDropDown.ascx control.

Here's the BlogController JSON action method:

public ActionResult _GetCategories(string text)
{
    return new JsonResult { Data = new SelectList(categoryService.GetAll(), "ID", "CategoryName", text) };
}

And finally here's my Create action:

public ActionResult Create()
{
    BlogViewData viewData = ViewDataFactory.CreateBaseViewData<BlogViewData>("Create Blog");
    viewData.Blog = new Blog();
    return View(viewData);
}

Sorry about all the code, but I thought more might be better than less in order to help diagnose my problem.

Any help would be appreciated.

Thanks,

King Wilder

[Georgi Krustev]

Hi King,

Thank you for the code snippets.

I noticed that _GetCategories Action returns JSONResult with SelectList collection, which will have selected item in it. Unfortunately currently ComboBox UI component does not care about the selected item in this SelectList collection. This is the reason, why you do not see selected item in the combobox.

This issue is fixed and the fix will be included in the next official release of Telerik Components for ASP.NET MVC scheduled for the end of September.

As a workaround you can wire OnDataBound event handler and select the item you want in it:

function dataBound(e) {

                var combo = $(this).data('tComboBox');
                var indexes = $.map(combo.data, function (item, index) {
                    if (item.Selected) return index;
                });
                if(indexes.length > 0) combo.select(indexes[0]);
            }

Regards,
Georgi Krustev
the Telerik team

[King Wilder]

Georgi,

Thanks for the work around.  This will do fine.  I just wanted to make sure that my IQ didn't drop severely below the 500-range that it's in now.  ;^)

Thanks,

King Wilder