Kendo Grid not reading json data?

Question

Here is my javascript code that i am using to perfrom crud on kendo remember i am using api calls and in testing i have to use only json data

  document.onreadystatechange = function () {



var viewModel = kendo.observable({

    products: new kendo.data.DataSource({


        transport: {

            read: {
              type: "GET",
                url: "/api/Companies/GetAllCompanies2",
                dataType: "json"
            },

            create: {

                 type: "PUT",
                    url: "/api/Companies/UpdateDefCompny",
                  contentType: "application/json; charset=utf-8",
                    dataType: "json",
                async: false

            },
            update: {
                url:"/api/Companies/SaveDefCompny",
                async: false,
                contentType: "application/json",
                dataType: "json",
                type: "POST"
                 // here you need correct api url

            },
            destroy: {
                url: "/api/Companies/Delete", // here you need correct api url
                dataType: "json"
            },


            parameterMap: function (data, operation) {
                if (operation !== "read" && data) {
                    return JSON.stringify(data.models[0]);
                }
            }
        },
        serverPaging: true,
        serverFiltering: true,
        pageSize: 10,
        schema: {
            //data:"Data",
            total: "Count",

            model: {
                id: "Id",
                fields: {
                    Id: { type: "int" },
                    CurrentCurrencyCode: { editable: true, type: "int" },
                    ShortName: { editable: true, type: "string" },
                    FullName: { editable: true, type: "string" },
                    ContactPerson: { editable: true, type: "string" },
                    Address1: { editable: true, type: "string" },
                    CompanyCity: { editable: true, type: "string" },
                    CompanyState: { editable: true, type: "string" },
                    CompanyCountry: { editable: true, type: "string" },
                    ZipPostCode: { editable: true, type: "string" },
                    TelArea: { editable: true, type: "string" }

                }
            }
        },
        batch: true,


    }) 


});


   kendo.bind(document.getElementById("example"), viewModel);

  }

here is my server side code that is returning json data , i have tested and it sucessfully returns json data and i need it as it is exactly

   [HttpGet]
    public string GetAllCompanies2()
    {
        List<object> myCo = DefCompany.AllDefCompany2;


        object json = JsonConvert.SerializeObject(myCo);
        return json.ToString();

    }

grid code:

  <div id="example">
    <div id="kendoGrid"
         data-role="grid"
         data-pageable=" true"
         data-sortable=" true"
         data-filterable="true"
         data-toolbar="['create','save', 'cancel']"
         data-editable="inline"
         data-columns="[

      { 'field': 'Id', 'width': 100 },
           { 'field': 'CurrentCurrencyCode', 'width': 100 },
              { 'field': 'ShortName', 'width': 100 },
          { 'field': 'FullName', 'width': 100 },
       { 'field': 'ContactPerson', 'width': 100 },
         { 'field': 'Address1', 'width': 100 },
       { 'field': 'CompanyCity', 'width': 100 },
         { 'field': 'CompanyState', 'width': 100 },
          { 'field': 'CompanyCountry', 'width': 100 },
          { 'field': 'ZipPostCode', 'width': 100 },
      { 'field': 'TelArea', 'width': 100 },
      { command: ['edit'], title: 'Actions', width: '250px' },

     ]"
         data-bind="source: products"
         style=" height :500px"></div>
</div>
<div>






</div>

the question here is that why kendo grid is not populating with json data it only populoates when i deserialize or return object but i have to populate it with json?

Answer 1

Instead of this:

[HttpGet]
public string GetAllCompanies2()
{
    List<object> myCo = DefCompany.AllDefCompany2;


    object json = JsonConvert.SerializeObject(myCo);
    return json.ToString();

}

Do this:

[HttpGet]
public List<object> GetAllCompanies2()
{
    List<object> myCo = DefCompany.AllDefCompany2;
    return myCo;
}

Your data will then come back as pure json that doesn't have to parsed.

Answer 2

in global.aspx.cs file

     using System.Data.Entity;

  namespace RpManticSolAPI
  {
  public class WebApiApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        GlobalConfiguration.Configure(WebApiConfig.Register);
        GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
        GlobalConfiguration.Configuration.Formatters.Remove(GlobalConfiguration.Configuration.Formatters.XmlFormatter);          
    }
}
   }