[Solved] Client selection not refreshing child grid

[Travis]

I'm trying to recreate the client selection example.  Everything seems to be working except that the child grid is not refreshing when a parent grid item is selected.  The child grid appears to be databinding and the correct results are being returned, but the grid is not refreshing.  I'm using v Q2 2011 with Razor:

View Code:

@{
    ViewBag.Title = "Index";
}

<h2>Restaurants</h2>

@(Html.Telerik().Grid((IEnumerable<FoodReviewsDAL.Restaurant>)ViewData["RestauarantsList"])
    .Name("Grid")
    .ToolBar(commands => commands.Insert())
    .DataKeys(keys => keys.Add(p => p.RestaurantID))
    .Columns(columns =>
    {
        columns.Bound(o => o.RestaurantID).Width(100);
        columns.Bound(o => o.Name).Width(100);
        columns.Bound(o => o.Description).Width(200);
        columns.Bound(o => o.DateCreated).Format("{0:MM/dd/yyyy}").Width(120);
        columns.Command(commands => { commands.Edit(); commands.Delete(); }).Width(200);
    })
    .DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectAjaxEditing", "Restaurants")
            .Insert("_InsertAjaxEditing", "Restaurants")
            .Update("_SaveAjaxEditing", "Restaurants")
            .Delete("_DeleteAjaxEditing", "Restaurants"))
    .Editable(editing => editing.Mode(GridEditMode.InLine))
    .Pageable()
    .Selectable()
    .Sortable()
    .ClientEvents(events => events.OnRowSelect("onRowSelected"))
    .RowAction(row =>
    {
        row.Selected = row.DataItem.RestaurantID.Equals(ViewData["id"]);
    })
)
    <br />
<h2>Reviews for (<span id="restaurantID">@ViewData["id"] </span>)</h2>
@(Html.Telerik().Grid((IEnumerable<FoodReviewsDAL.Review>)ViewData["ReviewsList"])
    .Name("ReviewsGrid")
    .Columns(columns =>
    {
        columns.Bound(o => o.RestaurantReviewID).Width(100);
        columns.Bound(o => o.Restaurant.Name).Width(100);
        columns.Bound(o => o.Description).Width(200);
        columns.Bound(o => o.Rating).Width(200);
    })
    .DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectAjaxEditing_Reviews", "Restaurants", new { restaurantID = "1" }))
    .ClientEvents(clientEvents => clientEvents.OnDataBinding("onDataBinding"))
    .Pageable()
    .Sortable()
)



<script type="text/javascript">
    var restaurantID;
    function onRowSelected(e) {
        var reviewsGrid = $('#ReviewsGrid').data('tGrid');
        restaurantID = e.row.cells[0].innerHTML;
        // update ui text
        $('#restaurantID').text(restaurantID);
        // rebind the related grid
        reviewsGrid.rebind();
    }
    function onDataBinding(e) {
        e.data = $.extend(e.data, { restaurantID: restaurantID });
    }
</script>

Controller Code:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FoodReviewsDAL;
using Telerik.Web.Mvc;

namespace FoodReviewsMF.Controllers
{
    public class RestaurantsController : Controller
    {
        private FoodReviewEntities db = new FoodReviewEntities();

        public ActionResult Index()
        {
            ViewData["RestauarantsList"] = db.Restaurants;
            int? selectedRestaurantID=db.Restaurants.First<Restaurant>().RestaurantID;
            ViewData["id"] = selectedRestaurantID;
            ViewData["ReviewsList"] = GetReviewsByRestaurantID(selectedRestaurantID);
            return View();
        }

        private IEnumerable<Review> GetReviewsByRestaurantID(int? selectedRestaurantID)
        {
            var revList = from r in db.Reviews
                          where r.RestaurantID == selectedRestaurantID
                          select r;
            return revList;
        }

        [GridAction]
        public ActionResult _SelectAjaxEditing()
        {
            return View(new GridModel<Restaurant> { Data = db.Restaurants });
        }

        [GridAction]
        public ActionResult _SelectAjaxEditing_Reviews(string RestaurantID)
        {
            RestaurantID = RestaurantID ?? "1";
            return View(new GridModel<Review>
            {
                Data = GetReviewsByRestaurantID(Int32.Parse(RestaurantID))
            });
        }
      }
}

[Travis]

I did notice in your example that you have some difference between the "Description" tab and the "View" tab.  The "View" tab includes this on the child grid:

.ClientEvents(clientEvents => clientEvents.OnDataBinding("onDataBinding"))

And this javascript at the bottom:

function onDataBinding(e) {        e.data = $.extend(e.data, { customerID: customerID });    }

The description tab has no onDataBinding event and has something different when rebinding:

ordersGrid.rebind({            customerID: customerID        });

[Rosen]

Hi Travis,

I'm afraid that I'm unable to recreate the described behavior locally. Therefore, could you please provide a runnable sample in which it can be observed.

Regards,
Rosen
the Telerik team

[Travis]

I've attached a sample project.

[Rosen]

Hi Travis,

The cause for the issue you have described is incorrect route settings. The both grids are set to use Restaurants controller, however in the sample you have provided there is not such controller but a Home controller. Setting grids routes to point to Home controller should fixed the issue.

Regards,
Rosen
the Telerik team

[Travis]

I expected this to not work, because it was just something I forgot when creating the sample project, but it did work!!  I did use the Telerik MVC 3 template to create my sample project, but not in my actual project.  Guess I will have to find out what the telerik template is adding that is causing this to work.  Thanks!