Telerik Grid for ASP.NET MVC2 Ajax Binding doesn't work / routes to wrong actions

Question

The gird loads b/c of server bindings. All the other actions are either posting to the wrong route, or to the default action: Insert posts to /EditOrder action Edit posts to this address: http://localhost:20588/Orders/EditOrder/sdsddd?OrderID=2&CustomerID=1&ItemsInOrderGrid-mode=edit which is meaningless (sdsddd is the ItemID) non of the breakpoints inside the AJAX sections in the controller are reached. Any idea what am I doing wrong ?

Thanks, Dani

here is the view code:

 <%=
                Html.Telerik().Grid(Model.ItemsInOrderList)
                    .Name("ItemsInOrderGrid")
                                    .DataKeys(dataKeys =>
                                    {
                                        dataKeys.Add(e => e.OrderID);
                                        dataKeys.Add(e => e.ItemID);
                                    })
                    .ToolBar(commands => commands.Insert())
                    .DataBinding(dataBinding =>
                        dataBinding.Ajax()    //Ajax binding
                .Select("ItemsGridAjax", "Orders", new {OrderID = Model.order.OrderID})
                .Insert("InsertItemsGridAjax", "Orders", new {OrderID = Model.order.OrderID})
                .Update("UpdateItemsGridAjax", "Orders")
                .Delete("DeleteItemsGridAjax", "Orders"))
                    //.BindTo(Model.ItemsInOrderList)
                    .Columns(c =>
                        {
                            c.Bound(o => o.ItemID);
                            c.Bound(o => o.OrderID).Column.Visible = false;
                            c.Bound(o => o.ItemDescription);
                            c.Bound(o => o.NumOfItems);
                            c.Bound(o => o.CostOfItem);
                            c.Bound(o => o.TotalCost);
                            c.Bound(o => o.SupplyDate);
                            c.Command(commands =>
                                {
                                    commands.Edit();
                                    commands.Delete();
                                }).Width(200);
                        })

            %>

Here is the code in the controller:

[GridAction]    
public ActionResult ItemsGridAjax(int OrderID)       
{          
return View(ordersRepository.GetOrderItemsTK(OrderID));     
}

[HttpPost]
        [GridAction]
        public ActionResult InsertItemdGridAjax(int OrderID)
        {
            //Create a new instance of the EditableCustomer class.
            ItemsInOrder newItem = ItemsInOrder.CreateItemsInOrder(OrderID, "");
            newItem.OrderID = OrderID;

            //Perform model binding (fill the customer properties and validate it).
            if (TryUpdateModel(newItem))
            {
                //The model is valid - insert the customer.
                bool res = ordersRepository.InsertItemToOrder(OrderID, newItem);
            }

            //Rebind the grid
            return View(ordersRepository.GetOrderItemsTK(OrderID));
        }



[HttpPost]
  [GridAction]
  public ActionResult UpdateItemsGridAjax(int OrderID, string ItemID)
  {
      //Find a customer whose CustomerID is equal to the id action parameter
      ItemsInOrder item = ordersRepository.FindItemByID(OrderID,ItemID);

      if (item != null)
      {
          //Perform model binding (fill the customer properties and validate it).
          if (TryUpdateModel(item))
          {
              //The model is valid - update the customer and redisplay the grid.
              ordersRepository.UpdateItem(item);
          }
      }
      // TODO: Add try-catch with error reporting.
      //Rebind the grid
      return View(ordersRepository.GetOrderItemsTK(OrderID));
  }

[HttpPost]
        [GridAction]
        public ActionResult DeleteItemsGridAjax(int OrderID, string ItemID)
        {
            //Find the customer with the specified id
            ItemsInOrder item = ordersRepository.FindItemByID(OrderID, ItemID);

            if (item != null)
            {
                //Delete the customer
                ordersRepository.DeleteItem(item);
            }

            //Rebind the grid
            return View(ordersRepository.GetOrderItemsTK(OrderID));
        }

Answer 1

I'm not sure if you need the [HttpPost] attribute (I think just [GridAction] will be sufficient) on those Ajax Actions, perhaps try removing those and see if that fixes the problem.

If that didn't work, try returning a GridModel in your actions like so:

        [GridAction]
        public ActionResult InsertItemdGridAjax(int OrderID)
        {
            //Omitted Code

           return View(new GridModel(ordersRepository.GetOrderItemsTK(OrderID)));
        }

You could also use syntax similar to the following (as I think the GridModel likes having a total):

        [GridAction]
        public ActionResult InsertItemdGridAjax(int OrderID)
        {
            //Omitted Code

            //Get List of Order Items
            List<OrderItem> list = ordersRepository.GetOrderItemsTK(OrderID));

            return View(new GridModel
            {
                Data = list,
                Total = list.Count
            });
        }

Answer 2

A had same problem but in MVC 3

The solution was just to add appropriate *.js scripts into project, see this and add @(Html.Telerik().ScriptRegistrar().jQuery(false)) into end of the _Layout.cshtml file

A then routing goes fine!