title: Uniquely naming Javascript Kendo objects within MVC 4 view
body: <p>I'm trying to load multiple Kendo grids within the same partial view loaded from the same controller.  The number of grids displayed is dynamic- it depends upon user selection.</p>
  
  <p>The problem is that all instantiations of the grid within the HTML page are displaying the same dataset, the one corresponding to the last grid loaded.  I think that this is because the grids all have the same name:</p>
  
  <pre><code>  @(Html.Kendo().Grid&lt;RegistrationManagement.Models.Member&gt;()
      .Name("Grid")
      .Columns(columns =&gt;
      {
          columns.Bound(p =&gt; p.LastName);
          columns.Bound(p =&gt; p.FirstName);
          columns.ForeignKey(p =&gt; p.MemberStatusID,
                        (System.Collections.IEnumerable)ViewData["status"], "Value", "Text");
          columns.Bound(p =&gt; p.RegistrationYear);
          columns.Bound(p =&gt; p.StreetAddress1);
          columns.Bound(p =&gt; p.StreetAddress2);
          columns.Bound(p =&gt; p.State);
          columns.Bound(p =&gt; p.ZipCode);
          columns.Bound(p =&gt; p.Email);
          columns.Bound(p =&gt; p.PhoneNumber);
          columns.Command(command =&gt; { command.Custom("Edit2").Click("CustomEdit");
                command.Edit(); command.Destroy(); }).Width(160);
      })
              .ToolBar(toolbar =&gt; toolbar.Create())
          //    .Editable(editable =&gt; editable.Mode(GridEditMode.InCell))
      .Editable()
      .Groupable()
      .Pageable()
      .Sortable()
      .Scrollable()
      .Filterable()
      .DataSource(dataSource =&gt; dataSource
          .Ajax()
          .PageSize(20)
          .Batch(true)
          .ServerOperation(true)
          .Events(events =&gt; events.Error("error_handler"))
          .Model(model =&gt;
              {
                  model.Id(p =&gt; p.Id);
                  model.Field(p =&gt; p.MemberStatus).Editable(false);
              })
          .Read(read =&gt; read.Action("Grid_Member_Read", "Member", new { ClubID = @ViewBag.ClubID }))
          .Create(update =&gt; update.Action("Grid_Member_Create", "Member", new { ClubID = @ViewBag.ClubID }))
          .Update(update =&gt; update.Action("Grid_Member_Update", "Member"))
          .Destroy(update =&gt; update.Action("Grid_Member_Destroy", "Member"))
       )
  )
  </code></pre>
  
  <p>So it's one of two problems: either something's structurally wrong and I can't populate multiple grids with distinct datasets from the same MVC controller using AJAX (don't know), or I need to give the grids unique names.
     I'd like to take the second path, hopefully by naming the grids dynamically based upon a ViewBag variable.  I've tried this:</p>
  
  <pre><code>.Name(Html.ViewBag.ID)
  </code></pre>
  
  <p>which I set in the controller, but when I run that, IE tells me:</p>
  
  <pre><code>Compiler Error Message: CS1977: Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type
  
  Source Error:
  Line 3:  @(Html.Kendo().Grid&lt;RegistrationManagement.Models.Member&gt;()
  Line 4:      .Name(Html.ViewBag.PrettyID)
  Line 5:      .Columns(columns =&gt;
  Line 6:      {
  Line 7:          columns.Bound(p =&gt; p.LastName);
  </code></pre>
  
  <p>which I think is due to the Html.ViewBag.PrettyID not being parsed.  How can I create a unique name for each Kendo grid? </p>
  
  <p>Thanks!</p>