title: Bind KendoUI grid with Model data in MVC 4
body: <p>For example, I have a view with model <code>IEnumerable&lt;Correspondence&gt;</code>. I want to bind it to KendoUI grid. What should I do? I've tried</p>
  
  <pre><code>    @model IEnumerable&lt;Correspondence&gt;
      &lt;div id="Correspondence"&gt;&lt;/div&gt;
      &lt;script&gt;
          $(document).ready(function () {
              $('#Correspondence').kendoGrid({
                  dataSource: {
                          data: @Html.Raw(Json.Encode(Model)),
                          editable: { destroy: true },
                          batch: true,
                          pageSize: 15,
                          schema: {
                              model: {
                                  id: "Id",
                                  fields: {
                                      Subject: { type: "string" },
                                      CorrespondenceType: { type: "number" },
                                      SentDate: { type: "date" }
                                  }
                              }
                          }
                      },
                      navigatable: true,
                      selectable: "row",
                      filterable: true,
                      sortable: true,
                      pageable: {
                          refresh: true,
                          pageSizes: true
                      },
                      columns: [
                          {
                              title: "Subject",
                              field: "Subject"
                          },
                          {
                              title: "Type",
                              field: "CorrespondenceType"
                          },
                          {
                              title: "Sent Date",
                              field: "SentDate",
                              format: "{0:MM/dd/yyyy}"
                          },
                          {
                              command: [{ name: "openCorrespondence", text: "Open", className: "k-grid-openLaboratory", imageClass: "k-icon k-i-maximize", click: Open },
                                  { name: "deleteCorrespondence", text: "Delete", className: "k-grid-deleteLaboratory", imageClass: "k-icon k-delete", click: Delete },
                                  { name: "EditCorrespondence", text: "Edit", className: "k-grid-editLaboratory", imageClass: "k-icon k-edit", click: Edit }],
                              title: "Action"
                          }
                      ]
                  });
              }); // end ready
      &lt;/script&gt;
  </code></pre>
  
  <p>But it doesn't work. The table even doesn't show up. Please help me. Thank you.</p>
  
  <p><strong>Edited!!!</strong></p>