title: Getting ViewModel Values from MVC Kendo Grid using Javascript / jquery
body: <p>I am initializing a kendo grid like this:</p>
  
  <pre><code> @(Html.Kendo().Grid&lt;EPSModels.Models.SuretyViewModel&gt;()
      .Name("Grid")
      .Columns(columns =&gt;
      {
          columns.Bound(c =&gt; c.SuretyName);
          columns.Bound(c =&gt; c.Address);
          columns.Bound(c =&gt; c.City);
          columns.Bound(c =&gt; c.State);
          columns.Bound(c =&gt; c.ZipCode);
          columns.Command(command =&gt; { command.Edit().Text(" ").HtmlAttributes(new { @class = "fa fa-pencil", @style = "margin-right:15px" }); command.Destroy().Text(" ").HtmlAttributes(new { @class = "fa fa-trash-o" }); }).Title("Actions").Width("180px");
      })
      .HtmlAttributes(new { style = "height: 380px;" })
      .Pageable(pager =&gt; pager.Input(true).PageSizes(true).PageSizes(new int[] { 10, 25, 50, 100 }).PreviousNext(true).Numeric(false).Info(true))
      .Sortable(sortable =&gt; sortable.AllowUnsort(true).SortMode(GridSortMode.SingleColumn))
      .Resizable(resizable =&gt; resizable.Columns(true))
      .Reorderable(reorder =&gt; reorder.Columns(true))
      .Scrollable(scroll =&gt; scroll.Height(300))
      .Selectable(selectable =&gt; selectable.Type(GridSelectionType.Row))
              .Editable(editable =&gt; editable.Mode(GridEditMode.PopUp).TemplateName("SuretyEditor").Window(w =&gt; w.Title("Add/Edit Surety").Width(650)))
      .Events(e =&gt; { e.DataBound("OnDataBound"); e.Edit("onEdit"); })
      .ToolBar(toolbar =&gt; toolbar.Create().Text("Add Surety"))
      .DataSource(dataSource =&gt; dataSource
      .Ajax()
              .Sort(sort =&gt; sort.Add("CreatedDate").Descending())
      .Events(events =&gt; events.Error("grid_error"))
          .Model(model =&gt;
          {
              model.Id(p =&gt; p.SuretyId);           
          })
      .Create(update =&gt; update.Action("CreateSurety", "Bonds"))
      .Destroy(update =&gt; update.Action("DeleteSurety", "Bonds"))
      .Update(update =&gt; update.Action("UpdateSurety", "Bonds"))
      .Read(read =&gt; read.Action("GetSureties", "Bonds").Data("GetSuretyNameForFilter"))
      ))
  </code></pre>
  
  <p>The code for the popup/editor template is like this:</p>
  
  <pre><code>@Html.LabelFor(model =&gt; model.State, new {@class = "control-label col-md-2 col-sm-3 col-xs-4"})
          &lt;div class="col-md-8 col-sm-6 col-xs-5"&gt;
              @Html.DropDownListFor(model =&gt; model.State, new SelectList(
                  (System.Collections.IEnumerable)ViewData["States"],
                  "Value",
                  "Text",
                  Model.State), new { id = "ddlStates", @style = "min-width:172px;" })
              @Html.ValidationMessageFor(model =&gt; model.State)
          &lt;/div&gt;
  </code></pre>
  
  <p>How can I access the Model.State property in Javascript ? I have tried the following to no avail:</p>
  
  <p>alert(@Model.State);</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var state = document.getElementById("ddlStates");
  alert(state[state.selectedIndex].value);
  &lt;/script&gt;
  </code></pre>
  
  <p>Any hints or ideas would be much appreciated</p>