[Solved] ajaxRequest() error when grid is empty

[Chris]

I have a scenario where I am trying to add items to a grid. Basically you create a blend, then you add rows to a "blend bean" grid. If the grid is empty, I get the error described below. If they grid has at least one item in it, I get no errors. 

My view code is as follows:

<div>
      @(Html.Telerik().Grid(Model.BlendBeans)
                  .Name("blendBeans-grid")
                  .DataKeys(keys =>
                     {
                         keys.Add(x => x.Id);
                     })
                  .Columns(columns =>
                  {
                      columns.Bound(x => x.Bean.Name).Width(200).ReadOnly();
                      columns.Bound(x => x.BeanPercent).Width(100);
                      columns.Command(commands =>
                      {
                          commands.Edit().Text("Edit");
                          commands.Delete().Text("Delete");
                      }).Width(250);

                  })
                  .Editable(x =>
                  {
                      x.Mode(GridEditMode.InLine);
                  })
                  .DataBinding(dataBinding =>
                  {
                      dataBinding.Ajax().Select("BlendBeanByBlendIdList", "Coffee", new { blendId = Model.Id })
                          .Update("BlendBeanUpdate", "Coffee")
                          .Delete("BlendBeanDelete", "Coffee");
                  })
                  .EnableCustomBinding(true))
  </div>
      }
  <p>
      <strong>Add New Blend Bean</strong>
  </p>
  <script type="text/javascript">
      //Handles the click event on the button
      $(document).ready(function () {
          $('#addBlendBean').click(function () {
              var beanId = $("#@Html.FieldIdFor(model => model.BlendBean.Bean)").val();
              var beanPercent = $("#@Html.FieldIdFor(model => model.BlendBean.BeanPercent)").val();

              $('#addBlendBean').attr('disabled', true);
              $.ajax({
                  cache: false,
                  type: "POST",
                  url: "@(Url.Action("BlendBeanAdd", "Coffee"))",
                  data: { "blendId": @Model.Id, "beanId": beanId, "beanPercent": beanPercent},
                  success: function (data) {
                      var blendBeanGrid = $("#blendBeans-grid").data('tGrid');
                      blendBeanGrid.rebind();
                      $('#addBlendBean').attr('disabled', false);
                  },
                  error: function (xhr, ajaxOptions, thrownError){
                      alert('Failed to add blend bean.');
                      $('#addBlendBean').attr('disabled', false);
                  }
              });
          });
      });
  </script>
  <table class="adminContent">
      <tr>
          <td class="adminTitle">
              @Html.NopLabelFor(model => model.Name)
          </td>
          <td class="adminData">
              @Html.DisplayTextFor(model => model.Name)
          </td>
      </tr>
      <tr>
          <td class="adminTitle">
              @Html.NopLabelFor(model => model.BlendBean.Bean):
          </td>
          <td class="adminData">
              @Html.DropDownListFor(model => model.BlendBean.Bean, Model.AvailableBeans)
              @Html.ValidationMessageFor(model => model.BlendBean.Bean.Name)
          </td>
      </tr>
      <tr>
          <td class="adminTitle">
              @Html.NopLabelFor(model => model.BlendBean.BeanPercent):
          </td>
          <td class="adminData">
              @Html.TextBoxFor(model => model.BlendBean.BeanPercent)
              @Html.ValidationMessageFor(model => model.BlendBean.BeanPercent)
          </td>
      </tr>
      <tr>
          <td colspan="2" align="left">
              <input type="button" id="addBlendBean" class="t-button" value="Add Blend Bean" />
          </td>
      </tr>
  </table>

Doing a network trace I am getting what appear to be acceptable headers and response:

The Headers:

Request URL:http://localhost:2619/Admin/Coffee/BlendBeanAdd
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:36
Content-Type:application/x-www-form-urlencoded
Cookie:.ASPXANONYMOUS=ZNsLGk_8zQEkAAAAMzg1MjU5OGEtZDY5NC00Nzk5LThhMzQtMDI0NzczODZhM2FhGNSyzRzdx_XKKPAmpYF-pWZoBITgwUmHePiyS7rtgls1; NOPCOMMERCE.AUTH=46375540E1764A443EAE64799C650EC2223032B3E2FB6ADBD63529E7C6980F3B8C9674623A56EA81629D963DFA7824A6E4FF7792D082C035A7AE6F988E68688AD2ECCC5BA75FBA3B2F489850ABA21A24F483642F69B27C82ABD64A9CFC67D23CF0BEDEC2FDC81696AB088F78B223F80B51966F57EDDB83ECFB9991DF78E31867EDAC86E84E1B4F4239B2FAD3E6DC917E8A7A1A534160ABBCA967E88F8F65F3A13DE96D2B49FE379DB80A5035803292D7; ASP.NET_SessionId=jpdprn2nfj1kayqzgi5z23n4; Nop.customer=42efc4bd-5168-41d4-adf9-1428ac1f1026
Host:localhost:2619
Origin:http://localhost:2619
Referer:http://localhost:2619/Admin/Coffee/BlendEdit/14
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
X-Requested-With:XMLHttpRequest
Form Dataview URL encoded
blendId:14
beanId:25
beanPercent:100
Response Headersview source
Cache-Control:private
Connection:Close
Content-Length:15
Content-Type:application/json; charset=utf-8
Date:Fri, 14 Dec 2012 22:00:01 GMT
Server:ASP.NET Development Server/11.0.0.0
Set-Cookie:Nop.customer=42efc4bd-5168-41d4-adf9-1428ac1f1026; expires=Sat, 14-Dec-2013 22:00:01 GMT; path=/; HttpOnly
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:4.0

And the response also seems correct:

{"Result":true}

Yet, I am still getting the following error:

Uncaught TypeError: Cannot call method 'ajaxRequest' of undefined 11:135
$.ajax.success                  11:135
n                                      jquery-1.7.1.min.js:2
o.fireWith                          jquery-1.7.1.min.js:2
w                                      jquery-1.7.1.min.js:4
d                                      jquery-1.7.1.min.js:4


Any help on this?