[Solved] Telerik mvc grid ForeignKey column reload

[Samantha]

I have a grid where first 2 columns are bound with ForeignKey (Category and Product). The value of the first dropdown dictates the value of the second. How can I reload the values of the second dropdown after the first dropdown value changes? 

here's my sample code

@(Html.Telerik().Grid<Order>().HtmlAttributes(new { style = "width: 700px" })
.Name("grdOrders")
.ToolBar(tb => tb.Insert())
.DataBinding(binding => binding.Ajax()
    .Select("GetOrders", "Home")
    .Update("UpdateOrder", "Home")
    .Insert("InsertOrder", "Home")
    .Delete("DeleteOrder", "Home"))
.DataKeys(keys => keys.Add(o => o.OrderID))
.Columns(cols =>
{
    cols.Bound(c => c.OrderID).Width(100).ReadOnly();
    cols.Bound(c => c.Name);
    cols.ForeignKey(c => c.ItemCategoryID, (System.Collections.IEnumerable)ViewData["Categories"],
                    "ItemCategoryID", "CategoryName").Title("dbCategory").Width(300);        
    cols.ForeignKey(c => c.ItemID, (System.Collections.IEnumerable)ViewData["dbItems"],
                "ItemID", "ItemName").Width(200).Title("Item");
    cols.Command(cmd =>
    {
        cmd.Edit().ButtonType(GridButtonType.Image);
        cmd.Delete().ButtonType(GridButtonType.Image);
    }).Title("Commands").Width(100);
})